rgba
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);
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;
}
}