Category Archives: CSS Notes

http://www.sencha.com/store/animator/

Responsive images right now  

background-image Gradient Generator

WebKit Image Wipes w/ Masks CSS Masks Smashing Mag CSS Mask Apps

line-height:1em; letter-spacing:1em; //normal, length, inherit font-weight:normal; //lighter, bold, bolder text-transform:uppercase; //capitalize, none, uppercase, lowercase, inherit font-style:normal; //italic, oblique list-style-position:inside; //outside, inherit @font-face { font-family: ‘fontName’; src: url(‘fontName-webfont.eot’); src: url(‘fontName-webfont’) format(‘eot’), url(‘fontName-webfont’) format(‘woff’), url(‘fontName-webfont.ttf’) format(‘truetype’), url(‘fontName-webfont.svg#webfontfvFLBU0N’) format(‘svg’); font-weight: normal; font-style: normal; }  

.triangle { position:absolute; height:0; width:0; left:920px; top:180px; border-style:solid; border-width:20px; border-color:transparent transparent transparent #666; (play with color order within ‘transparent transparent transparent #666′ to rotate triangle) z-index:1; (play with z-index order with surrounding geometry to hide half of triangle) }

#nav { float:right;position:relative;width:702px;display:block; margin:20px 0 0 0; padding:0; bottom:0; right:0;z-index:1002; } #nav ul { display:inline; margin:0; padding:0; } #nav li {float:left;list-style-type:none;} #nav a {float:left;margin-left:10px;padding-bottom:20px;color:#fff;font-family:Arial, Helvetica, sans-serif; font-variant:small-caps; font-size:13px; letter-spacing:1px;} #nav ul li {float:left;display:inline; padding-bottom:20px; margin:0 15px 0 0;} #nav ul li.selected a { color:#000;z-index:1002; } #nav ul li a { color:#FFF; text-decoration:none;z-index:1003;} #nav ul li [...]

  Transitions: (syntax) • transition-property: • transition-duration: • transition-timing-function: (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier) • transition-delay: #id { background-color: #CCC; color: #FF0; -webkit-transition:all .8s ease-in; -moz-transition:all .8s ease-in; -o-transition:all .8s ease-in; transition:all .8s ease-in; } #id { background-color: #CCC; -webkit-transition: background .8s ease, color .8s linear; -moz-transition: background .8s ease, color .8s linear; -o-transition: [...]

  Attribute Selectors: (syntax) img[alt] {border: 3px solid #0c0;} (hooks to strings w/ “alt” a[href$=".pdf"] {background-image: url(images/icon_pdf.png);} (tells browser to find every href attribute that ends with “.pdf”) IE Fix in header: <!–Attribute Selector IE6 Fix–> <!–[if IE 6]> <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js”></script> <![endif]–> (IE Fix makes weird spacing & wrapping; we code the following so the [...]