Algunas razones por las que CSS3 lo peta
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Algunas razones por las que CSS3 lo peta

  • 442 views
Uploaded on

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

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…

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
442
On Slideshare
426
From Embeds
16
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 16

http://betabeers.com 14
https://betabeers.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?