Words from Alejandro U. Alvarez
Stylish CSS trick for your Website
Maybe a few of you noticed this on some websites, maybe some of you even use it.
Right now this works in Safari, Opera, and Konqueror and Firefox 3.x. (I think it doesn't work in Firefox 1 or 2, correct me if I'm wrong)
What I'm talking about is the text-shadow, wisely applied to your design, it can give an great touch of elegance to your site.
Here you have an example:
And here you have a coded example:
Test shadow
The code
The CSS for this is very simple, we will simply apply a slight text-shadow, of 1px with no blur, to the text:
.elegant{ text-shadow:#FFFFFF 0 1px; }
This effect works best with dark grey text over light grey background, and it is a very useful style for "2.0" designs.
Hope you enjoyed it!
Alex
| Print article | This entry was posted by alex on October 19, 2009 at 5:11 pm, and is filed under CSS. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No comments yet.
No trackbacks yet.
iPhone web development [Part 2]
about 2 months ago - No comments
In part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags… ) we will now move on to the really clever bit: Orientation detection.
For many sites, we may just have the same thing both on portrait and landscape. But More >
Fast and dirty CSS trick for IE
about 4 months ago - No comments
I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn’t have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn’t exist… But well, there are some times when we need something More >
Apply a background image to an image
about 1 year ago - No comments
this is quite a neat trick, and it can look really good depending on your design and the image you put as background…
To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:
img{
display:block;
padding:10px;
background-image:url(image.gif);
}
Here is a very smart use of this technique, where a More >
How we became web developers…
about 2 years ago - 3 comments
I normally write to those web developers/programmers who are already good, experienced, and thus the articles are somewhat advanced.
But today I got up feeling nostalgic I guess, or I just felt like remembering back on my www birth, on my first impression of the Internet, my first site online, my first steps in w3c standards, More >
Beautiful tab design:
about 2 years ago - No comments
This article is not on how to create tabbed menus, is just about how to style them!
I completely forgot who was the source, so if you happen to be the author comment your URL and I’ll put up a link
Anyway, I found that this is by far the easiest and probably most beautiful More >