IMPORTANT!

Snipt is going open source. We've toyed with this idea for quite a while, and have finally decided it's the right way to move forward.

A few things:
  • The entire Snipt source code will be released on GitHub under the 3-clause BSD License on Friday, September 10th.
  • While we'd like to think we're perfect, we realize we're only human. By open sourcing the software that runs this website, certain bugs or security flaws may be discovered that could compromise the privacy of your snipts.
  • Only the Lion Burger team will be able to push commits to the Snipt.net site. Contributors should send a pull request to add new features or submit patches.
  • By using this site, you agree not to be too angry or take any legal action against Lion Burger should this whole thing go up in flames some day.
  • Follow us on Twitter for updates.
I agree, close this message
Sign up to create your own snipts, or login.

Latest 100 public snipts » css3 The latest public css3 snipts.

showing 1-20 of 25 snipts for css3
  • ∞ All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. 
    p {
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

    copy | embed

    0 comments - tagged in  posted by sido on Aug 26, 2010 at 5:48 a.m. EDT
  • ∞ Zurb CSS3 Awesome Buttons 
    .awesome, .awesome:visited {
	background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
	border: 0px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	padding: 5px 10px 6px;
	position: relative;
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.awesome:hover {
	background-color: #111;
	color: #fff;
}
.awesome:active {
	top: 1px;
}
.small.awesome, .small.awesome:visited {
	font-size: 11px;
}
.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.awesome, .large.awesome:visited {
	font-size: 14px;
	padding: 8px 14px 9px;
}
.green.awesome, .green.awesome:visited {
	background-color: #91bd09;
}
.green.awesome:hover {
	background-color: #749a02;
}
.blue.awesome, .blue.awesome:visited {
	background-color: #2daebf;
}
.blue.awesome:hover {
	background-color: #007d9a;
}
.red.awesome, .red.awesome:visited {
	background-color: #e33100;
}
.red.awesome:hover {
	background-color: #872300;
}
.magenta.awesome, .magenta.awesome:visited {
	background-color: #a9014b;
}
.magenta.awesome:hover {
	background-color: #630030;
}
.orange.awesome, .orange.awesome:visited {
	background-color: #ff5c00;
}
.orange.awesome:hover {
	background-color: #d45500;
}
.yellow.awesome, .yellow.awesome:visited {
	background-color: #ffb515;
}
.yellow.awesome:hover {
	background-color: #fc9200;
}

/*
Sizes: small, medium, large
Colors: Green, Blue, Red, Magenta, Orange, Yellow
Sample: <button class="large awesome blue" type="submit">Awesome Blue Button</button>
*/

    copy | embed

    0 comments - tagged in  posted by illegal3alien on Aug 04, 2010 at 12:44 p.m. EDT
  • ∞ CSS - CSS3 borde redondeado con border-radius cross browser 
    .round_top
{
	-webkit-border-top-left-radius: 45px;
	-moz-border-radius-topleft: 45px;
	border-top-left-radius: 45px;
	-webkit-border-top-right-radius: 45px;
	-moz-border-radius-topright: 45px;
	border-top-right-radius: 45px;
}


.round_bottom
{
	-webkit-border-bottom-left-radius: 45px;
	-moz-border-radius-bottomleft: 45px;
	border-bottom-left-radius: 45px;
	-webkit-border-bottom-right-radius: 45px;
	-moz-border-radius-bottomright: 45px;
	border-bottom-right-radius: 45px;
}

    copy | embed

    0 comments - tagged in  posted by ecwpa on Jul 30, 2010 at 10:32 a.m. EDT
  • ∞ CSS - CSS3 rgba color transparency 
    /* Color RGB y debajo la transparencia, mientras mas pequeño mas transparente */
div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

    copy | embed

    0 comments - tagged in  posted by ecwpa on Jul 30, 2010 at 10:23 a.m. EDT
  • ∞ viewport 
    <meta name="viewport" content="width=device-width" />

    copy | embed

    0 comments - tagged in  posted by comsharp on Jul 22, 2010 at 4:08 a.m. EDT
  • ∞ single column 
    .article #aside {
	float: none;
	width: auto;
}

    copy | embed

    0 comments - tagged in  posted by comsharp on Jul 22, 2010 at 4:03 a.m. EDT
  • ∞ shrink header part 
    body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}

    copy | embed

    0 comments - tagged in  posted by comsharp on Jul 22, 2010 at 3:57 a.m. EDT
  • ∞ media queries 
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

    copy | embed

    0 comments - tagged in  posted by comsharp on Jul 22, 2010 at 3:51 a.m. EDT
  • ∞ CSS 3 background transparency with rgba colors 
    background: rgba(255, 0, 0, 0.2);

/* red background with 20% of opacity, near to 0 is more opaque, near to 1 is more "colored" */

    copy | embed

    0 comments - tagged in  posted by ecwpa on Jul 13, 2010 at 9:39 a.m. EDT
  • ∞ kerning type css 
    /* kerning and readability improvement in Safari and Chrome */
html { text-rendering: optimizeLegibility; }

    copy | embed

    0 comments - tagged in  posted by d13t on Jun 29, 2010 at 6:02 a.m. EDT
  • ∞ smooth operator 
    /****SMOOTH OPERATOR********/
/* Make fonts appear smoother in Safari & Chrome */

html { -webkit-font-smoothing: antialiased; }

    copy | embed

    0 comments - tagged in  posted by d13t on Jun 29, 2010 at 6:00 a.m. EDT
  • ∞ CSS3 calc() 
    /*
* HTML5 article + sidebar layout, split up by a 1em margin
*/
article {
  width: 60%;
  margin-right: 1em;
}
aside {
  width: calc(40% - 1em);
}

    copy | embed

    0 comments - tagged in  posted by sido on Jun 22, 2010 at 9:40 a.m. EDT
  • ∞ Linear Gradient 
    -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(255,0,0))
)
-moz-linear-gradient(
    center top,
    rgb(255,255,255) 0%,
    rgb(255,0,0) 100%
)

    copy | embed

    0 comments - tagged in  posted by tonisuter on May 26, 2010 at 5:35 a.m. EDT
  • ∞ Rounded Corners 
    -webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

    copy | embed

    0 comments - tagged in  posted by tonisuter on May 26, 2010 at 5:31 a.m. EDT
  • ∞ Rounded Corners (Different Radiuses) 
    -webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

    copy | embed

    1 comment - tagged in  posted by tonisuter on May 26, 2010 at 5:28 a.m. EDT
  • ∞ CSS3 Gradient 
    /*
  start color: #ffffff
  end color: #000000
  top -> bottom
*/

background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
background: -moz-linear-gradient(center bottom, #000000, #ffffff 50%);
background: -gradient(linear, left top, left bottom, from(#ffffff), to(#000000));

    copy | embed

    0 comments - tagged in  posted by cbeier on Mar 31, 2010 at 3:25 a.m. EDT
  • ∞ CSS 3 structural pseudo-classes 
    CSS 3 structural pseudo-classes__--_-_-_-_-___-_-____

:nth-child______________________

ul li:nth-child(3) {
	color: red;
	}

ul li:nth-child(3n+4) {
	color: yellow;
	}

ul li:nth-child(3n) {
	color: yellow;
	}

ul li:nth-child(-n+4) {
	color: green;
	}

ul li:nth-child(-n+4) {
	color: green;
	}

ul li:nth-last-child(odd) {
	color: grey;
	}

ul li:nth-last-child(even) {
	color: grey;
	}

:nth-of-type_____________________

p:nth-of-type(even) {
	color: blue;
	}

:nth-last-of-type__________________

ul li:nth-last-of-type(-n+4) {
	color: green;
	}

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
	float: left;
	}

:last-child_______________________

.post > p:last-child {
	margin-bottom: 0;
	}

:first-of-type and :last-of-type________

.post > p:first-of-type:first-line {
	font-variant: small-caps;
	}

:only-child_______________________

div.news > p {
	font-size: 1.2em;
	}

div.news > p:only-child {
	font-size: 1.5em;
	}

:only-of-type_____________________

.post > img {
	float: left;
	}

.post > img:only-of-type {
	float: none;
	margin: auto;
	}

:empty__________________________

#sidebar .box:empty {
	display: none;
	}

The negation pseudo-class::::::::::::::::::

input:not([type="submit"]) {
	width: 200px;
	padding: 3px;
	border: 1px solid #000000;
	}

.post p:not(.date) {
	font-size: 13px;
	}

    copy | embed

    0 comments - tagged in  posted by paz on Dec 26, 2009 at 1:41 p.m. EST
  • ∞ Issue with vertical-align. temporarily using propietary browser elements. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#wrapper {
	display:inline;
	vertical-align:middle;
	width:100%;
	height:100%;
}

#container {
	margin:auto;
	height:465px;
	width:960px;
	-moz-box-shadow:0 1px 10px #777;
	-moz-border-radius:10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="container">
</div>
</div>
</body>
</html>

    copy | embed

    0 comments - tagged in  posted by frusdelion on Dec 23, 2009 at 9:06 a.m. EST
  • ∞ Rounded Corners 
    /* All corners */
-moz-border-radius
-webkit-border-radius

/* Topleft */
-moz-border-radius-topleft
-webkit-border-top-left-radius

/* Topright */
-moz-border-radius-topright
-webkit-border-top-right-radius

/* Bottomleft */
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius

/* Bottomright */
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius

    copy | embed

    1 comment - tagged in  posted by Sirupsen on Sep 24, 2009 at 3:10 p.m. EDT
  • ∞ border radius sides 
    border-radius-top-right: 10px;
border-radius-bottom-right: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;

    copy | embed

    0 comments - tagged in  posted by nick on Sep 09, 2009 at 2:22 p.m. EDT
Sign up to create your own snipts, or login.