CodeSnippets: css code

Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

Older

62 total

CSS standard reset plus common classes

to css by beneberle on Jun 18, 2009

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

body {
	
}

/*ol, ul {list-style: none;}*/

caption, th, td {
  text-align: left;
  font-weight: normal;
}

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

strong{font-weight: bold;}
em{font-style: italic;}
.clear{clear: both;}

something:after{
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.left, #left{
	float: left;
	display: inline;
}

.right, #right{
	float: right;
	display: inline;
}

リセット

to css by tsucharoku on Mar 30, 2009

@charset "utf-8";

/*****リセット
************************************************************/

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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳＰゴシック","MS PGothic",Sans-Serif;
font-size:78%;
}
ol, ul {
list-style: none;
}

img{
vertical-align:bottom;
}

table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

/*****汎用
************************************************************/

.png{
display:block;
zoom:1;
}

.png a{
display:block;
position:relative;
}

.png img{
_filter: alpha(opacity='0');

}

.center{
text-align:center;
}

.right{
text-align:right;
}

.fl{
float:left;
margin:0 5px 5px 0;
}

.fr{
float:right;
margin:0 0 5px 5px;
}

img.fl{
margin:0 5px 5px 0;
}

img.fr{
margin:0 0 5px 5px;
}

.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{
zoom:1;
}

Tags css style

to css round corner by ilumin on Feb 16, 2009

css style

* {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}
.span-2 {
	width: 70px;
}
.span-6 {
	width: 230px;
}

.container {
	width: 310px;
	padding-top: 5px;
	border-bottom: solid 1px #CCC;
}
.container .column {
	padding-bottom: 5px;
	float:left;
	margin-right:10px;
}
.container .last {
	margin-right: 0;
}
.container .label strong {
	color:#CCCCCC;
	font-weight: normal;
	text-transform:uppercase;
}
.container ul.tags li {
	background: url(images/tag-bg.gif) no-repeat scroll right top;
	display:block;
	float: left;
	height:20px;
	padding:0;
	text-transform:lowercase;
	
	padding-right: 10px;
	margin-bottom: 2px;
	margin-right: 2px;
}
.container ul.tags li a {
	background: url(images/tag-bg.gif) no-repeat scroll left top;
	font-size:10px;
	line-height:20px;
	display: block;
	
	padding-left: 10px; 
}
ul.tags a {
	text-decoration: none;
	color: #FFFFFF;
}

HTML

  <div class="container" style="margin: 0 auto;">

    <div class="column span-2 label">
      <strong>Tags</strong>
    </div>

    <div class="column span-6 last tags">
    <ul class="tags mar0">
      <li><a href="#">sliders</a></li>
      <li><a href="#">clipping</a></li>
      <li><a href="#">drag to select</a></li>
      <li><a href="#">video players</a></li>
      <li><a href="#">video editor</a></li>
    </ul>
    </div>

  <div class="clear"></div>
  </div>

  <div class="container" style="margin: 0 auto;">

    <div class="column span-2 label">
      <strong>Tags</strong>
    </div>

    <div class="column span-6 last tags">
    <ul class="tags mar0">
      <li><a href="#">drag to select</a></li>
      <li><a href="#">sliders</a></li>
      <li><a href="#">clipping</a></li>
      <li><a href="#">video players</a></li>
      <li><a href="#">video editor</a></li>
    </ul>
    </div>

  <div class="clear"></div>
  </div>

popup window

to css by villar on Jan 28, 2009

// popup window used for ddb's i feel creative window

// <!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>

<SCRIPT LANGUAGE="JavaScript">
<!-- Idea by:  Nic Wolfe -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=500,left = 640,top = 275');");
}
// End -->
</script>


</head>

<body>

<A HREF="javascript:popUp('http://staging.ddb.com/ifeelcreative')">Open the Popup Window</A>

<!-- Script Size:  0.73 KB  -->


</body>
</html>

standard html element style listing

to css html by nickhammond on Jan 13, 2009

Used for styling all html elements on a site.

<h1>The H1 tag looks like this</h1>
<p>The paragraph after an H1 looks like this</p>

<h2>The H2 tag looks like this</h2>
<p>The paragraph after an H2 looks like this</p>

<h3>The H3 tag looks like this</h3>
<p>The paragraph after an H3 looks like this</p>

<h4>The H4 tag looks like this</h4>
<p>The paragraph after an H4 looks like this</p>

<h5>The H5 tag looks like this</h5>
<p>The paragraph after an H5 looks like this</p>

<ol>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ol>

<ul>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ul>

<blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. 
</blockquote>

<pre>
A pre looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</pre>

<code>
A code looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.

<span>The span element looks like this</span>
<a>The anchor element looks like this

A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.

Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.

CSS global clear with default left, right, strong, italics

to css by nickhammond on Jan 12, 2009

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

body {
	
}

/*ol, ul {list-style: none;}*/

caption, th, td {
  text-align: left;
  font-weight: normal;
}

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

strong{font-weight: bold;}
em{font-style: italic;}
.clear{clear: both;}

something:after{
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.left, #left{
	float: left;
	display: inline;
}

.right, #right{
	float: right;
	display: inline;
}

Vertically Align DIV with CSS

to css align by theycallmemax on Dec 06, 2008

using css to vertically center a div layer
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

CSS Global Reset w/ strong, em

to css by nickhammond on Nov 14, 2008

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

:focus {
    outline: 0;
}

body {
	
}

ol, ul {list-style: none;}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

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

strong{font-weight: bold;}
em{font-style: italic;}
.clear{clear: both;}

#content:after{
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.left, #left{
	float: left;
	display: inline;
}

.right, #right{
	float: right;
	display: inline;
}

CSS Clear

to css by nickhammond on Nov 14, 2008

#something:after{
 content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

Adding input:focus functionality to IE using prototype.js

to css javascript onfocus prototype.js by benjay on Nov 11, 2008

  Event.observe(window, 'load', function() {
    var fields = $$("input");
    for (var i = 0; i < fields.length; i++) {
      fields[i].onfocus = function() {this.className += ' focused';}
      fields[i].onblur = function() {this.className = this.className.replace('focused', '');}
    }
  });

in the css file:

input:focus,   /* works in FF without javascript */
input.focused  /* used by js */
   { background-color: #f7cd72; }

Older

62 total

CodeSnippets > css

Related Tags

Never been to CodeSnippets before?

On This Page:

CSS standard reset plus common classes

リセット

Tags css style

popup window

standard html element style listing

CSS global clear with default left, right, strong, italics

Vertically Align DIV with CSS

CSS Global Reset w/ strong, em

CSS Clear

Adding input:focus functionality to IE using prototype.js

On This Page:

Joyent

CodeSnippets > css

Related Tags

Never been to CodeSnippets before?

On This Page:

On This Page: