Public
snipts » css3 
showing 1-9 of 9 snipts for css3
-
∞ 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; }
-
∞ 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>
-
∞ 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
-
∞ 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;
-
∞ SELECTORS CSS1, CSS2, CSS2.01 & CSS3
universal selector, tags, ids, classes, attribute selectors, selector grouping, pseudo classes, pseudo elements, dynamic pseudo elements * E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E[attribute^=value] E[attribute$=value] E[attribute*=value] E ~ F :root :last-child :only-child :nth-child() :nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked CSS3 descendant selector E F {...} child selector E>F{...} adjacent sibling selector E+F{...} general sibling selector E~F{...} Multiple background images font @font install ______CSS3 Selectors_______ :nth-child(an+b) tbody:nth-child(2n) {...} /* even rows */ tbody:nth-child(2n+1) {...} /* odd rows */ tr:nth-of-type(2n) {...} tr:nth-of-type(2n+1) {...} tr:nth-child(0n+5) {...} tr:nth-of-type(0n+5) {...} td:first-child + td{ background-color: #306; } td:first-child + td +td +td{ background-color: #306; } td:last-child {...}
-
∞ CSS3 Spec
CSS3 Specs multi-column layout Border Radius Multiple Backgrounds Border Image @font-face Box Shadow Text Shadow RGBa Gradients Animations / Transitions
-
∞ Border Radius
-webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-
∞ Font Face
@font-face { font-family: Untitled; src: url('http://'); }
-
∞ css3 change selection highlight color
<p>These are the words I want to hide. <span>And these are the words I want to show</span></p> p::selection { background:#000;color:#000; } p::-moz-selection { background:#000;color:#000; } p span::selection { background:#fff;color:#000; } p span::-moz-selection { background:#fff;color:#000; }
Programming PHP