39 CSS Tricks To Make You A Better Coder


It is almost impossible to gather in an article all the CSS tricks that could help you in the future but here are some of the ones that you would need more often than others.

Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented.

Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.

Vertical Align Anything

If you stumbled upon this issue before, you know how annoying it is. Luckily, you can now use CSS3 Transform to solve the problem.

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

Box Shadow Only on One or Two Sides

.box-shadow {
background-color: #AC92EC;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;

Animating A Gradient Background

CSS Animations have started to become a cool thing since CSS3, but they only look good if they aren’t overdone. This neat trick moves the background position to look like it is animating.

button {
background-image: linear-gradient(#FC6E51, #E9573F);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
button:hover {
background-position: 0 0;

Split the text into columns

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

Table auto-width

I got annoyed by this more than I should have been when I worked on a project.

td {
white-space: nowrap;

First article larger, like in print publications

font-size: 28px;
font-weight: bold;

Comprehensive List of Browser-Specific CSS Hacks

Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Create a blurry text

.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);

Cross Browser Vertically and Horizontally Centered Images in CSS without Tables

This centers an image of unknown size vertically and horizontally within a box. The wrapper box has an explicit width and height. The is a hack for internet explorer

.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }

Highlight checked input

input:checked + label{
background: yellow;

Cross-Browser Transparency via CSS

You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */

CSS Box Shadow

Overdoing it may result in looking weird but using it with style can add a certain classy look to your divs without using any images to do so. The box shadow property is one of the new things that CSS 3 brings us and one of the most wanted.

Outer shadow

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;

Inner shadow

.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;

Cross-Browser Min Height

The CSS min-height is one of the most requested css snippets to solve the annoying min-height problems in IE.

#div {
min-height: 500px;
height:auto !important;
height: 500px;

Ways to Preload Images with CSS, JavaScript, or Ajax

Reloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.

CSS Fixed Footer

Making your footer sticky with CSS is a must do. You don’t want it to come after the header on small content pages like a kid comes after candy. It is simply wrong.

#footer {

/* IE 6 */
* html #footer {
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

Clearfix CSS Hack

Putting everything together and combining these lessons learned with the original (correct) version of the Easy Clear Method, we fashion the following, fully functional, flaw-fixing CSS clearfix formula:

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
clear: both;
height: 0;
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

8 Definitive Web Font Stacks

The idea behind creating recommended font stacks is simple: since most web designers don’t know a great deal about font selection and typography for the Web, and have far too much on their plates to spend the time needed to learn, they need a one-stop shop of font stacks that provides a wide variety for all platforms—Windows, Mac and Linux.

Additionally, those designers who do understand enough about typography may feel like their creativity is limited by the restrictions of the standard “web safe” set of fonts. Using font stacks is one possible way of increasing a designer’s options.

The font stacks listed here are grouped together by the universal font that forms the base of that stack. A designer can therefore decide on a typographical look for their site, grab the appropriate font stack, and tweak it to suit their needs.

/* The Times New Roman-based serif stack: */
font-family: Cambria, Hoefler Text, Utopia, Liberation Serif, Nimbus Roman No9 L Regular, Times, Times New Roman, serif;

/* A modern Georgia-based serif stack:*/
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;

/*A more traditional Garamond-based serif stack:*/
font-family: Palatino Linotype, Palatino, Palladio, URW Palladio L, Book Antiqua, Baskerville, Bookman Old Style, Bitstream Charter, Nimbus Roman No9 L, Garamond, Apple Garamond, ITC Garamond Narrow, New Century Schoolbook, Century Schoolbook, Century Schoolbook L, Georgia, serif;

/*The Helvetica/Arial-based sans serif stack:*/
font-family: Frutiger, Frutiger Linotype, Univers, Calibri, Gill Sans, Gill Sans MT, Myriad Pro, Myriad, DejaVu Sans Condensed, Liberation Sans, Nimbus Sans L, Tahoma, Geneva, Helvetica Neue, Helvetica, Arial, sans-serif;

/*The Verdana-based sans serif stack:*/
font-family: Corbel, Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana, Verdana Ref, sans-serif;

/*The Trebuchet-based sans serif stack:*/
font-family: Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Bitstream Vera Sans, Trebuchet MS, Verdana, Verdana Ref, sans-serif;

/*The heavier “Impact” sans serif stack:*/
font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans-serif;

/*The monospace stack:*/
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;

Give Clickable Elements a Pointer Cursor

Some elements that are clickable mysteriously don’t trigger a pointer cursor in browsers. This fixes that, and provides a default class “pointer” for applying it to other clickable things as needed.

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;

iPad Orientation CSS (Revised)

It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }

Wrapping Text Inside Pre Tags

height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */

Hardboiled CSS3 Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */

/* iPhone 4 ----------- */
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
/* remember to define focus styles! */
:focus {
outline: 0;
body {
line-height: 1;
color: black;
background: white;
ol, ul {
list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
caption, th, td {
text-align: left;
font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
blockquote, q {
quotes: "" "";

Multiple borders

An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

#borders {
border:5px solid #f00;

The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

#borders:before {
border:5px solid #ffea00;

#borders:after {
border:5px solid #00b4ff;

Remove Scrollbar from Textarea in IE

It makes you wonder why do textareas have in IE a scrollbar even when they’re empty. Nobody knows for sure but here’s the solution.

textarea { overflow: auto; }