Modernizr detecta la disponibilidad de las implementaciones nativas para tecnologías web de última generación
<script src="modernizr.js"></script>
<html class="no-js">
<html class="js flexbox no-touch rgba multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransitions fontface generatedcontent">
.textshadow h1 {}
.no-textshadow h1 {}
Selectivizr emula pseudo-clases y selectores de atributos CSS 3 en IE 6-8.
<!--[if (gte IE 6) & (lte IE 8)]>
<script type="text/javascript" src="selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="old.css" /></noscript>
<![endif]-->
.button { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
-webkit-
-moz-
-o-
-ms-
Necesitamos herramientas como caniuse.com para saber qué navegadores soportan diferentes propiedades.
Presentando al Web Inspector! (también podemos usar Firebug)
Para tener un buen CSS necesitamos un buen HTML.
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Forum&subset=latin,latin-ext" />
font-family: 'Forum', Helvetica, Arial, sans-serif;
/* Coded with love by Germán Martínez @germanmartinez*/ /* Reset by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Now My awesome styles ;)*/
ul li:nth-child(even) { background: #e7eef8; }
ul li:nth-child(odd) { background: #e7eef8; }
ul li:nth-child(-n+3) { background: #e7eef8; }
ul li:not(:nth-child(-n+3)) { background: #e7eef8; }
.first-line p::first-line { font-weight: bold; }
A este párrafo se le está aplicando un estilo con el selector ::first-line. Podemos ver que sólo la primera línea de texto recibe el estilo que declaramos en el CSS.
p::first-letter { font-weight: bold; font-size: 3em; line-height: .8; }
Este es un párrafo al cual se le está aplicando un estilo con el selector ::first-letter. Sólo la primera letra del párrafo recibe el estilo que declaramos en el CSS.
: denota una pseudo clase y :: un pseudo elemento
Más info sobre selectores en el W3C
Bordes redondeados sin imágenes…
piña IE6
border-radius: 20px;
background: rgba(114,157,214,1);
background: rgba(114,157,214,.8);
background: rgba(114,157,214,.6);
background: rgba(114,157,214,.4);
background: rgba(114,157,214,.2);
I ♥ text-shadow
text-shadow: none;
I ♥ text-shadow
text-shadow: 3px 3px 5px rgba(0,0,0,.5);
I ♥ text-shadow
text-shadow: 3px 3px 5px rgba(0,0,0,.5), 4px 5px 10px rgba(0,0,0,.2);
box-shadow: 2px 2px 8px rgba(0,0,0,.6);
transform: translate(90px, 30px);
transform: rotate(-15deg);
transform: scale(.5);
transition: transform ease-in-out .3s
transform: translate(90px, 30px);
transform: rotate(-15deg);
transform: scale(.5);
@media(max-width:800px) { /* Tus estilos aquí */ body { background: #aafcab; } }