Master your CSS3! Ultimate CSS code snippets

CSS3 is coming and we as webdesigners should be ready for it! CSS is no doubt one of the most important web languages to style a website.

(x)html provides the structure and CSS the style. It is where most of us get creative.

Below is a fantastic list of Css snippets that we are sure you will find extremely useful. Whether you are a veteran web developer, or are just a beginner, check this snippet they are all well worth checking out.

Css Reset by Eric Meyer

Eric Meyer’s css reset has become almost standard. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Hide text (to place logo) with text indent

Hiding text can be extremely useful to hide company logo. As logos are usually an image, you will want to use text indent to place it in a h1 tag for SEO (Search Engine Optimization). The technique we use is to hide the text far away off the screen, and apply a background image instead.

h1 {
   text-indent:-9999px;
   margin:0 auto;
   width:400px;
   height:100px;
   background:transparent url("images/logo.jpg") no-repeat scroll;
}

Style links depending on file format

Since CSS3 you can style links depending on some rules also called attribute selectors. This is extremely convenient if you have files in PDF, Zip among other and you want to display a small icon near it. With this technique you can do it without including an image on your link. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
	content: url(icons/zip.png);
}
/* djavupixel
The *= specifies that at least one instance of the substring “djavupixel” matches.
*/
a[href *="djavupixel"] {
  padding-right: 17px;
  background: url(icons/super-star.png) no-repeat right;
}

Remove textarea scrollbar in IE

Internet Explorer adds a scrollbars to textarea even when the textarea’s content is not overflowing. This snippet rectifies this flaw.

textarea{
overflow:auto;
}

Drop cap

For hundreds of years, initials have been used to set off the first letter of a chapter or paragraph. Here is how this can be done for your blog! It is surprisingly easy to implement and it degrades well for older browsers.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}

Css Transparency

Transparency always add a nice touch to the design of your blog. As transparency is something that isn’t done the same way across browsers here is how you can have transparency in multiple browsers. Do not forget that you can combine 2 classes in CSS.

.transparent {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}
Example:
<div class="box transparent">Something...</div>

Image pre-loader

Sometimes it is useful to pre-load your images so that when a certain element is needed, they’ll already be loaded for you and there wont be any delay or flickering.

div.loader{
   background:url(images/hover.gif) no-repeat;
   background:url(images/hover2.gif) no-repeat;
   background:url(images/hover3.gif) no-repeat;
   margin-left:-10000px;
}

Resize background image

In CSS3 we can apply background image dimensions. So imagine you have a large image and you want to shrink it a bit, with CSS3 it is possible! Take care not all browsers support it.

#resize-image {
   /* Just imagine that the image_1.png is 200x400px */
   background:url(image_1.png) top left no-repeat;
   -moz-background-size: 100px 200px;
   -o-background-size: 100px 200px;
   -webkit-background-size: 100px 200px;
}

Multiple Background Images

Multiple background images can be a useful feature if you want to put some pictures in a background in different positions. Separate it  using a comma with the standard background property.

#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}

Multiple Columns

Now you do not have to brother about columns as CSS3 supports it. Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column. It is pretty straightforward. In this example we create a 3 column layout.

#columns-3 {
   text-align: justify;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-rule: 1px solid #c4c8cc;
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-rule: 1px solid #c4c8cc;
}

Basic css sprite button

Using a sprite is a good idea as it lowers the HTTP-Request. Here is a simple example on how to use this technique. Using a sprite, we can create the hover effect by changing the position of the background image down to a certain height to show the background to the button on hover. A simple yet effective technique. The drawback of using multiple sprites on an image is that you cannot repeat it.

a {
   display: block;
   background: url(sprite.png) no-repeat;
   height: 64px;
   width: 240px;
}

a:hover {
   background-position: 0 -64px;
}

Google Font API

Google recently released a fantastic resource for web designers allowing them to load new fonts from google for use in our web pages. We can even load different variants of fonts such as bold, italic and so on. While the library of fonts available from google is limited, there is still plenty to use. First include the dynamically written stylesheet by naming the fonts and variants you want, and then use the font names in your css as you normally would! For further info on Google Font API, read here.

In the <head>:
/* Single font load*/
<link rel="stylesheet" type="text/css" rel="nofollow" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" rel="nofollow" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Some special fonts -->
In your CSS:
body {
font-family: 'Droid Serif', serif; font-size: 48px;
}

Fixed Footer

Creating a footer that sticks to the bottom of the screen is surprisingly simple. We also added an IE6 hack for those who care.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
}
/* IE 6 */
* html #footer {
   position:absolute;
   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');
}

Flip an image

Flipping an image does not seem to an important feature. Sure it is not but it can be handy when having only one graphic for an “arrow”, with this snippet you can flip it around to point in different directions.

img.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}

Text/Image Rotation

You can literally rotate any HTML element by a certain degree with CSS, be it text or image or something else. For once here it is not only IE that has to be different but also Opera! A good article about this can be found here.

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/* opera */
-o-transform: rotate(30deg);

Rounded Corners/Borders

CSS3 has brought some really nice stuff and rounded corners is one of them. Rounded borders can be easily made in modern browsers (Firefox3, Opera, Safari and Chrome). IE does not support CSS3, but it is available in Microsoft IE9.

.round{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Example of Rounded Borders

#Example_A {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
}

#Example_B {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 50px 25px;
   border-bottom-right-radius: 50px 25px;
}

#Example_C {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 25px 50px;
   border-bottom-right-radius: 25px 50px;
}

#Example_D {
   height: 5em;
   width: 12em;
   -moz-border-radius: 1em 4em 1em 4em;
   border-radius: 1em 4em 1em 4em;
}

#Example_E {
   height: 65px;
   width:160px;
   -moz-border-radius: 25px 10px / 10px 25px;
   border-radius: 25px 10px / 10px 25px;
}

#Example_F {
   height: 70px;
   width: 70px;
   -moz-border-radius: 35px;
   border-radius: 35px;
}

Border Image

Another great CSS3 feature is the border-image property. It allows to create some new creative borders.

#border-image-style {
   border-width:15px;
   /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;
}

Style Overriding with !important

A lot of people still don’t know about !important in CSS. You should know it because it is a powerful and useful tool to have. Basically, any rule with !important at the end, will override any of the same rule that is applied to that element wherever it appears in the CSS file, or in-line HTML.

p{
   font-size:20px !important;
}

@Font face or beautiful typography in the web

@Font-face offers a great way to use non web safe fonts in your web projects. While this snippet works, we strongly recommend you to use the Font Squirrel Font Face Generator. Not all browsers supports all types of fonts:

• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.

Here is an example:

@font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
   url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
/* How to use it */
body {
   font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;
}

Center a website horizontally

Usually a website is centered horizontally. To achieve this you need the following CSS.

.wrapper {
   width:960px;
   margin:0 auto;
}

Min-height in IE

Microsoft IE’s does not have the capability of handling min-height. In essence, IE interprets height as min-height, so since IE wont implement the auto height, this snippet will fix all this for us (using !important).

.box {
   min-height:500px;
   height:auto !important;
   height:500px;
}

Image loading effect

This image loading effects mimics that of an ajax loader, where a loading circle is displayed while content is loading. This works well for larger, slower loading images, and is CSS only!

img {
   background: url(loader.gif) no−repeat 50% 50%;
}

Vertical Center

This snippet allows to vertically center the contents of a container without any extra markup by simply displaying it as a table cell. This allows you to use the vertical-align attribute.

.container {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

Create pull-quotes also known as a lift-out quote

A pull-quote is often used in news magazines which notice small quotes added within the article, not as full block-quotes, but as small quotes that sit within the article but to the side, sometimes adding things such as people’s opinions or quotes. The benefit of using pull-quotes is that it adds greatly to the user experience when reading an article.

.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;
}

Highlight Text Selection

Probably you are unaware that it is possible to change the color of the highlight text in your browser. It is so easy to use and also risky! Just be careful using this two selectors that you don’t ruin your site with it.

::selection {
   color: #000000;
   background-color: #FF0000;
}

::-moz-selection {
   color: #000000;
   background: #FF0000;
}

Print page breaks

This little css feature adds dramatically to the user experience when printing. For example, when printing an article, it may be useful for a user to have the comments on a new page from the article itself. By adding this class to the comments area, a page break will appear when printing. So the user can print the comments or not! By the way stop wasting paper. It can be used anywhere else on your site as well!

.page-break{
   page-break-before:always;
}

Linear Gradient

CSS3 allows to create linear gradients which is a nice feature as you do not need an image anymore for this. Keep in mind that some browsers do not support this feature.

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

Shadow

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+, Chrome and Firefox 3. Shadows can be applied in CSS3 to borders, images as well as affecting text as well.

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

Text Shadow

The box-shadow effect can be applied to text shadows using CSS3. This can add a nice effect to your headings.

.heading-shadow {
   text-shadow: 2px 2px 4px #666;
}

Optimize your Print Stylesheet

Remove the Navigation and/or Sidebar

#navigation, #sidebar {
    display: none;
}

Enlarge the Content Area

#content {
    width: 100%;
    margin: 0;
    float: none;
}

Reset all Text Colors and Background Colors

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}

Different Color for Links to distinguish it from Regular Text

a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;
}

Use a serif Font

Serif Fonts are better for print because they are less tiring on the eyes in conjunction with a good font Size.

body {
    font-family: Georgia, 'Times New Roman', serif;
}
p {
    font-size: 12pt;
}

Conditional Comments

!--[if IE]>
According to the conditional comment this is Internet Explorer





According to the conditional comment this is Internet Explorer 5.5

Note the special syntax:

gt: greater than
lte: less than or equal to

Pretty Ampersands

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

Sources

Based on articles:
10 Tips for Better Print Style Sheets by Pieter Beulque
25 Incredibly Useful CSS Snippets for Developers by Matthew Corner
25 Useful CSS/WordPress Snippets by Lee Gustin
An introduction to CSS3 by Alex

Further thoughts and discussion

For sure we have not been able to cover every useful CSS snippet, but we provided those that we think will be more beneficial for your designs.

What do you think about these snippets, and what do you think about others that are out there? If you know some useful css snippets, then we would be pleased that you write them in the comments section. Let’s discuss about Mastering CSS3!