10 Astonishing CSS Hacks And Techniques

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

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

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

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: