Twelve most used CSS tricks
By Dejan Cancarevic ; February 10th, 2009
Tagged:
1
2
3
4
5

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>

</b>

<!–content goes here –>

<b class="rbottom">

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

</b>

</div>

.rtop, .rbottom{display:block}

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}

.r1{margin: 0 5px}

.r2{margin: 0 3px}

.r3{margin: 0 2px}

.r4{margin: 0 1px; height: 2px}

Rounded corners without images

2. Style your order list

<ol>

<li>

<p>This is line one</p>

</li>

<li>

<p>Here is line two</p>

</li>

<li>

<p>And last line</p>

</li>

</ol>

ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}

ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

Style your order list

3. Tableless forms

<form>

<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>

</form>

label,input {

display: block;

width: 150px;

float: left;

margin-bottom: 10px;

}

label {

text-align: right;

width: 75px;

padding-right: 20px;

}

br {

clear: left;

}

CSS Tableless forms

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]>

<style>

h1 span {

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);

}

</style>

<![endif]–>

Gradient text effect

6. Vertical centering with line-height

div{

height:100px;

}

div *{

margin:0;

}

div p{

line-height:100px;

}

<p>Content here</p>

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>

CONTENT

<div class="roundbottom">

<img src="bl.gif" alt=""

width="15" height="15" class="corner"

style="display: none" />

</div>

</div>

.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

<img src="image.gif" class="class1 class2" alt="" />

.class1 { border:2px solid #666; }

.class2 {

padding:2px;

background:#ff0;

}

9. Center horizontally

<div id="container"></div>

#container {

margin:0px auto;

}

Center horizontally

10. CSS Drop Caps

<p class="introduction"> This paragraph has the class “introduction". If your browser supports the pseudo-class “first-letter", the first letter will be a drop-cap. </p>

p.introduction:first-letter {

font-size : 300%;

font-weight : bold;

float : left;

width : 1em;

}

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake

a{

white-space:nowrap;

}

#main{

overflow:hidden;

}

12. Show firefox scrollbar, remove textarea scrollbar in IE

html{

overflow:-moz-scrollbars-vertical;

}

textarea{

overflow:auto;

}

 

___________________________________________________________________
About the author:
Dejan Cancarevic is a young designer and programmer from Serbia, who also plays the guitar and has a black belt in karate.
Mostly he works as a frontend coder, or CSS designer so it’s CSS, xHTML, JavaScript, Design, but he also does PHP, MySQL ASP, Flash, Actipnscript and C, C++, C#, ASP.NET, .NET Technologies etc. He is working in Dreamweaver, Flash, Photoshop, Illustrator, After Effects.
His website is available at StylizedWeb.com

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.
  • Flash can be added to this post.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

To prevent automated spam submissions leave this field empty.