This marker was passed to me by the designer and it has shadows and irregular shapes.
The point is to have a menu with a “marker” like this, but that should be flexible so that children’s of all ages could see it properly, regarding their font-size choice.
Background:
Background image seems to not be usable since there’s apparently no way to repeat parts of it, due to the irregular nature of this object.
If we don’t repeat the image doesn’t stay flexible.
Sliding Doors:
It seems we cannot make this button wider by using two images on left and right side, because the shadows will not follow.
The middle thing, seems to not work either.
Width: 100; Height: auto:
Something like this seems to distort the all image upon user resize I believe.
What options do we have here? Can anyone help me out on this (perhaps) common case ?
can it gracefully degrade? It would seem to be you could use css3 to create a box shadow and a pseudo element (:before,:after) to add the triangle image, which you can then AP at the center bottom of the element. Yeah, browsers w/o css3 support would have no drop shadow, but the highlighting color and triangle would still be there. Even as an art director i would be satisfied.
It’s nicer to center the arrow perfectly as a background image. There are many ways to do this, but I’ve removed the pseudo class from my example and used spans instead. How about something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
#regions-navigation ul {
margin-top: 10px;
margin-bottom: 10px;
}
#regions-navigation ul li{
display:inline;
margin-right: 1%;
}
#regions-navigation ul li:last-child {
margin-right: 0;
}
#regions-navigation ul li a {
font-size: .9em;
line-height: 20px;
padding: 0 10px;
display:inline-block;
position: relative;
}
#regions-navigation ul li a span {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 14px;
}
#regions-navigation ul li a:hover span {
background: url('http://s8.postimage.org/t9kn5ofqp/triangle_Menu.png') no-repeat 50% top;
}
#regions-navigation ul li a:hover {
box-shadow: 1px 1px 3px #4d4d4d;
text-decoration: none;
position:relative;
background: #ED1E79;
}
li {
padding-bottom: 14px;
}
</style>
</head>
<body>
<div id="regions-navigation">
<ul>
<li><a href="#">Jiko<span></span></a></li>
<li><a href="#">Kiko-Aiup<span></span></a>
</ul>
</div>
</body>
</html>
It would be good to fix up the arrow image, though. It seems cut off at the top corners.
First of all, thanks for your suggestion. Having empty semantic irrelevant spans causes me some itching. Truth being told, also shadows that accomplish visually nothing relevant, and ::pseudo stuff that old browsers don’t accept. In the middle of all those itching things, I end up doing like this:
Based on your code provided, I’ve removed the span, and placed a ::after with some little adds here and there, and PUM, the element gets centered. yeah!
div ul li {
display:inline;
}
div ul li a {
padding: 2px 10px;
display:inline-block; /*no need for line-height - we are using inline-block on a native inline element, so, no issues on old relevant IE's I believe*/
position: relative;
}
/*let's style that pseudo element: */
div ul li a::after {
content: ""; /*this must be here*/
position: absolute;
width: 100%;
top: 100%; /*this will push it down to the bottom of the relative container.*/
left:0;
height: 14px; /*we have no content so we better have some height for the background to be visible.*/
}
/* and on hover a, that pseudo element will gain: */
div ul li a:hover::after {
content: "";
background: url('http://s8.postimage.org/t9kn5ofqp/triangle_Menu.png') no-repeat 50% 0;
/*50% on the horizontal background placement will make that arrow on the middle */
}
div ul li a:hover {
box-shadow: 1px 1px 3px #4d4d4d;
text-decoration: none;
position:relative;
background: #ED1E79;
}
notes:
I will deal with those ::after on older browsers via js I believe.
“What about browsers without js enable dude?”
Well…
“What about a computer without internet, hm?”
Indeed. It was for testing only. Guess I will never be a proper designer by any standards.
THE BIG QUESTIONS
1)
What does:
left:0;
do?
Why do we need him in order to have the arrow properly placed?
When an element has position: absolute, it likes to know where is should be positioned. left: 0 tells it to keep its left edge at the far left of the container.
Why do we need him in order to have the arrow properly placed?
Why left: 50%; don’t seem to produce the expected effect, and background-position: 50% 0; do ?
Well, left: 50% says to put its left side in the middle of the container, which is not what you want. the background position says “put the middle of the background image in the middle of the container”.
For what it’s worth, I haven’t used the sliding doors technique since CSS3 hit prime time.
I’d make the triangle without the image as well, when you know the width of the element you’re trying to center you can user left: 50% and a negative margin equal to half the width.
Indeed. What we would want would be, to have it left: 50% - minus HALF (thanks markbrown4 ) the width of the element we wish to center, - some margins or paddings it may have, in order to be properly centered.
And since the container has 100% width of their parent, if will perfectly fit on the center.
Will that work with shadows ? I believe not. At least not with the border way of doing it. And adding extra markup for building such a thing is more complex then adding an image of such a small size.
After some readings, I believe an image is still the best way to go on this case.
You’re right, that method using borders for the triangle won’t work with box-shadow.
There’s nothing wrong with using an image, it’s always good to challenge yourself with css though because there’s nearly always a way
That looks interesting Mark and is pretty neat and tidy
(I sometimes feel as though webkit is the new (old)IE in terms of coming up with fancy filters and effects. It’s strange that everyone hated the IE filters but now embrace the webkit ones.)
Yes, webkit is taking the open approach while IE’s was a closed approach but I was mainly referring to the fact that people hated transitions, swipes, fades - all beloved of Frontpage users as they were easy to apply from there. I remember fondly in the distant past how the page would slowly disolve when you clicked a link to go somewhere else
I think Apple has helped show how good these effects can be when not used for evil.
[/quote]
Yes, its all about how well we use them or how badly we abuse them. In the end a bad designer can make even the best features look awful. I suppose its all about having the ability to do what’s needed in the best possible way.
In the middle of all those itching things, I end up doing like this:
) the width of the element we wish to center, - some margins or paddings it may have, in order to be properly centered.