10 astonishing CSS hacks and techniques

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

    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;

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

2 – Disable Textarea resizing for Safari

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

3 – Cross browser rounded corners

    -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 {
  height:auto !important;

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 {
	-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 {
    text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {
    padding:2px 3px; 

a.tooltip:hover span{
    border:1px solid #cccccc; 

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 no-repeat;