Monday, September 8, 2008

Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images
<div id="container">

<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>

<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>


Rounded corners without images

2. Style your order list


This is line one

Here is line two

And last line


Style your order list

3. Tableless forms
<label for="name">Name</label>
<input id="name" name="name"><br>

<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>

<input id="city" name="city"><br>

Gradient text effect

4. Double blockquote

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;

Double blockquote

5. Gradient text effect
<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;

<!--[if lt IE 7]>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');

6. Vertical centering with line-height
div *{
div p{

Content here

Vertical centering with line-height

7. Rounded corners with images
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"

style="display: none" />

<div class="roundbottom">
<img src="bl.gif" alt=""

width="15" height="15" class="corner"
style="display: none" />


.roundcont {
width: 250px;
background-color: #f90;
color: #fff;

.roundcont p {
margin: 0 10px;

.roundtop {
background: url(tr.gif) no-repeat top right;

.roundbottom {
background: url(br.gif) no-repeat top right;

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;

Rounded corners with images

8. Multiple class name
pre class="css">&nbsp;
&lt;img src=<span style="color: #ff0000;">&quot;image.gif&quot;


Post a Comment

Subscribe to Post Comments [Atom]

<< Home