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 » css The latest public css snipts.

showing 1-20 of 269 snipts for css
  • ∞ CSS Clearfix 
    .clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

    copy | embed

    0 comments - tagged in  posted by skotmxpx on Aug 31, 2010 at 2:47 p.m. EDT
  • ∞ better tip calculator demo 
    <!-- This is a demo for Firefox. There is no error trapping. Forgive me.-->
<html>
<head>
	<title>Tip Calculator</title>
	<script type="text/javascript">
		function addit() {
			var bill = document.getElementById('bill');
			var tip_pct = document.getElementById('pct');
			var tip = bill.value * ( tip_pct.value / 100 );
			// bill.value is actually a string and has to be made into an integer
			var bill_number = bill.value * 1;
			// now we need a total
			var total = bill_number + tip;
			// Pie charts show proportion, so let's make them for bill and tip as proportion of the total cost (in dollars) after multiplying and rounding to give Google what it needs.
			var prop_bill = Math.round((bill_number/total)*100);
			// Since I rounded, I should just do a difference for tip proportion. If I did Math.round again, there is a good likelihood of getting 101 or 99 instead of the 100 wee need for a pie chart.
			var prop_tip = 100 - prop_bill;
            // I changed the labels to have the propotion values as dollars.
			document.getElementById('payoff').innerHTML='<img src="http://chart.apis.google.com/chart?chs=500x200&chd=t:' + prop_bill + ',' + prop_tip + '&cht=p&chl=' + prop_bill + '% spent on the food|' + prop_tip + '% spent on the tip" />';
			// Charts can be tricky to read, so let me dump this out as a sentence
			document.getElementById('explainer').innerHTML='You are spending a total of <span class="dollars">$' + total + '</span>. Of that, <span class="dollars">$' + bill.value + '</span> is for food and <span class="dollars">$' + tip + '</span> is for the tip.';
		};
	</script>
	<style>
	    span.dollars{color:#0021a5;}
	</style>
</head>
<body>
	How much is the bill? <input type="text" id="bill"> <br />
	How large is the tip? <input type="text" id="pct"> <br />
	<input type="submit" onClick='addit()'>
    <hr/>
    <!-- I'll make these empty but the elements still exist so I an get them -->
    <p id="explainer"></p>
    <div id="payoff"></div>
</body>

    copy | embed

    0 comments - tagged in  posted by gotoplanb on Aug 26, 2010 at 12:21 p.m. EDT
  • ∞ 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
  • ∞ Demo for journprog frontend session 
    <html>
<head>
	<title>Tip Calculator</title>
	<script type="text/javascript">
		function addit() {
			var bill = document.getElementById('bill');
			var tip_pct = document.getElementById('pct');
			var tip = bill.value * ( tip_pct.value / 100 );
			// alert("The tip amount is: " + tip);
			document.getElementById('payoff').innerHTML='<img src="http://chart.apis.google.com/chart?chs=500x200&chd=t:' + bill.value + ',' + tip + '&cht=p&chl=Food|Tip" />';
		};
	</script>
</head>
<body>
	
	Bill: <input type="text" id="bill"> <br />
	Tip Pct: <input type="text" id="pct"> <br />
	<input type="submit" onClick='addit()'>
    <hr/>
    <div id="payoff">
        I need to make the percents valid.
    </div>
</body>

    copy | embed

    0 comments - tagged in  posted by gotoplanb on Aug 26, 2010 at 12:24 a.m. EDT
  • ∞ Crear Columnas CSS 
    <style type="text/css">

/*Definimos una clase para <ul> */

  ul.columnas {
  Float: left;
  width: 960px; /*Este ancho será el total que ocupen muestras columnas */
  List-style-type: none; /*Eliminamos las viñetas */
  }

/*Definimos las propiedades para <li> a partir de las otorgadas a <ul>*/

  ul.columnas li{
  Display:inline; /*Se declara que las propiedades serán otorgadas a cada linea*/
  Float: left;
  Width:8%;} /*Al definir el ancho definimos también el número de columnas, siendo 25% para 4 columnas, 33% para 3, 50% para 2 y asi para la cantidad de columnas que deseemos */

</style>

<ul class="columnas">
<li><img src="images/menu/logo.png" alt="Especialistas Web"></li>
<li><img src="images/menu/inicio.jpg" alt="Portafolio" /></li>
<li><img src="images/menu/portafolio.jpg" alt="Portafolio" /></li>
<li><img src="images/menu/servicios.jpg" alt="Servicios" /></li>
<li><img src="images/menu/nosotros.jpg" alt="Nosotros" /></li>
<li><img src="images/menu/alianzas.jpg" alt="Alianzas" /></li>
<li><img src="images/menu/contacto.png" alt="Contacto" /></li>
</ul>

    copy | embed

    0 comments - tagged in  posted by rmondragon on Aug 25, 2010 at 6:11 p.m. EDT
  • ∞ CSS transforms 
    Transforms
http://slides.html5rocks.com/#slide43

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 11:00 a.m. EDT
  • ∞ Background 
    Multiple backgrounds
div {
  background: url(src/zippy-plus.png) 10px center no-repeat, 
              url(src/gray_lines_bg.png) 10px center repeat-x;
}
     
Background sizing: http://slides.html5rocks.com/#slide41

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:57 a.m. EDT
  • ∞ css3 shadow 
    http://slides.html5rocks.com/#slide39

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:55 a.m. EDT
  • ∞ opacity 
    Opacity
  color: rgba(255, 0, 0, 1.00); 
  background: rgba(0, 0, 255, 1.00);

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:53 a.m. EDT
  • ∞ text-stroke 
    div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 1.25px; 
}

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:52 a.m. EDT
  • ∞ css3 webkit columns 
    -webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:51 a.m. EDT
  • ∞ text wrapping 
    div {
  text-overflow: ellipsis;
}

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 25, 2010 at 10:50 a.m. EDT
  • ∞ toucan css reset 
    /*
Title: Toucan CSS reset
Author: RZ
URI: http://borderleft.com/labs/
Version: 0.1.7
*/

/* General
---------------------------------------- */
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;
}

p, blockquote, q, pre, address, hr, code, samp,
dl, ol, ul, form, table, fieldset, menu {
	margin-bottom: 1.5em;
}

/* Structure
---------------------------------------- */
html {
	font-size: 100%;
}

body {
	font-family: georgia, palatino, "palatino linotype", times, "times new roman", serif;
	/* font-family: arial, helvetica, sans-serif; */
	font-size: .875em;
	line-height: 1.5;
}

/* Text
---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	font-size: 3em;
	line-height: 1.1;
	margin-bottom: .238em;
}

h2 {
	font-size: 2em;
	line-height: 1.15;
	margin-bottom: .357em;
}

h3 {
	font-size: 1.5em;
	line-height: 1.2;
	margin-bottom: .476em;
}

h4, h5, h6 {
	margin-bottom: .571em;
}

h4 {
	font-size: 1.25em;
	line-height: 1.25;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 1em;
}

em, i {
	font-style: italic;
}

strong, b {
	font-weight: bold;
}

blockquote, q, cite {
	font-style: italic;
}

blockquote, q {
	quotes: none;
}

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

code, kbd, pre, samp, tt {
	font-family: "andale mono", consolas, monaco, "lucida console", "courier new", courier, monospace;
	line-height: 1.3;
}

pre {
	/* word-wrap: break-word; */
	white-space: pre-wrap;
}

abbr, acronym, dfn {
	border-bottom: 1px dotted;
	cursor: help;
	font-variant: normal;
	font-style: normal;
}

var {
	font-style: normal;
}

center {
	text-align: center;
}

/* Hypertext
---------------------------------------- */
/*
a:link {
}

a:visited {
}

a:hover {
}

a:active {
}
*/

a:focus {
	outline: 1px dotted;
}

/* Image
---------------------------------------- */
img {
	border: 0;
}

/* List
---------------------------------------- */

ul {
	list-style: disc outside none;
}

ol {
	list-style: decimal outside none;
}

li {
	margin-left: 2em;
}

li ul, li ol {
	margin-bottom: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 1em;
}

/* Presentation
---------------------------------------- */
hr {
	border: 0;
	border-bottom: 1px solid;
}

big {
	font-size: 1.25em;
}

small, sub, sup {
	font-size: .85em;
}

sub, sup {
	line-height: 1;
}

sub {
	vertical-align: bottom;
}

sup {
	vertical-align: top;
}

del, s, strike {
	text-decoration: line-through;
}

ins {
	text-decoration: none;
	border-bottom: 1px dotted;
}

bdo {
	border-bottom: 1px dotted;
}

u {
	text-decoration: underline;
}

/* Form
---------------------------------------- */
fieldset {
	padding: 1em;
}

legend {
	font-weight: bold;
	padding: 0 .25em;
}

input, textarea, select, button {
	font-family: inherit;
	font-size: 1em;
}

input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit], 
button[type=button], button[type=reset], button[type=submit] {
	cursor: pointer;
	line-height: 1;
}

input[type=text], input[type=password], textarea {
	padding: 1px;
}

textarea {
	text-align: left;
	line-height: 1.25;
}

/* Table
---------------------------------------- */
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	line-height: 1.3;
}

caption, th, td {
	text-align: left;
	vertical-align: top;
}

th, td {
	padding: .5em 1em;
	border: 1px solid;
}

caption {
	padding-bottom: 1em;
}

th {
	font-weight: bold;
}

    copy | embed

    0 comments - tagged in  posted by ninque on Aug 23, 2010 at 8:52 a.m. EDT
  • ∞ Very Simple 3 Column CSS Layout 
    <!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>
<title>Super Simple CSS / XHTML Three Boxes Side By Side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
/* CSS Document */
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
</style>

</head>

<body>
<div style="text-align:center;">
<div style="width:600px;">
			<div id="leftcol"><!-- begin leftcol -->
				<p>This is the left column</p>
			</div><!-- end leftcol -->
				
			<div id="rightcol"><!-- begin rightcol -->
				<p>This is the right column</p>
			</div><!-- end righttcol -->
			
			<div id="centercol"><!-- begin centercol -->
				<p>This is the center column </p>
			</div><!-- end centercol -->
</div>
</div>
			
</body>
</html>

    copy | embed

    0 comments - tagged in  posted by deric on Aug 18, 2010 at 1:48 p.m. EDT
  • ∞ css 3 column layout 
    <!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>
<title>CSS Three Column Liquid Layout by Mani Sheriar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- Please feel free to use this code in any way that you would like.  If you want to be cool, you can credit me - Mani Sheriar | www.ManiSheriar.com | Design@ManiSheriar.com.  Enjoy! -->


<style type="text/css">
/* CSS Document */

body {
	background:#9343B9;
	text-align:center;
	margin:20px;
	padding:0;
	font:normal 0.8em/1.2em verdana,aria,sans-serif;
	color:#666;
	}
a {
	color:#FFF;
	text-decoration:none;
	border-bottom:1px dotted;
	}
a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#wrapper1 {
	position:relative;
	text-align:left;
	width:100%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	background:url("../images/leftcolor_bg.gif") repeat-y top left;
	}
#header {
	background:#BB62AB;
	padding:10px;
	margin:0;
	text-align:center;
	color:#FFF;
	}
#header h1 {
	font-size:200%;
	}
#header a:hover {
	color:#7A2875;
	}
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
#centercol a {
	color:#666;
	}
#centercol a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#footer {
	position:relative;
	top:1px;
	background:#7A2875;
	width:100%;
	clear:both;
	margin:0;
	padding:1% 0;
	text-align:center;
	color:#CCC;
	}
</style>



</head>

<body>

<div id="header"><!-- begin header -->
	<h1>This is the header</h1>
</div><!-- end header -->

<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
	
	<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
	
		<div id="maincol"><!-- begin main content area -->
				
			<div id="leftcol"><!-- begin leftcol -->
				<p>This is the left column</p>
			</div><!-- end leftcol -->
				
			<div id="rightcol"><!-- begin rightcol -->
				<p>This is the right column</p>
			</div><!-- end righttcol -->
			
			<div id="centercol"><!-- begin centercol -->
				<p>This is the center column </p>
			</div><!-- end centercol -->
				
		</div><!-- end main content area -->
				
		<div id="footer"><!-- begin footer -->
			<p>This is the footer</p>
		</div><!-- end footer -->
	
	</div><!-- end wrapper1 -->

</div><!-- end wrapper2 -->
	
</body>
</html>

    copy | embed

    0 comments - tagged in  posted by deric on Aug 18, 2010 at 1:37 p.m. EDT
  • ∞ Remove extra spacing from li {display:inline-block} 
    ul {font-size:0}
li {display:inline-block; font-size:1em;}

    copy | embed

    0 comments - tagged in  posted by nell on Aug 16, 2010 at 8:25 p.m. EDT
  • ∞ Cross Browser CSS Gradients with Sass 
    @mixin gradient($first, $second) {
  background: $second;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
  background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
  background: -moz-linear-gradient(top,  $first,  $second);
}

.gradient {
  @include gradient(black, white);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 6:00 p.m. EDT
  • ∞ Cross Browser CSS Rotation with and without Sass 
    # First, you have to add this to Sass:

# http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
# http://www.seancolombo.com/2010/07/28/how-to-make-and-use-a-custom-sass-function/
# http://sass-lang.com/docs/yardoc/Sass/Script/Literal.html
# math_sass.rb
require 'sass'

module Sass::Script::Functions
  def sin(angle)
    Sass::Script::Parser.parse(Math.sin(angle.value).to_s, 0, 0)
  end
  def cos(angle)
    Sass::Script::Parser.parse(Math.cos(angle.value).to_s, 0, 0)
  end
end

# Include that with sass by running this (where 'stylesheets' is the directory containing your stylesheets):

sass --watch stylesheets:stylesheets -r math_sass.rb

Then you can use the sine and cosine functions no problem.

// css
.rotate {
   -moz-transform: rotate(-30deg);
     -o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
             zoom: 1;
}

// sass
@mixin rotate($degrees) {
   -moz-transform: rotate($degrees);  
     -o-transform: rotate($degrees);  
-webkit-transform: rotate($degrees);
           filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
             zoom: 1;
}

.rotate {
  @include rotate(-30deg);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:58 p.m. EDT
  • ∞ Cross Browser CSS Box Shadow with Sass 
    @mixin shadow($color: #333333) {
  -moz-box-shadow: 0px 1px 2px $color;
  -webkit-box-shadow: 0px 1px 2px $color;
  box-shadow: 0px 1px 2px $color;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color');
}

.shadow {
  @include shadow(#111111);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:16 p.m. EDT
  • ∞ Cross Browser CSS Opacity (with and without Sass) 
    // css
.opacity {
  opacity: .80;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=$value)";
  -khtml-opacity: .80;
  -moz-opacity: .80;
}

// sass
@mixin opacity($value) {
  opacity: #{"." + $value};
  filter: alpha(opacity=$value);
  -ms-filter: "alpha(opacity=$value)";
  -khtml-opacity: #{"." + $value};
  -moz-opacity: #{"." + $value};
}

.opacity {
  @include opacity(80);
}

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:12 p.m. EDT
Sign up to create your own snipts, or login.