advertisement

Algunas razones por las que CSS3 lo peta

46 %
54 %
advertisement
Information about Algunas razones por las que CSS3 lo peta
Technology

Published on March 7, 2014

Author: betabeers

Source: slideshare.net

Description

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…
advertisement

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

SELECTORS

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

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)

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

TEXTO

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

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

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;

BORDES, FONDOS Y COLOR

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

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;

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)

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;

TRANSFORMACIONES

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

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()

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

ANIMACIÓN

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; . , .. . }

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

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

¿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 @

¿PREGUNTAS?

#f00 presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Algunas de las razones por las cuales usted debe ...

Algunas de las razones por las cuales usted debe matricular ... las que CSS3 lo peta" por ... Algunas Razones Por Las que Chuck ...
Read more

ALGUNAS RAZONES POR LAS CUALES DEBEMOS DE CONOCER AL ESPIRIT

ALGUNAS RAZONES POR LAS CUALES ... ALGUNAS RAZONES POR LAS QUE CRISTO VINO AL ... "Algunas razones por las que CSS3 lo peta" por ...
Read more

Razones por las que los alumnos llegan tarde a sus ...

Razones por las que los ... Algunas razones por las que CSS3 lo peta ... Clases cerebralmente amigables para que sus alumnos recuerden lo que ...
Read more

5 razones por las que se debe enseñar - Education

1. 5 RAZONES POR LAS QUE DE DEBE ... Algunas razones por las que CSS3 lo peta ... Lo Que Usted Debe Saber Acerca De Las Instalaciones ...
Read more

Razones Para Ser Vegano | Derechos de los animales | PETA ...

... tú puedes cambiar la manera en que los animales son ... tomar decisiones informadas sobre lo que pones en tu ... Aquí hay algunas razones para ser ...
Read more

Son el CSS3 y HTML5 el nuevo Flash?

El HTML5 y el CSS3 funcionan solo en los navegadores modernos y son la ... por lo que incluso una ... PETA nos descubre lo que hay debajo ...
Read more

Personas por el Trato Ético de los Animales - Wikipedia ...

La organización ha sido criticada por algunas de sus campañas y por el ... por los derechos de los animales, lo que ... PETA cree que los ...
Read more

Hoja de estilos en cascada - Wikipedia, la enciclopedia libre

Algunas de las funcionalidades que ofrece son: ... Los trabajos en el CSS3, ... lo que las hace susceptibles de abuso por parte de los diseñadores en ...
Read more

Seis razones por las que los hombres no quieren tener sexo

Aquí tienes algunas razones por las que los hombres dicen que no, ... La ropa interior que más les pone a los hombres] Lo que puedes hacer: ...
Read more