Design/Dev Code Snippet, code snippets, css, css code snippets, css3, css3 code snippets Robert Nash October 2, 2013

10 Quick CSS3 Code Snippets for Developers

One of the most important languages web developers use is CSS3. If you're a experience website developer or a newbie, CSS3 Code Snippets are very handy to look through. While HTML provides us with the structure it can sometimes be unpredictable on many browsers. When styling your websites, CSS3, can help you create more interesting styling your websites.

In today's collection we've compiled a list of 10 Quick CSS3 Code Snippets for Developers, whether you're a experience website developer or a newbie starting out, these quick CSS Code Snippets are worth checking out.

Table of Contents

Blurry Text

This css code snippet makes the text color transparent but adds a shadow:

.blur{  
color: transparent;  
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);  
}

Image Preloader

Sometimes it's better to pre-load your images when a certain element is needed.This is a great little snippet making the images already loaded so there's no delay or flickering.

body:before {

    content: url(images/hover3.gif);

    display:none;

}

Gradient Text

You can achieve Gradient Text now with the help of webkit. This is the cleanest way to accomplish it as the text remains editable and selectable web text. No more Photoshop.

h1 {
  font-size: 20px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Image Opacity

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Multiple Backgrounds

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

#Multiple-Backgrounds {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Text Shadow

You can eliminate the need for Photoshop when wanting a drop shadow. This handy little CSS3 snippet is great to use:

text-shadow: 2px 2px 2px #000;

Link Pseudo-Classes

Links can be displayed in different ways in a CSS-supporting browser:

a:link {color: blue;} /* unvisited link */
a:visited {color: purple;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: yellow;} /* selected link */

Rounded Corners

Thanks for CSS3 you can now add rounded corners.

#roundedcorners {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

Using @font-face

Font face is a great way to use non web safe fonts on your website projects. While this @font-face works, Fonts Squirrel, is also a time saving tool.

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

Remove textarea scrollbar in IE

Internet Explorer can be annoying by adding scroll bars to text areas even when it's now overflowing. You can fix this by adding in this quick css code snippet.

textarea {

overflow:hidden;

}