El potencial de CSS3 es muy grande. Sólo con un poco de código y mucha imaginación tenemos la oportunidad de usar fuentes externas en nuestra web, hacer animaciones sencillas sin necesidad de un .gif, dar formato a títulos e imágenes…

1. ALGUNAS RAZONES POR
LAS QUE CSS3 LO PETA
I BETABEERS HUELVA - 25 DE OCTUBRE 2013
IGNACIO G. DÍAZ

2. SELECTORS

3. SELECTORS: SHOW ME THE CODE
Selectores de atributos:
ipttp=tx"
nu[ye"et]
ahe^"alo"
[rf=mit:]
ahe$"pp]
[rf=.h"
ee[t^"a"
lmat=vl]
ee[t$"a"
lmat=vl]
ee[t^"a"
lmat=vl]
Selectores de hermanos:
h +h
1
2
h ~h
1
2

4. SELECTORS: SHOW ME THE CODE
Pseudo elementos:
:is-ie
frtln
:is-etr
frtlte
:eoe
bfr
:fe
atr
:slcin
:eeto
Pseudo clases:
:t-hl()
nhcidn
:t-atcidn
nhls-hl()
:t-ftp()
nho-yen
:t-ato-yen
nhls-ftp()
:is-ftp
frto-ye
:atcid
ls-hl
:nycid
ol-hl
:nyo-ye
ol-ftp
:ot
ro
:mt
epy
:nbe
eald
:iald
dsbe
:hce
cekd
:o(eetr
ntslco)

5. SELECTORS: EJEMPLO
HTML
<pn<sa>
sa>/pn
CSS
sa {
pn
<pn<sa>
sa>/pn
dsly iln-lc;
ipa: niebok
<pnclr"zl>/pn
sa oo=au"<sa>
wdh
it:
6p;
0x
<pneepo/pn
sa>jml<sa>
hih:
egt
6p;
0x
bre:
odr
1xsld
p oi;
mri:
agn
5x
p;
}
sa:is-ftp {bcgon-oo:#0;}
pnfrto-ye
akrudclr 50
sa:t-ftp(){bcgon-oo:#5;}
pnnho-ye2
akrudclr 00
sa[oo=au" {bcgon-oo:#0;}
pnclr"zl]
akrudclr 05
sa:o(epy {
pnnt:mt)
dsly
ipa:
Ejemplo...
bok
lc;
hih:
egt
at;
uo
wdh
it:
at;
uo
}
sa:o(epy:fe {cnet '.' }
pnnt:mt)atr
otn: ..;
sa:o(epy:is-etr{
pnnt:mt)frtlte
tx-rnfr:uprae
ettasom pecs;
}

6. TEXTO

7. TEXTO: SHOW ME THE CODE
CARGANDO FUENTES EXTERNAS
Camino fácil: Google Fonts
Algo más
@otae{
fn​c
f
fn​ml:
otaiy
f
sc
r:
[otegt
fn​ih:
w
<la>
ais;
<une[ <une ..;
fet>, fet> .]
<eo;
ps>]
[ottl: <sio;
fn​ye
s
etl>]
}
fn:<aao <la>
ot tmñ> ais;
EFECTO BÁSICO DE TEXTO
clr <oo>
oo: clr;
tx​ao:<obah <obav <eefqe <oo>
ethdw smr-> smr-> dsnou> clr
s
[ <obah <obav <eefqe <oo>.]
, smr-> smr-> dsnou> clr..;

8. TEXTO: EJEMPLO
"MORDOR"
<m sc"mgsttl.n"
ig r=iae/iuopg>
Tráfico de red
CSS responsive
Actualización externa
SEO
WTF?

9. TEXTO: EJEMPLO
"TO INFINITY AND BEYOND!"
.fco1{
eetclr
oo:
#F;
FF
tx-hdw 0x 4x 3xrb(,,,.)
etsao: p
p
p ga00004,
0x 8x1p rb(,,,.)
p
p 3x ga00001,
0x1p 2p rb(,,,.)
p 8x 3x ga00001;
}
.fco2{
eetclr
oo:
#F;
FF
tx-hdw 0x0x6xrb(5,5,5,.)
etsao: p p p ga25252507;
Efecto 1
Efecto 2
Efecto 1
Efecto 1
}
.fco3{
eetclr
oo:
tasaet
rnprn;
Efecto 4
Efecto 3
tx-hdw rb(5,5,5,.)0x2x2x
etsao: ga25252505 p p p;
Efecto 4
Efecto 5
Efecto 5
}
.fco4{
eetclr
oo:
fn-egt
otwih:
rb(,,,.)
ga00006;
bl;
od
tx-hdw 2x2x3xrb(5,5,5,.)
etsao: p p p ga25252501;
}
.fco5{
eetpsto:
oiin
clr
oo:
}
rltv;
eaie
rb(,0 25 .)
ga0 , 5, 5;

10. BORDES, FONDOS Y COLOR

11. BORDES: SHOW ME THE CODE
bre-ais <>
odrrdu: r;
bre-mg:<r><t <r <d <l <-eet <-eet
odriae sc %> %> %> %> hrpa> vrpa>

12. FONDOS: SHOW ME THE CODE
bcgon:<oo><o><ie <eet <rgn <lp <tahet <mg>
akrud clr ps sz> rpa> oii> ci> atcmn> iae;
bcgon:uliae/od-.n)n-eetlf cne,uliae/od-.n)n-eetrgtcne;
akrud r(mgsfnolpg orpa et etr r(mgsfnorpg orpa ih etr
bcgon-rgn bre-o |pdigbx|cnetbx
akrudoii: odrbx
adn-o
otn-o;
bcgon-ie <aao |<ocnae |cvr|cnan
akrudsz: tmñ>
pretj>
oe
oti;

13. COLOR: SHOW ME THE CODE
<obe
nmr>
rd
e
#r>g>b>
<r<g<b
#F00
F00
#r<>b
<>g<>
#0
F0
rb<> <> <>
g(r, g, b)
rb25 0 0
g(5, , )
tasaet
rnprn
rb(r,<> <> <>
ga<> g, b, a)
rb(5,0 0 .)
ga25 , , 2
hl<o> <a> <r>
s(tn, st, bi)
hl30 10,2%
s(0, 0% 0)
hl(tn,<a> <r> <>
sa<o> st, bi, a)
hl(2,8% 5% 2%
sa30 0, 6, 0)

14. BORDES, FONDOS Y COLOR: EJEMPLO
<i cas"rpe"<i>/i>/i>
dv ls=wapr>dv<dv<dv
.rpe {
wapr
dsly
ipa:
iln-lc;
niebok
oefo:
vrlw
hde;
idn
hih:20x wdh 10x
egt 0p; it: 6p;
bre-ais
odrrdu:
bre:
odr
tasto:
rniin
5%
0;
6xsld
p oi;
wdh1;
it s
}
.rpe:oe {wdh 20x }
waprhvr
it: 5p;
.rpe>i {
waprdv
wdh 10;hih:10;
it: 0% egt 0%
bcgon:ul./mgsgtt.p)n-eetcne cne;
akrud r(.iae/aiojg orpa etr etr
bcgon-ie
akrudsz:
}
cvr
oe;

15. TRANSFORMACIONES

16. TRANSFORMACIONES: SHOW ME THE CODE
tasom rtt()
rnfr: oaeα;
tasom se(,φ;
rnfr: kwα )
tasom saeβ γ;
rnfr: cl(, )
tasom tasaeβ γ;
rnfr: rnlt(, )

17. TRANSFORMACIONES: EJEMPLO
HTML
<i cas"rpe"<i>igsc"mgsgtt.p"<dv<dv
dv ls=wapr>dv<m r=iae/aiojg>/i>/i>
CSS
.rpe {
wapr
psto:rltv;bcgon-oo:#0;
oiin eaie akrudclr 30
wdh
it:
10x
0p;
hih:
egt
20x
5p;
}
.rpe>i {
waprdv
psto:
oiin
aslt;
boue
oefo:
vrlw
hde;
idn
tp
o:
5% lf:
0; et
5%
0;
wdh 10x hih:10x
it: 6p; egt 6p;
bcgon-oo:
akrudclr
#3;
00
tasom tasae-0,-0)rtt(5e)
rnfr: rnlt(5% 5% oae4dg;
}
.rpe>i>m
waprdvig
{tasom rtt(4dg sae.) }
rnfr: oae-5e) cl(6;
.rpe>i>m:oe {tasom rtt(4dg sae1;}
waprdvighvr
rnfr: oae-5e) cl()

18. TRANSFORMACIONES: EJEMPLO
LISTA MAKISU JS
CSS3 LO PETA...
SOLO CON
ESTA L ISTA
DESPLEGABLE MEDIANTE
CSS 3D TRANSFORMS...
DE LOCOS.

19. ANIMACIÓN

20. ANIMACIÓN: SHOW ME THE CODE
Transiciones:
tasto:
rniin
<rpea><uain <uco><ea>
poidd drco> fnin dly;
taiinpoet:<rpea>
rnto-rpry poidd;
taiindrto:
rnto-uain
<uain;
drco>
taiintmn-ucin
rnto-iigfnto:
<uco>
fnin;
taiindly
rnto-ea:
<ea>
dly;
Animaciones:
aiainnm:
nmto-ae
<obekyrms;
nmr-efae>
aiaindrto:
nmto-uain
<uain;
drco>
aiainieaincut <otdr;
nmto-trto-on: cnao>
aiaindrcin
nmto-ieto:
aiaindly
nmto-ea:
<iecó>
drcin;
<ea>
dly;
aiaintmn-ucin <uco>
nmto-iigfnto: fnin;
@efae<obe {
kyrm nmr>
<ocnae {<rpea> <ao> ..}
pretj>
poidd: vlr; . ,
..
.
}

21. ANIMACIÓN: EJEMPLO
SPRITE
"ESTO E AZÍN DE TOA LA VIDA"
<m sc"mgssrt.i"
ig r=iae/piegf>
"UN POQUITO DE POR FAVOR"
< cas"e-oao"<i
i ls=pzvldr>/>
.e-oao {
pzvldr
wdh 14x
it: 0p;
aiain
nmto:
hih:8p;
egt 0x
aee 13 ses3)ifnt;
lto .s tp(3 niie
bcgon-mg:ul'mgssrt.n';
akrudiae r(iae/piepg)
bcgon-oiin
akrudpsto:
bcgon-ie
akrudsz:
0x0x
p p;
at 10;
uo 0%
}
@efae aee {
kyrms lto
0
%
{bcgon-oiin 0 0x }
akrudpsto: % p;
10 {bcgon-oiin 9%0x }
0%
akrudpsto: 7 p;
}

22. RECURSOS
Varios CSS3: css3generator.com
Parche de colores: lea.verou.me/rgba.php
Selectors: lea.verou.me/demos/nth.html
Prefijos: leaverou.github.io/prefixfree
Transiciones: cubic​
bezier.com
Gradientes: colorzilla.com/gradient​
editor, dabblet.com
Implantación CSS3 (y más): caniuse.com, css3test.com

23. ¿QUIERES MÁS?
Antonio Navajas
@ajnavajas
Lea Verou
Paul Irish
Remy Sharp
Arley McBlain
Chris Coyier
​LeaVerou
@
​paul_irish
@
​rem
@
@ArleyM
​chriscoyier
@
YoMizmo
OXIK STUDIO
​naxyomizmo
@
​OXIKstudio
@

24. ¿PREGUNTAS?