While working on some web design for a colleague of mine the other day, I came across this cool css trick that I had never seen or read about. It was so different that I wanted to share it with you. I wish I could take credit for this, but I can’t. Thanks goes to Michael Davis of I’m Not Marvin for putting this one together. I’m just relaying the trick.
So, I came across a problem where I needed a sort of box-shadow to follow the text in a menu item. The shadow itself was done in photoshop and saved as a .png file and uploaded to wordpress. The shadow itself couldn’t be one length as the list items were all different lengths.
So I started by adding a div to each list item with the css class of image in each one. Then I put div after that and called style=”clear:both” to get rid of any positioning that might have been inherited. Here’s the way it looked:
<ul>
<li><div class=”image”>Guest Calendar</div><div style=”clear:both”></div></li>
<li><div class=”image”>Event Calendar</div><div style=”clear:both”></div></li>
<li><div class=”image”>Podcast Archive</div><div style=”clear:both”></div></li>
<li><div class=”image”>Blog Archive</div><div style=”clear:both”></div></li>
</ul>
Then I added the CSS like this:
ul li .image {
padding: 8px 75px 8px 20px;
background-position: top right;
background-image: url(textshadow2.png);
float: left;
}
So, clearing any relative or absolute positioning in the div allowed me to use float:left, and the I positioned the background image to the top right. If you don’t position it to the top right, it automatically goes top left and then it stretches all the way to the right. The padding of 75px right is what will push it over as well as the float:left styling.
In this way you are actually using the image to regulate the size of the menu item. I had a whole set of other code on the “ul li” that looked as follows:
ul li {
background-image: url(dropshadow.png);
background-color: #bb0000;
list-style-type: none;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
font-weight: normal;
margin: 0px 0px 0px 0px;
}
So you can see here that there really isn’t any positioning styles on the “ul li” itself. The drop shadow was added to run the length of the list item on the top with a height of about 5px. Again, a .png image. So now I have 2 images in the same list item! Cool, huh?
The cool part for me though was that now the text shadow will always only go as far as the text itself goes. In all honesty, I’m not 100% sure why, I just know that it works.
I’d love to hear your comments and/or explanations as to why this worked so I have a better understanding. Sometimes you don’t need to understand it, you just need to know that it works.
Until next time…. may your code validate and the winds be ever at your back.
Audee says
I think it would be easier to understand if there’s a live demo of your codes. Well.., is there any link you can share? 🙂
mobremski says
Great question! There wasn’t until just a couple of weeks ago when we finished the site. http://dfzradio.com/?show=heavy-ts-grow-show It’s the red menu at the top of the page. Notice the text-shadow follows the text in each instance. The text-shadow is an image.
mobremski says
Update: they removed the links we built using the text-shadow so that link to dfzradio doesn’t show it anymore. I guess the important part to take away from this is that you CAN add a div inside a li tag, give it an ID or a class and then add a background to the ID or class.
Leigh Bicknell says
It works like this because the background image on the div is stretched to the size of the div. And the div is floated, meaning it will shrink to the size of its content (in this case the text). Thus background image size matches text size.