March 24, 2006

CSS: Color the Spring Season!

Pun aside in this post title, it's springtime - at least for the northern half of the world - and doesn't it feel good? A cool breeze in the city streets, a clear blue sky finally rid of the moody english clouds, and a bright golden sun!

What do weather phenomena have to do with blogs? Well isn't just about time you updated your blog banner and put some dendelions, daisies, and other flowers? Isn't it time we stroke up an orchestra of color? Well maybe you can. With some CSS, javascript, and a wee bit of imagination, the opportunities are countless.

 First, let's look at a sample letter-drop: let's take the previous paragraph and don it with a bright big capital W letter instead of the dull old Arial 10pt letter. How?


Here goes: 

W

hat do weather phenomena have to do with blogs? Well isn't just about time you updated your blog banner and put some dendelions, daisies, and other flowers? Isn't it time we stroke up an orchestra of color? Well maybe you can. With some CSS, javascript, and a wee bit of imagination, the opportunities are countless.

And the code to achieve that? Easy:

.letterdrop
{
border : medium none ;
margin : -5px 3px 0px 0px;
padding : 0px;
text-align: right;
position: relative;
float: left; width: 30px;
height: 20px;
font-family: helvetica,arial;
font-weight: bold;
font-size: 24pt;
}

 Then, whenever you want a capital letter to drop down, simply add a div as follows:

<div class="letterdrop">W</div> 
So who's going to show it off on his/her blog? If you've found this post useful, please drop in a comment and let us know. We can help with other CSS techniques - nothing fancy but some tips and tricks that'll help you pull the greatest stunt ever!
Posted by The Blog Hiker at 00:52:18 | Permanent Link | Comments (6) |
Comments
1 - Good and give us more~! (Comment this)

Written by: Smile at 2006/03/31 - 08:17:48
2 - rain has many effects on the human body, both physically and mentally. when most people think of the rain, they become sad and depressed, but i like the rain. it symbolizes the washing away of old and the starting a new.
the rain is calming and thunder is a splender to watch because even though it is dangerous it is also beautiful. (Comment this)

Written by: stephen Esperson at 2006/04/12 - 07:50:51
3 - rain has many effects on the human body, both physically and mentally. when most people think of the rain, they become sad and depressed, but i like the rain. it symbolizes the washing away of old and the starting a new.
the rain is calming and thunder is a splender to watch because even though it is dangerous it is also beautiful. (Comment this)

Written by: stephen Esperson at 2006/04/12 - 07:51:06
4 - <h1>deneme<h1> (Comment this)

Written by: deniz at 2006/04/12 - 10:43:11
5 - <h1>nedens</h1> (Comment this)

Written by: deniz at 2006/04/12 - 10:46:23
6 - kind of a flawed method isnt it? when you make the font bigger, the drop capital overlaps the text. (Comment this)

Written by: kim at 2006/08/04 - 12:49:39
Write a comment