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.

Author : Jean-Baptiste Jung

Jean is a 27 years old self-taught web developer and WordPress specialist who lives in Wallonia, the French speaking part of Belgium. In addition to Cats Who Code, he also blogs about WordPress at WpRecipes and about Photoshop at PsdVibe.

» Website

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>
                        
                </div>
        </li>
        <li>
                        </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 TooltipThis is the crazy little Easy Tooltip Text..

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;
    display:inline-block;
    padding-right:15px;
}

Posted via web from swathidharshananaidu's posterous