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
<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;
}
Pingback: 10 astonishing CSS hacks and techniques « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit()
Pingback: 10 interesantes técnicas CSS. | pon css en tu vida!()
Pingback: 10 astonishing CSS hacks and techniques – GikaDesign WebLog()
Pingback: 10 Astonishing CSS Hacks and Techniques | MyNameIsDamien.com()
Pingback: links for 2009-06-17 » 4exp.net()
Pingback: Links for June 3rd through June 18th | Michael Tyson()
Pingback: links for 2009-06-17 « Mandarine()
Pingback: 10大跨æµè§ˆå™¨çš„CSS hack技术与应用 « SonicHtml工作室- PSD转HTML / XHTML,CSS / W3CéªŒè¯ / 多æµè§ˆå™¨æ”¯æŒ / WordPressæ¨¡æ¿ / Joomla模æ¿()
Pingback: Wordpress 2.8, Links zur Inspiration | ErikKeller.com()
Pingback: CSS Tricks | CookieofDoom.com()
Pingback: Reading list for 2009-06-20 | Blog Union()
Pingback: Eiencafe.com --> New way to graphic()
Pingback: Arbenting’s Weekly Inspiration and Best of the Web #9 | Arbenting()
Pingback: Enlaces en mi del.icio.us, junio 2009 | Vectoralia()
Pingback: 10 Astonishing CSS Hacks And Techniques | Design Newz()
Pingback: 6月分享总结 « Kejun’s Blog()
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()
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] 連çµåˆ†äº«()
Pingback: Caffeine Driven Development » Blog Archive » L33t Links #2()
Pingback: » Mastering CSS, Part 2: Advanced Techniques and Tools endo – luxury coding()
Pingback: Arbenting’s Weekly Inspiration and Best of the Web #10 » Arbenting - The Act of Being Creative()