10 astonishing CSS hacks and techniques

By Jean-Baptiste Jung Well, I guess that almost all of you knows CSS and what it can do for you. But some astonishing techniques still remains obscure for a lot of developers. In this article, let's see 10 cross browser css techniques to definitely enhance your designs.

1 Cross browser inline block

<style> li {

width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; margin: 5px; zoom: 1; *display: inline; _height: 250px;

} </style>

<ul>

<li> <div>

<h4>This is awesome</h4> <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </div> </li> <li> <!-- etc ... --> </li> </ul>

Source: Cross browser inline-block property

2 Disable Textarea resizing for Safari

/ * Supports: car, both, horizontal, none, vertical * / textarea } resize: none; }

3 Cross browser rounded corners

.rounded{ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari */ }

Source: Border-radius: create rounded corners with CSS!

4 Cross browser min-height property

selector { min-height:500px; height:auto !important; height:500px; }

Source: Min-height fast hack

5 Image Rollover Borders That Do Not Change Layout

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; } #example-one a:hover { border: 3px solid black; }

#example-one a:hover img { margin: -3px; }

Source: Image rollovers that do not change layout

6 Cross browser transparency

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

Source: CSS transparency settings for all browsers

7 Lighbox in pure CSS: No Javascript needed!

Source: Lightbox effect in pure CSS: No javascript needed!

8 Cross browser pure css tooltips

<style type="text/css"> a:hover { background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px; } a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; } </style> Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

Source: Easy CSS Tooltip

9 Set color of selected text (Firefox/Safari only)

::selection { background: #ffb7b7; /* Safari */ }

::-moz-selection { background: #ffb7b7; /* Firefox */ }

Source: Use CSS to Override Default Text Selection Color

10 Add File Type Icons next to your links

a[href^="http://"] { background:transparent url(../images/external.png) center right norepeat; display:inline-block; padding-right:15px; }

Source: Add File Type Icons next to your links with CSS