Usando CSS 3 hoy

Germán Martínez (@germanmartinez)

Recursos

Modernizr & Selectivzr

Modernizr.com

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.com

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]-->

Vendor Specific Prefixes

.button	{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
-webkit-
Safari, Chrome
-moz-
Firefox
-o-
Opera
-ms-
Internet Explorer

Necesitamos herramientas como caniuse.com para saber qué navegadores soportan diferentes propiedades.

Web Inspector

Presentando al Web Inspector! (también podemos usar Firebug)

Markup Validation Service

Para tener un buen CSS necesitamos un buen HTML.

Web Fonts

Google Web Fonts

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Forum&subset=latin,latin-ext" />
font-family: 'Forum', Helvetica, Arial, sans-serif;

CSS Reset

Eric Meyer CSS reset

/* 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 ;)*/

Selectores

:nth-child

ul li:nth-child(even)	{
background: #e7eef8;
}
ul li:nth-child(odd)	{
background: #e7eef8;
}
ul li:nth-child(-n+3)	{
background: #e7eef8;
}

:not

ul li:not(:nth-child(-n+3))	{
background: #e7eef8;
}

::first-line

.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.

::first-letter

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

border-radius

Bordes redondeados sin imágenes…
piña IE6

border-radius: 20px;

rgba

  1. background: rgba(114,157,214,1);
  2. background: rgba(114,157,214,.8);
  3. background: rgba(114,157,214,.6);
  4. background: rgba(114,157,214,.4);
  5. background: rgba(114,157,214,.2);
HTML5
rgba \o/

Shadows

text-shadow

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

box-shadow: 2px 2px 8px rgba(0,0,0,.6);

Transforms

HTML5
rgba \o/
HTML5
rgba \o/
transform: translate(90px, 30px);
HTML5
rgba \o/
HTML5
rgba \o/
transform: rotate(-15deg);
HTML5
rgba \o/
HTML5
rgba \o/
transform: scale(.5);

Transitions

transition: transform ease-in-out .3s
HTML5
rgba \o/
transform: translate(90px, 30px);
HTML5
rgba \o/
transform: rotate(-15deg);
HTML5
rgba \o/
transform: scale(.5);

Media Queries

@media(max-width:800px)	{
/* Tus estilos aquí */
body	{
background: #aafcab;
}
}