10 astonishing CSS hacks and techniques

by Jean. 103 Comments -

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

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

  • http://www.macfamous.com MacFamous

    wow awesome trick for style css ..

    i really need this, this what i looking for .. thx for your help

  • http://designblurb.com Sumesh

    Some neat tricks there, I liked the cross-browser inline block elements, minimum height and pure-css lightbox solutions a lot, will probably use them in future projects. Bookmarked!

  • http://www.kevinchoppin.com Kevin Choppin

    Nice post, in addition to the transparency solution, here is a good post about preventing children elements from inheriting the opacity.

    http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

  • Pingback: 10 astonishing CSS hacks and techniques « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  • http://www.jonesoptical.co.uk/ Opticians job vacancies

    Wow!! I have just started learning how to use CSS and I think what you have shared with us here is really something. Many thanks

  • http://meshmarketer.com Joseph Dowdy

    This is really a great collection of code. Thanks so much for this. Am saving on delicious.com.

  • http://www.firmasec.com firma

    “Cross browser transparency” is great tip but w3 isnt like this :)

    Thank you.

  • http://blog.joanfernandez.es/ Alwaison

    Good tips! Very useful, really.

    Only one thing to add to the Cross browser rounded corners post:
    There’s also another property, -khtml-border-radius.

    That is for the khtml based browsers, most used in linux systems.
    And, why not, I never forget to use the W3C standar, border-radius. Some day, all browsers will support this, dont forget! :)

    Thanks for the recopilation.

  • Pingback: 10 interesantes técnicas CSS. | pon css en tu vida!

  • http://www.infektia.net Malin

    Great collection of different hacks. I’m going to stumble! :)

  • http://www.wprecipes.com Jean-Baptiste Jung

    Thanks everyone for the nice comments, the diggs and the saves :)

  • http://www.simon-wilby-life.com Simon Wilby

    Never knew those kind of tweaks and hacks are possible. Thanks Jean!

  • http://smashinglive.com/ jj

    Really good article.

  • http://logisticology.com Danny

    Wow.. i think this article is very helpful for me to make over my website. I like the light box script. Thanks

  • http://www.brentwooduniforms.co.uk/ Healthcare Clothing

    Thanks very much for the information, it looks like you’ve got this programme cracked!

  • http://designawardsgallery.com/ Best CSS Gallery

    very good list indeed

  • Pingback: 10 astonishing CSS hacks and techniques – GikaDesign WebLog

  • Pingback: 10 Astonishing CSS Hacks and Techniques | MyNameIsDamien.com

  • dave morley

    i’m getting sick of these “cross-browser” selections that totally are NOT cross browser. cross browser rounded corners does not work on any IE. you even list firefox and safari as your huge cross browser compatibility list! are you not aware of any other browsers? cross browser transparency does not work in chrome. the list goes on… this is a collection of css markup which works in SOME browsers. a little pathetic.

  • http://www.pushingbuttons.net Timothy

    That cross-browser rounded edges is not cross-browser. What about IE?

    And you are missing this opacity attribute:
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=##)”;
    This was used in IE8 Beta. The KHTML isn’t really necessary since the market share is so low.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @dave morley: I know this article was reffered on Digg and other social bookmarking sites as “Cross browser hacks”, but the title of the article is “10 astonishing CSS hacks and techniques” and I did not stated that all hacks are cross-browser.

    For rounded corners IE compatibility, there’s a .htc file which allow you to do it.

  • http://www.nizzleworkz.co.za Lisa

    Stunning list, thank you! Can’t believe how much I need min-height and it always acts weird. However, this is the first full-proof fix I have seen.

  • john

    The inline-block source you listed is actually a rip from Mozilla:
    http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

  • http://www.0window.com/blog/ Catrin W

    Excellent list. It always good to know some extra pro hacks for CSS. Bookmarked and starred :). Thanks for sharing

  • Pingback: links for 2009-06-17 » 4exp.net

  • http://thedesigned.com Greg Dougherty

    This is such a great list… ReTweeting it as we speak!

  • Pingback: Links for June 3rd through June 18th | Michael Tyson

  • http://randsco.com stk

    #7 is false. Very disappointing.

    “No javascript needed” ??

    It fails without JavaScript and worse, it doesn’t even degrade nicely.

    Some REAL CSS techniques:

    [ADMIN EDIT: No links in comments, Thanks!]

    and more …

    Cheers.

  • http://www.dejan.com.au DejanSEO

    This is awesome. I’m gonna go and try a few of these right now.

  • Pingback: links for 2009-06-17 « Mandarine

  • http://www.freebabycoupons.info Baby Coupons

    Those are indeed Fascinating techniques.

  • Pingback: 10大跨浏览器的CSS hack技术与应用 « SonicHtml工作室- PSD转HTML / XHTML,CSS / W3C验证 / 多浏览器支持 / WordPress模板 / Joomla模板

  • http://gunnerpress.com J Mehmett

    The Lighbox in pure CSS without JS is really awesome. There are tons of things CSS can do without the need of JS. Cross browser inline block in rocking too.

    Thanks for sharing…

  • Pingback: Wordpress 2.8, Links zur Inspiration | ErikKeller.com

  • http://www.doorhandlecompany.co.uk/ Door Handles

    awesome set of hacks. Thanks very much for sharing this info

  • Pingback: CSS Tricks | CookieofDoom.com

  • http://www.aesthetic-doctor.com/botulinum_toxin.html botox glasgow

    How on earth do you work these things out?

  • http://something4free.net/ Free Nintendo DSi

    I ike the corss browser transparity hack, its really appealing and can be quite useful, but have to make sure background colours dont clash with the dropdown menus

  • http://www.serenedestiny.com Website Design Services

    I cannot wait until CSS3 is supported by all browsers. It bugs me that only Firefox and Safari can handle certain CSS3 techniques. I really wonder when more browsers will support CSS3.

    Nonetheless, thank you for the CSS hacks and techniques. I will have to save this for when I need it.

  • Venerator

    People like dave morley and Timothy make me laugh out loud.

    Dave, why whine about the lack of focus on Internet Explorer? I don’t think round corners are worth the hassle involved in making them work in IE8, unless a client wants to pay the big bucks. For a personal blog, one that is demonstrating CSS effects, can you really blame them for showcasing effects that IE doesn’t support? The fact that other examples are laden with non-validating CSS hacks for IE’s sake clearly missed your keen eye.

    And Timothy, I think an extra line of CSS to support a few Konqueror users isn’t a huge loss. Frankly I don’t understand the hate here, given that you seem willing to use non-validating, less secure techniques like CSS expressions to achieve the same effect.

  • Pingback: Reading list for 2009-06-20 | Blog Union

  • http://www.stockmarketforbeginners.co.uk/ stock market charts

    Wow it has a lot of good collection & they all are amazing tricks i am gonna to check it out & also sharing it with the friends!Thanks for it!

  • http://www.academyforartdesign.co.uk/ Interior Design Courses London

    These tips will really help me. Thank you for posting this

  • Pingback: Eiencafe.com --> New way to graphic

  • Pingback: Arbenting’s Weekly Inspiration and Best of the Web #9 | Arbenting

  • http://www.antidecaf.com Anders Johnsen

    “[ADMIN EDIT: No links in comments, Thanks!]” <– What’s that all about?

    stk is absolutely right that the so called “No javascript” lightbox actually depends on javascript. I’d love to see the other techniques that were linked to. Having said that, it’s still a pretty nice lightweight solution.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Anders Johnsen: I’m tired that some people use comments to put links to their own websites. CWC is dofollow, so people get a backlink each time they let a comment. That’s already cool, isn’t it?
    To be honest, I don’t remember what the link was about, but if I decided to remove it it was probably irelevant.
    If you have a relevant link to illustrate that the “No JS lightbox” uses javascript, it is of course welcome on here.

  • http://www.losbosques.net Ximena Eduarda

    Wow! Great post and for me a very valuable gift. I know CSS only as much as I needed to learn in order to build my site and 7 out of 10 things you mention I will use. Thanks a lot for sharing!

  • Pingback: Enlaces en mi del.icio.us, junio 2009 | Vectoralia

  • Pingback: 10 Astonishing CSS Hacks And Techniques | Design Newz

  • http://www.art2code.com Art2code

    Nice tricks ! thx

  • http://www.getlinkspro.com Jeet

    I really liked the disabling of textarea in Safari, the resizing can deform some pages badly. Recently saw another ‘drop_cap’ style with css, you should also check it out.

    Lightbox is the best and most surprising of these tricks you shared.

  • http://randsco.com stk

    @Jean-Baptiste Jung,

    I understand you’re tired of ppl who link to their own site.

    Firstly, however, our site is already linked by way of the “website” field.

    Secondly, the specific articles I included and linked were relevant to the article, which is about “astonishing CSS hacks and techniques.” (Both links were pure-CSS techniques: CSS Photo-caption Zoom and CSS popINFO. They are authored by me. What’s crime is that?).

    What I find tiring are articles titles that utilize superfluous adjectives like “astonishing” and worse, when they are blatantly misleading (like #7 – “Lighbox in pure CSS: No Javascript needed!”, which is pure hogwash because JavaScript IS necessary for the technique to work!).

    What I further find tiring is a double-standard approach to comment moderation, whereby an administrator picks and chooses what comments are added and what links shall be included or not included. Obviously links are accepted (as I noted in comment #3 and #19, prior to adding my own links).

    You wrote: “If you have a relevant link to illustrate that the “No JS lightbox” uses javascript, it is of course welcome on here”.

    Well, here is my new link, which pretty much definitively illustrates that the “No JS lightbox” requires JavaScript –> http://is.gd/1dkpF

    Cheers,
    -stk

  • http://www.wprecipes.com Jean-Baptiste Jung

    @stk: Yes, people are welcome to link their site in the “website” text field. This link is dofollow btw.
    If your first links were relevant and removed, I apologize for that. This post received lots of spammy comments and I have to check it to ensure the quality of the discution. Some people don’t hesitate to write “hey, check out this CSS technique” and link to an online casino…

    Therefore, there’s no censorship on this blog. I don’t choose which comments have to be published. I don’t have a problem with negative feedback and I respect freedom of expression for everyone.

  • http://randsco.com stk

    Thank you, Jean-Baptiste. Apology accepted. I can assure you, it’ll be a very chilly day at the center of the Earth before I submit a link for an online casino in a comment. ;-)

    Here are three pure-CSS techniques, authored by me, which your readers may find adds value to the interesting content contained in this article.

    Photo-caption Zoom</a Styling an Ordered List
    popINFO

    Cheers,
    -stk

  • http://www.selfhelpconsumer.com/Identity-Theft-Services/Lifelock-Review.html Eric Miller

    This list will come in very handy. Thank you for putting it together. The Lightbox in pure CSS tip is pure gold. Muchos gracias.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @stk: You’re welcome. Maybe I’ll list some of theses technics in a future post :)

  • Codie

    Love the tricks, thanks so much.

  • http://www.tense.pl Pozycjonowanie Poznan

    That’s very usefull, thanks. I’ll use this tricks in my homepage ;-)

  • http://www.howtostopstaphinfections.com Christy

    # 9 was exactly what I had been looking for. You have no idea how long. Thanks a million.

  • Pingback: 6月分享总结 « Kejun’s Blog

  • j.j.

    .transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }
    This is really out of date, see
    https://developer.mozilla.org/en/CSS/opacity#Browser_compatibility
    Let me summarise (partly stated in other comments):
    1. Konqueror NEVER SUPPORTED “-khtml-opacity”, this was for Safari 1.0-1.1
    2. Konqueror 4 supports “opacity”
    3. “-moz-opacity” is needless since Firefox 0.9
    4. IE8 likes quotes, the long form is not needed

    So this is state of the art, these days:
    opacity: 0.5; /* Firefox, Safari(WebKit), Opera */
    -ms-filter: “alpha(opacity=50)”; /* IE 8 */
    filter: alpha(opacity=50); /* IE 4-7 */
    zoom: 1; /* set “zoom”, “width” or “height” to trigger “hasLayout” in IE 7 and lower */

    j.j.

  • http://www.niharsworld.com/ Nihar

    Great hacks and techniques.

    Can you change the flower brace . something wrong at 2 – Disable Textarea resizing for Safari

    textarea }

    to textarea {

  • http://www.letsknowabout.com stranger

    man Lighbox in pure CSS is simply a beautiful and very cool tip , thanks again

  • http://blossomed.blogspot.com/ Goldberg

    You are master of CSS hacks.I liked Cross Browser Transparency hack.Thanks.

  • http://monetarytruths.blogspot.com/ Ravi

    Thanks for such a great collection of CSS tricks.So many of them at one place ,Amazing!! I have bookmarked the page for future use.

  • http://david.latapie.name/ David Latapie

    Image Rollover Borders That Do Not Change Layout >Why don’t you just use outline? Outline is border “over” the block, not “around”. Much simpler. Or I just missed a part (please don’t tell me it is IE compatibility).

  • http://david.latapie.name/ David Latapie

    Sorry, I did not read the source before commenting. It says: “Outline is nice, but it is limited in that you cannot apply one side or another. It’s all or nothing. Also, outlines can only be applied outside an element.” I don’t understand the second part of it, but still…

  • http://www.rlhealthcareadvisors.com Healthcare Management

    Cross browser rounded corners , Cross browser transparency, Lighbox in pure CSS without use of JS these are the best for me about some of i know little bit this are totally new for me to also soon wanted to implement.

  • groovey

    Most of this is bad. Your code should be universal, not browser specific.

  • http://www.webhostright.com/ John

    Thanks very much for these, really great hacks.

  • Pingback: Mastering CSS: Advanced Techniques and Tools | CSS | Smashing Magazine

  • Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools | YABIBO.COM - YOUR WEB WORLD

  • Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools « Tech7.Net

  • Pingback: Wordpress Blog Services - Mastering CSS, Part 2: Advanced Techniques and Tools

  • Pingback: Shopping Mall » Mastering CSS, Part 2: Advanced Techniques and Tools

  • Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools - Programming Blog

  • http://www.casinogamblinghub.com sherone

    Is proper validation really that big of a deal? I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.

  • Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools | WEBDESIGN FAN

  • Pingback: Shopping Mall » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

  • Pingback: Advertisers Blog » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

  • Pingback: 網站製作學習誌 » [Web] 連結分享

  • http://adrian@thinkadrian.com Adrian

    I didn’t bother to read the comments first.

    You are over-using the term “cross browser”, for instance, “cross-browser rounded corners” only work in WebKit and Mozilla browsers, that is NOT Internet Explorer earlier than Explorer 9 (or 10 or 11), which still has more than 75% of the Internet market.

  • Pingback: Caffeine Driven Development » Blog Archive » L33t Links #2

  • http://randsco.com stk

    Jean-Baptiste,

    All summer long, I’ve sat back and watched #7 “Lightbox in pure CSS – no JavaScript Necessary” awarded undue attention.

    Finally, I’ve done something about it!

    The title is a lie, as that technique relies upon (and fails miserably without) JavaScript. Even as a JavaScript technique, it’s crap. I’ve explained why and provided a accessible, web-standards version, which fixes several visual breaks and allows it to – for the first time – work in IE6.

    Here’s the Article

    (Hoping you’ll see fit not to mow it down this time!) :-p

    Cheers,
    -stk

  • http://www.wprecipes.com Jean-Baptiste Jung

    @stk: Thanks or the article. Maybe I’ll add it to a future round up :)

  • http://www.messageforce.com.au/seo.aspx MessageForceSEO

    Hi there,

    Thanks for the Cross browser transparency hack. We’ve been trying to make popovers and this has been very helpful.

    Cheers,
    -messageforce

  • Pingback: » Mastering CSS, Part 2: Advanced Techniques and Tools endo – luxury coding

  • http://www.devolute.net Ian Parr

    A great list, even if it is a bit naughty to call #3 “cross browser”.

  • http://aditz.info 4d1tz

    weew.. so awesome… nice inpo dude.. :D

  • fiddlestixx

    Nice! In my opinion CSS-Hacks are overrated, they are rather providing a potetial lack of upward-compability. That is why I would recommend the following for inline-block elements to avoid depreaceated css-syntax:

    .selector {
    display:table-cell;
    display:inline-table;
    display:inline-block;
    }

    got it from here:
    spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm

  • http://www.imicreation.com vipin

    good tips. Bookmarked. Thanks for sharing!!

  • http://www.free-istuff.co.uk Milo

    jQuery + CSS = design top website

  • http://www.peternorman.com peter norman

    when jq+css it is absolute !

  • http://Ghosts-IT.com Radz Nguyen

    Nice! In my opinion CSS-Hacks are overrated, they are rather providing a potetial lack of upward-compability.

  • http://ghosts-it.com radz nguyen

    Wow it has a lot of good collection & they all are amazing tricks i am gonna to check it out & also sharing it with the friends!Thanks for it!

  • http://shawnhooghkirk.com Shawn Hooghkirk

    I really wish that highlighting was cross-browser, but at least it doesn’t hurt using it (to my knowledge).

    Thanks for posting the tutorials Jean!

  • Pingback: Arbenting’s Weekly Inspiration and Best of the Web #10 » Arbenting - The Act of Being Creative

  • http://www.StefanusRakhmat.com Stefanus

    Awesome techniques, thanks for sharing!

  • http://tomipurba.net tomi

    waw amazing css hacks tutorial dude..

  • http://tinnitusmiraclethomascolemans.com Brad Tommy

    A Note About CSS Hacks. It’s worth noting that I’m not advocating the use of hacks in your stylesheets in any way. On the contrary, you should almost always use conditional comments.

  • http://www.antalyam.tv antalya

    I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.

  • http://prodi-jurusan.blogspot.com/ Prodi Jurusan

    wow awesome trick for your style css ..

    i really need this, this what i looking for .. thanks for your help