Scroll to Top

To Top

Follow @Splashnology

18

Jun
2011

On 18, Jun 2011 | 11 Comments | In Coding, HTML5/CSS3

Useful HTML5/CSS3 Snippets

Useful HTML5/CSS3 Snippets

by AndrewG

Modern web designers can’t imagine their lives without HTML5 and CSS3 languages that we use for websites creation.Everyone knows that at this point there is a cross-browser problem, but despite that web developers actively use various frameworks and snippets to put all their ideas for the future sites into reality. Below, we’ve gathered some HTML5\CSS3 snippets that might be useful for both beginners and professionals who work in this sphere.

Box Shadow CSS3 by Maux

.box_shadow{
    -moz-box-shadow:0 2px 4px rgba(0,0,0,.5); /* Firefox 3.5 */
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,.5); /* Chrome 1-9, Safari 3-4 */
    box-shadow:0 2px 4px rgba(0,0,0,.5); /* Firefox 4+, Chrome 10+, IE 9+, Opera 10.5+, Safari 5+ */
}

CSS3 Animation by reynish

.textButton {
	border: 1px solid #000;
	border-radius: 20px;
	position: relative;
	top: 0px;
	-webkit-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
	-moz-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
	-o-box-shadow: 0 5px 0px #000, 0 5px 10px #000;
	box-shadow: 0 5px 0px #000, 0 5px 10px #000;
	/* Properties you want to animate */
	-webkit-transition-property: top, -webkit-box-shadow;
	/* Duration of animation */
	/* You can define different durations for each property. Seperate with commas */
	-webkit-transition-duration: .1s;
	/* Animation style */
	/* You can define different timings for each property. Seperate with commas */
	-webkit-transition-timing: ease-in-out;
	-moz-transition-property: top, -moz-box-shadow;
	-moz-transition-duration: .1s;
	-moz-transition-timing: ease-in-out;
	-o-transition-property: top, -o-box-shadow;
	-o-transition-duration: .1s;
	-o-transition-timing: ease-in-out;
	transition-property: top, box-shadow;
	transition-duration: .1s;
	transition-timing: ease-in-out;
	}

.textButton:hover {
	top: 2px;
	-webkit-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
	-moz-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
	-o-box-shadow: 0 2px 0px #000, 0 2px 5px #000;
	box-shadow: 0 2px 0px #000, 0 2px 5px #000;
	-webkit-transition-property: top, -webkit-box-shadow;
	-webkit-transition-duration: .1s;
	-webkit-transition-timing: ease-in-out;
	-moz-transition-property: top, -moz-box-shadow;
	-moz-transition-duration: .1s;
	-moz-transition-timing: ease-in-out;
	-o-transition-property: top, -o-box-shadow;
	-o-transition-duration: .1s;
	-o-transition-timing: ease-in-out;
	transition-property: top, box-shadow;
	transition-duration: .1s;
	transition-timing: ease-in-out;
	}

CSS3 Rounded Corners by Stefan Hagen

div.test        -moz-border-radius: 10px 10px;
                border-radius: 10px 10px;

CSS3 Gradients All Browsers by sethetter

.gradient-bg {
   background-color: #1a82f7;
   background-image: url(images/fallback-gradient.png);
   background-image: -moz-linear-gradient(#2F2727, #1a82f7);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
   background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
   background-image: -o-linear-gradient(#2F2727, #1a82f7);
}

Rotate elements with CSS3

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS drop-shadows without images

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }
.drop-shadow {
   -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
   border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

@font-face by Paul Irish

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Zurb.com Awesome Button

.awesome {
	background: #A9014B;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.awesome:hover {
	background: #C9025C;
}

/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}

/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

Cross Browser (even ie6) rounded corners and opacity by André Martins

#content {
	background: rgba(0, 0, 0, 0.25);
	-pie-background: rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	behavior: url(http://www/pie/PIE.htc);
}

Cool box shadow by codepunk

.something{
box-shadow: 0 2px 3px #666666;
}

CSS3 multiple backgrounds by Moonsheeld

.mydiv {
    background: url(bkg1.png) repeat top left,
                url(bkg2.png) repeat top left,
                /* ... */
                ;
    /* Fallback for browsers who don't support multiple backgrounds;
       the background color won't be displayed unless it's declared separately. */
    background-color: #000;
}

Rounded corners by kenjosan

.box{
    width:400px;
    height:400px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:1px solid #e3e3e3;
}

CSS3 3D Text

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

CSS3 gradient fill (FF, webkit) by adambundy

.gradient-fill {
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
}

CSS3 Shadow by focal55

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);

CSS3 transitions

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

Inner Shadow with CSS3 by Jeremy Michel

div{
/* What makes the shadow go inside is the keyword inset at the end */
  -moz-box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
  box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
}

Box-shadow with inset variation by adambundy

.box-shadow {
-moz-box-shadow: 0px 1px 8px #000; /* Firefox */
-webkit-box-shadow: 0px 1px 8px #000; /* Safari, Chrome */
box-shadow: 0px 1px 8px #000; /* CSS3 */
}

.box-shadow-inset {
-moz-box-shadow: inset 0px 1px 8px #000; /* Firefox */
-webkit-box-shadow: inset 0px 1px 8px #000; /* Safari, Chrome */
box-shadow: inset 0px 1px 8px #000; /* CSS3 */
}

CSS3 Rounded Corners and Drop Shadow by chendrix

-moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px;
       border: thin solid #999;
       -moz-box-shadow: 5px 5px 5px #999;
       -webkit-box-shadow: 5px 5px 5px #999;
       box-shadow: 5px 5px 5px #999;

Webkit border radius fix

-webkit-background-clip: padding-box;

CSS3 Skewed Shadows

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Tuts</title>

	<style>
	body {
		width: 500px;
		margin: 50px auto;
	}

	.box {
		position: relative;
		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
		box-shadow: 1px 2px 4px rgba(0,0,0,.5);

		/* Kokakify */
		padding: 10px;
		background: white;
	}

	.box img {
		max-width: 100%;
		border: 1px inset #8a4419;
	}

	.box:after {
		content: '';
		-webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		-moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
		position: absolute;
		width: 50%;
		height: 40px;
		bottom: 20px;
		right: 90px;
		z-index: -1;
		-webkit-transform: skew(-40deg);
		-moz-transform: skew(-40deg);
		transform: skew(-40deg);		

	}
	</style>

</head>

<body>

<div class="box">
	<img src="tuts.jpg" alt="Tuts" />
</div>

</body>
</html>

CSS3 rotate

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);

Use CSS transform for Interesting Hover Effects

a {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
}

XBrowser Border-radius (CSS3PIE) by devilsansclue

.roundbox {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
behavior: url(/PIE.htc);
}

All encompassing single link h2 call to actions (w/ sexy hover transition) by devolute

CSS

#callToActions {
	float: left;
	padding: 0 10px 0 0;
	width: 146px;
}
	#callToActions h2 {
		background: #FD57A9;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		font-size: 1em;
		font-weight: normal;
		margin: 0 0 5px 0;
		min-height: 130px;
		padding: 0;
		text-transform: none;

	}
		#callToActions a {
			color: #fff;
			display: block;
			padding: 10px;
		}
			#callToActions h2 a:hover {
				background: rgba(0, 0, 0, 0.2);
				transition: all .3s linear;
				-webkit-transition: all .3s linear;
				-moz-transition: all .3s linear;
			}
			#callToActions h2 img {
				height:65px;
				margin: -10px 0 0 -10px;
				width: 146px;
			}
			#callToActions h2 strong {
				display: block;
				font-size: 1.4em;
				margin: 8px 0 4px 0;
				text-transform: uppercase;
			}
			#callToActions h2 span {
				text-transform:  none;
			}
		#callToActions #callYour {
			background:#B8D439;
		}
		#callToActions #callTalking {
			background:#6CBCD0;
		}

CSS (ie6)
#callToActions h2 {
	padding-top: 58px; /* this needs to be the same height as the image */
	position: relative;
}
#callToActions h2 img {
	margin: 0 !important;
	top: 0;
	left: -0px;
	position: absolute;
}

HTML

	<div id="callToActions">
		<h2 id="callWhere">
			<a href="">
				<img src="/images/b-where-do-we-work.jpg" width="156" height="65" alt="" />
				<strong>Where do we work</strong>
				blah blah blah. <span class="readMore">more&hellip;</span>
			</a>
		</h2>
		<h2 id="callYour">
			<a href="">
				<img src="/images/b-your-project.jpg" width="156" height="65" alt="" />
				<strong>Your Project</strong>
				It started with ink, but it hasn't stopped there. <span class="readMore">more&hellip;</span>
			</a>
		</h2>
	</div>

Flipping Card

<!DOCTYPE HTML>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
      <title>Tuts</title>
      <style> 

         body, html { height: 100%; width: 100%; } 

         body {
            display: -moz-box;
            display: -webkit-box;
            display: box;

            -moz-box-orient: horizontaerl; /* the default, so not really necessary here */
            -webkit-box-orient: horizontal;
            box-orient: horizontal;

            -moz-box-pack: center;
            -moz-box-align: center;

            -webkit-box-pack: center;
            -webkit-box-align: center;

            box-pack: center;
            box-align: center;
         }

         .box {
            background: #e3e3e3;
            border: 1px dashed #666;
            margin: auto;
            width: 400px;
            height: 200px;
            cursor: pointer;
            position: relative;

            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
         }

         .box::after {
            content: '';
            position: absolute;
            width: 70%;
            height: 10px;
            bottom: 0;
            left: 15%;
            z-index: -1;

            -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
            -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
            box-shadow: 0 9px 20px rgba(0,0,0,.4);
         }

         .box > div {
            position: absolute;
            width: 100%; height: 100%;
            top: 0; left: 0;
            background: #e3e3e3;
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;

            font: 45px/200px bold helvetica, arial, sans-serif;
            text-align: center;
         }

         /* Make sure we see the front side first */
         .box > div:first-child {
            position: relative;
            z-index: 2;
         }

         .box:hover {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
         }

         .box:hover > div:first-child {
            opacity: 0;
         }

         .box:hover div:last-child {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
         }

      </style> 

   </head> 

   <body> 

      <div class="box">
         <div>Hello</div>
         <div> World </div>
      </div> 

   </body>
</html>

Fancy CSS Button – Green by Nathan Long

a.btn {
	background: #008752 url(images/alert-overlay.png) repeat-x; /*white gradient png*/
	color: #fff;
	display: inline-block;
	text-decoration: none;
	padding: 5px 9px; /* Space around the button */
	border-bottom: 1px solid rgba(0,0,0,0.25); /* adds a slightly darker line on bottom */
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition: color .6s linear;
	-webkit-transition: background-color .6s linear;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

a:hover.btn {
	background: #fff url(images/alert-overlay.png) repeat-x;
	color: #008752;
	text-decoration: none;
	padding: 5px 9px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition:color .2s linear;
	-webkit-transition:background-color .2s linear;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

CSS3 Columns

div {
 -moz-column-count: 2;
 -moz-column-gap: 40px;
 -webkit-column-count: 2;
 -webkit-column-gap: 40px;
}

Multiple backgrounds with CSS3

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

SASS Page-curl effect by ddubyah17

@mixin page-curl($shadow-color:rgba(0,0,0,0.3), $skew:15deg, $rotate:5deg, $hoff:8px, $voff:12px, $blur:10px){
	position: relative;
	 @include box-shadow($shadow-color, 0px, 0px,3px);

	&:after {
		z-index: -1;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		right: 10px;
		bottom: 10px;
		@include box-shadow($shadow-color, $hoff, $voff, $blur);
		@include transform(1, $rotate, 0, 0, $skew);
	}        

	&:before {
		z-index: -2;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		left: 10px;
		bottom: 10px;
		@include box-shadow($shadow-color, -$hoff, $voff, $blur);
		@include transform(1, -$rotate, 0, 0, -$skew);
	}
}

Ellipsis overflow by griffpup

 .choice {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

Vertical Align Center

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

Inserting content with CSS3 using :before and :after pseudo-elements

<html>
<head>
    <title>Next & After</title>
    <style>
        p.note:before { content: "[Before]" }
        p.note:after { content: "[After]" }
    </style>
</head>
    <body id="next" onload="">
        <p class="note">Content inside paragraph.</p>
    </body>
</html>

Fluid Horizontal Navigation Using HTML5 and CSS3 Flexbox

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fluid Horizontal Navigation Using HTML5 and CSS3 Flexbox</title>
<meta charset="utf-8">
<style type="text/css">
.container{
display:block;
float:left;
min-width:500px;
resize:both;
overflow:auto;
height:300px;
border:1px solid black;
background:rgba(0,0,0,.1);
}

nav{
   display: -webkit-box;
   display: -moz-box;
   display: box;
   -webkit-box-orient:horizontal;
   -moz-box-orient:horizontal;
   box-orient:horizontal;
   border:2px solid #333;
   -webkit-border-radius:6px;
   -moz-border-radius:6px;
   -o-border-radius:6px;
   border-radius:6px;
   width: 95%;
margin:20px auto;
background:white;
}

nav a{
    display:block;
    color:#333;
    padding:10px;
   -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
    text-align:center;
    text-decoration:none;
    -webkit-transition:all .4s linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
transition:all .4s linear;
}

a:hover {
  background-color: rgba(0,0,0,.2);
}

a:active {
  background-color: #333;
  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
    color:white;
}

p{
    margin:20px;
}
</style>
</head>
<body>

<div class="container">
 <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Rock &amp; Roll</a>
        <a href="#">Waffles</a>
    </nav>

<p>Resize the Window</p>
</div>
</body>
</html>

3D flip photo effect using css3 transitions in Webkit

<html>
<head>
    <style>

        .wrapper{
                width:500px;
                height:400px;
                padding:50px;
                -webkit-perspective: 1000;
        }

        .wrapper:hover .photo{
            -webkit-transform: rotateY(180deg);

        }

        .photo{
            -webkit-transition: all 1.0s linear;
            -webkit-transform-style: preserve-3d;
            -webkit-box-shadow: -5px -5px 9px #aaa;
        }

        .photo img{
            width:500px;

        }

        .face{
                position: absolute;
                width: 500px;
                height: 330px;
                -webkit-backface-visibility: hidden;

        }

        .back{
            display:block;
            background-color:gray;
            -webkit-transform: rotateY(180deg);
            -webkit-box-sizing: border-box;
            text-align:center;
            color:white;
            -webkit-box-shadow: -5px -5px 9px #aaa;
            font-family:Helvetica;
            padding:20px;
        }
    </style>
</head>
<body> 

    <div class="wrapper">
        <div class="photo face">

            <a href="#" >
                <img src="http://i.imgur.com/p9LdV.jpg">
            </a>

            <div class="back face">
                London Underground Stairs.
            </div>

        </div> 

    </div>

</body>
</html>

How to keep your footer at the bottom of the page

<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>

    <link rel="stylesheet" type="text/css" href="style.css" />    

    <!--[if lt IE 7]>
        <style type="text/css">
            #wrapper { height:100%; }
        </style>
    <![endif]-->

</head>
<style>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ffffe0;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    text-align:center;
    color: #444;
    font-family: arial;
    font-weight:bold;
    background:#b0e0e6;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}
</style>
<body>

    <section id="wrapper">

        <header id="header">
        </header><!-- #header -->

        <section id="content">
            <button id="add">Add More...</button>
            <button id="rm">Remove...</button>
            <ul id="text"></ul>
        </section><!-- #content -->

        <footer id="footer">
         <p>Yay! This is a Sticky Footer</p>
        </footer><!-- #footer -->

    </section><!-- #wrapper -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
    $(function(){
        $("#add").click(function(){
            $("#text").append("<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>");
        });
        $("#rm").click(function(){
            if ($("#text li:first-child")){
                $("#text li:first-child").remove();
            }
        });
    });
    </script>
</body>

</html>

CSS3 Tooltips by j4kp07

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}

White glowing text in css3 by miguelb

#content h2 em {
    color: #FFF;
    text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
}

CSS3 background-size by frederick

body {
  background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

@media only all and (max-width: 1024px) and (max-height: 768px) {
  body {
    -moz-background-size: 1024px 768px;
    background-size: 1024px 768px;
  }
}

CSS3 Glass Button by Keliah

a.button {

    font-family: 'PT Sans', arial, serif;
    color:#ffffff;
    text-align:center;
    font-size:24px;
    font-weight:bold;

    padding:10px;

    text-shadow: /* Simulating Text Stroke */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

    border: 1px solid rgba(0,0,0,0.5);
    border-bottom: 3px solid rgba(0,0,0,0.5);

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    background: rgba(0,0,0,0.25);

    box-shadow:
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */

    -o-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -webkit-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -moz-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

}

Pure CSS3 image lightbox with fade in/out transitions

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>lbox2</title>

<style type="text/css" media="screen">
    @-webkit-keyframes supersize {
      0% { -webkit-transform:scale(.9); }
      100% { -webkit-transform:scale(1); }
    }
    body {background:#f5efe3;}
    img {vertical-align:middle;}
    ul {
      list-style:none;
      padding:0;
    }
    nav {
      position:absolute;
      width:100%;
      left:0;
      top:50%;
      margin-top:-100px;
      text-align:center;
    }
    nav li {
      display:inline;
      margin:0 5px;
    }
    nav img {
      border-radius:4px;
      -moz-border-radius:4px;
      -webkit-box-shadow:0 1px 0 #fff;
      -moz-box-shadow:0 1px 0 #fff;
      box-shadow:0 1px 0 #fff;
      -webkit-transition:opacity .2s linear;
      -moz-transition:opacity .2s linear;
      -o-transition:opacity .2s linear;
      transition:opacity .2s linear;
    }
    nav a:hover img {opacity:.75;}
    nav a:active img {margin-top:1px;}
    li[id] {
      overflow:hidden;
      position:absolute;
      width:0;
      height:0;
      left:0;
      top:0;
      opacity:0;
      background:rgba(0,0,0,.8);
      -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      transition:opacity 1.2s cubic-bezier(0,0,0,1);
    }
    li[id] a:before {
      position:absolute;
      top:-26px;
      left:-26px;
      opacity:0;
    }
    li[id] a:hover:before {opacity:1;}
    li[id]:target {
      width:100%;
      height:100%;
      opacity:1;
    }
    li[id]:target a {
      position:absolute;
      top:50%;
      left:50%;
      margin:-220px 0 0 -380px;
      border:15px solid #fff;
      -webkit-box-shadow:0 1px 8px #000;
      -moz-box-shadow:0 1px 8px #000;
      box-shadow:0 1px 8px #000;
      -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);
    }
</style>

</head>
<body>

<nav>
    <ul>
        <li><a href="#pic1"><img src="http://farm6.static.flickr.com/5142/5784657719_5928798618_m.jpg"></a></li>
        <li><a href="#pic2"><img src="http://farm4.static.flickr.com/3626/5779076533_5f0d0102ea_m.jpg"></a></li>
    </ul>
</nav>
    <ul>
        <li id="pic1"><a href="#home"><img src="http://farm6.static.flickr.com/5142/5784657719_5928798618_z.jpg" alt=""></a></li>
        <li id="pic2"><a href="#home"><img src="http://farm4.static.flickr.com/3626/5779076533_5f0d0102ea_z.jpg" alt=""></a></li>

      </ul>

</body>
</html>

CSS3 image gallery

<!DOCTYPE html>
<html>
  <head>
  <title>CSS3 Gallery</title>
  <style>
body{
  text-align:center;
  margin-top:150px;
  background:url(http://farm6.static.flickr.com/5217/5389227673_fd005bf50a_b.jpg) no-repeat bottom center;
  background-attachment:fixed;
  background-size:100%
}

#n{
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#000;
  cursor:default;
  opacity:.25;

  -o-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
}

#n:target{
  opacity:0
}

img{
  margin:150px 5px 0;
  position:relative;
  padding:10px;
  background:#fff;

  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;

  -moz-box-shadow:0 0 7px rgba(100, 100, 100, 1);
  -webkit-box-shadow:0 0 7px rgba(100, 100, 100, 1);
  box-shadow:0 0 7px rgba(100, 100, 100, 1);

  -o-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
}

img:target{
  width:400px;
  height:300px;
  margin-top:0;
  top:75px;

  -moz-box-shadow:0 0 15px rgba(100, 100, 100, 1);
  -webkit-box-shadow:0 0 15px rgba(100, 100, 100, 1);
  box-shadow:0 0 15px rgba(100, 100, 100, 1);
}

img:after{
  content:attr(title);
  display:block;
  padding-top:5px;
  color:#222;
  font:11px "Trebuchet MS", FreeSans, Arial, sans-serif;
  height:0;
  overflow:hidden;

  -o-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
}

img:target:after{
  height:auto;
}
  </style>
  </head>
  <body>
    <a href="#n" id="n">
      <a href="#img1"><img id="img1" src="http://farm5.static.flickr.com/4103/5213166214_d6b136586c_b.jpg" width="200" height="150" title="Some caption"></a>
      <a href="#img2"><img id="img2" src="http://farm6.static.flickr.com/5281/5216852563_eca0af1b0d_b.jpg" width="200" height="150" title="Another title"></a>
    </a>
   </body>
</html>

UI Form Fields

<!DOCTYPE html>
<html>
  <head>
    <style>
      input { display: block; margin: 20px;
    </style>
  </head>
  <body style="font: 75% Lucida Grande, Trebuchet MS">
    <strong>Dedicated UI:</strong>
    <input  type='range' min='0' max='50' value='1' />
    <input results="10" type='search' />
    <input type='text' placeholder='Search inside' /> 

    <strong>Input Validation:</strong>
    <style> :invalid { background-color: red; } </style>
    <input type='color' value="bear" />
    <input type='number' value="abc" />
    <input type='email' value="some@email.com" />
    <input type='tel' value="1234" />
  </body>
</html>

Eric Meyer CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

CSS3 transition text glow on mouse over

<!DOCTYPE html>
<html>
<header>
<style>
.text-glow{
    font-size:4em;
    color: #FFFFFF;
    font-family:Arial;

}

.text-glow:hover,
.text-glow:focus
.text-glow:active{
    -webkit-stroke-width: 5.3px;
    -webkit-stroke-color: #FFFFFF;
    -webkit-fill-color: #FFFFFF;
    text-shadow: 1px 0px 20px yellow;
    -webkit-transition: width 0.3s; /*Safari & Chrome*/
    transition: width 0.3s;
    -moz-transition: width 0.3s; /* Firefox 4 */
    -o-transition: width 0.3s; /* Opera */

}

.text-glow a{

    -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
    transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in; /* Firefox 4 */
    -o-transition: all 0.3s ease-in; /* Opera */

    text-decoration:none;
    color:white;
}

body{
    background-color: #000000;
}
</style>
</header>

<body>
    <div class="text-glow">
        <a href="#">
            This Text Glows In Mouse Over
        </a>
    </div>
</body>
</html>

Better IE compatibility by Charles Dagley

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Rubber ball follows mouse cursor by Roberto Brevé

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas-Animaci&oacute;n</title>

    <script type="text/javascript">
      var x=0; //coordenada x del objeto
      var incx=10; //incremento x
      var y=0;  //coordenada y del objeto
      var incy=5; //incremental de y
      var mouseX=0;
      var mouseY=0;
      var delay=10;
      var timer=10;

      function init(){
          var canvas = document.getElementById('tutorial');

          //loop calls dibuja each 20 ms
          setInterval(dibuja,20);  

          canvas.addEventListener('mousemove', ev_mousemove, false);

      }

      function ev_mousemove (ev) {
            mouseX = ev.layerX;
            mouseY = ev.layerY;

      }

      function dibuja(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          timer+=1;
          ctx.fillStyle ="rgba(200,30,10,1)";
          ctx.strokeStyle="#000";

          delay=20-(mouseY/100);

          accelX=mouseX-x;
          accelY=mouseY-y;

          x+=(accelX)/delay;
          y+=(accelY)/delay;

          x+=Math.sin(timer)*accelX/5;
          y+=Math.sin(timer)*accelY/5;
          //limpia el canvas
          ctx.clearRect(0,0,400,400); 

          //dibuja linea
          ctx.beginPath();
          ctx.moveTo(200,400);
          ctx.lineTo(x,y);
          ctx.stroke();

          //dibuja el circulo
          ctx.beginPath();
          ctx.arc(x,y,50,0,Math.PI*2,true);
          ctx.fill(); 

         // ctx.translate((200-mouseX)/100,0);

        }
      }

    </script>

    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="init();">
    <canvas id="tutorial" width="400" height="400"></canvas>
  </body>
</html>

Paint on Canvas by Roberto Brevé

<html>
  <head>
    <title>Draw</title>

    <script type="text/javascript">
      var context;

      function init(){
          var canvas = document.getElementById('tutorial');
          canvas.addEventListener('mousemove', ev_mousemove, false);
          canvas.addEventListener('mousedown', ev_mousemove, false);
          canvas.addEventListener('mouseup', ev_mousemove, false);

          context = canvas.getContext('2d');
          context.fillStyle ="rgba(200,30,10,0.2)";
       }

      // The mousemove event handler.
        var started = false;
        var precionando=false;

        function ev_mousemove (ev) {
          var x, y;

            x = ev.layerX;
            y = ev.layerY;

            if (ev.type=="mousemove"){
                if (precionando){
                    context.beginPath();
                    context.arc(x,y,10,0,Math.PI*2,true);
                    context.fill();
                }
            }

            if (ev.type=="mouseup"){
                precionando=false;
            }

            if( ev.type=="mousedown"){
                context.beginPath();
                context.arc(x,y,10,0,Math.PI*2,true);
                context.fill();
                precionando=true;
            }

        }

    </script>

    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="init();">
    <canvas id="tutorial" width="400" height="400"></canvas>
  </body>
</html>

Damage.js – Retro JRPG by t_furu

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.js"></script>
<script type="text/javascript" charset="utf-8" src="http://tf-web.jp/back/blog/damage_js/jquery.timer.js"></script>
<script type="text/javascript" charset="utf-8" src="http://tf-web.jp/back/blog/damage_js/jquery.easing.1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="http://tf-web.jp/back/blog/damage_js/damage.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
    $("#btnTest").click(function(){
        $("#disp_damage_container").html("");
        var d = new Damage("#disp_damage_container",9999);
        d.show();
    });
});
</script>
<style type="text/css">
<!--
/* ダメージ */
#disp_damage {
    display:block;
    height:60px;
    line-height:90px;
    vertical-align:bottom;
    text-align:center;
}

/* ダメージ */
.damage_digit_container{
    display:block;
    width:100px;
    height:60px;
    margin:0 auto;
    font-size: x-large;
    text-shadow: 1px 1px 3px #000;
}

/* ダメージ数値 */
.damage_digit{
    position:relative;
}
-->
</style>

<span id='disp_damage'>
<span id="disp_damage_container" class="damage_digit_container">0000</span>
</span>

<div><input type='button' id='btnTest' value='Attack'></div>

Blur and unblur text effect by Roberto Brevé

<!DOCTYPE html>
<html>
<head>
<style>

.hover_blur{
    font-size:35px;
    font-family: helvetica;
    transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    color:black;
}

.hover_blur:hover{
    color:transparent;
    text-shadow: black 0 0 100px;

}

.hover_unblur{
    font-size:35px;
    font-family: helvetica;
    transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;

    text-shadow: black 0 0 30px;

    color:transparent;
}

.hover_unblur:hover{
    color:black;
    text-shadow: black 0 0 0px;

}

body{
    background-color: #FFF;
    color:gray;
    font-family:Arial;

}
</style>
</head>

<body>
<h1 class="hover_blur">Hover To Blur</h1>
<h1 class="hover_unblur">Hover To Unblur</h1> 

</body>
</html>

Blank Html5 Template by Charles Dagley

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 template</title>
    <meta charset="utf-8" />

    <script type="text/javascript">
        document.createElement('header');
        document.createElement('menu');
        document.createElement('content');
        document.createElement('footer');
    </script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        header, menu, content, footer {
            display: block;
        }

        menu ul {
            list-style-type: none;
        }

        menu ul li {
            float: left;
            padding: 5px 20px;
        }

        content, footer {
            clear: both;
        }
    </style>
</head>
<body>
    <header>
        <h1>A Blank HTML5 template</h1>
        <menu>
            <ul>
                <li>
                    <a href="http://html5snippets.com" title="snippets">HTML5 snippets</a>
                </li>
                <li>
                    <a href="http://charlesdagley.cz.cc/" title="Portfolio">Dagley Designs</a>
                </li>
                <li>
                    <a href="link" title="link">link</a>
                </li>
                <li>
                    <a href="link" title="link">link</a>
                </li>
                <li>
                    <a href="link" title="link">link</a>
                </li>
            </ul>
        </menu>
    </header>

    <content>
        <h2>This is our content area</h2>
        <p>This is just a free html5 blank template</p>
    </content>

    <footer>
        As found on html5snippets.com---Follow @charlesdagley
    </footer>
</body>
</html>

Ribbon with 3D depth effect

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

    <style>

    .triangles{
        width:320px;
        height:-0px;
        background-color:transparent;
        border: 20px solid #gray;
        border-right-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        margin-left:-20px;
        z-index:-30;
        position: relative;

    }

    .shadow{
        box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

    }

    .front{
        background-color:silver;
        width:360px;
        height:40px;
        z-index:100;
        margin-left:-20px;
        position: relative;

    }

    .content{
        background-color:#e9e9e9;
        width:320px;
        height:200px;
        z-index:90;
        padding-top:20px;
        clear: both;
        margin:auto;

    }

    </style>
</head>

<body>

    <div id="container">
        <div class="content shadow">
            <div class="front shadow"></div>
            <div class="triangles"></div>
        </div>
    </div>

</body>
</html>

Basic Structure HTML5

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/style.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style_print.css?v=1" rel="stylesheet" type="text/css" media="print" />
  <script type="text/javascript" src="scripts/swfobject.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/funcionalidades.js"></script>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="scripts/innershiv.min.js"></script>
  <![endif]-->
  <!--[if IE 6]><script type="text/javascript" src="scripts/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
  <!--[if lt IE 8]><script src="scripts/font.js"></script><![endif]-->
</head>
<body>
<!-- open limits -->
<div id="limits">

<!-- open top -->
  <header id="top">

  </header>
<!-- close top -->

<!-- open content -->
  <div id="content">

  </div>
<!-- close content -->

<!-- open footer -->
  <footer id="footer">

  </footer>
<!-- close footer -->

</div>
<!-- close limits -->
</body>
</html>

Cross Browser CSS Page Curl Shadow

.page-curl {
position: relative;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

.page-curl:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

.page-curl:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

Blurry Text

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

Tags | coding, CSS3, Html5, snippet

AndrewG

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies.
Find profile of the author on IdentyMe

http://identyme.com IdentyMe

So cool and useful snippets, will use it. Thanks.
http://www.ennovation.dk ennovation

Really good collection of snippets. Could be cool with a CSS3Please version of them :)
http://www.pogotte.fr Pogotte

Very useful, Thanks
http://twitter.com/JeremyGAUTIER Jérémy

Tanks !
http://www.facebook.com/people/Artur-Swoboda/100000416915744 Artur Swoboda

Very useful. What about with the support of IE8?
http://splashnology.com Andrew Glushakov

Browser support for HTML5/CSS3
http://www.findmebyip.com/litmus
http://html5readiness.com/
http://caniuse.com/
http://www.the-triumph.com Web Design Company Mumbai

Nice collection.
http://www.androidgamesfree.com/ Herou

cool and useful,thanks
Anonymous

Thanks for all the great snippets. Some of them I can’t imagine ever needing but a lot of them I could use every day.
Abc

ooh this is super awesome ….you Rock ..
Bruce Lawson

Would be even better if some editorial control had been exercised. some snippets have only -webkit-transform and -moz-transform, others (rightly) have -o-transform too, for the 170million Opera users. None seem to have -ms-transform for IE. There are some examples of old syntaxes (old moz border radius, old gradients format).