Tecnicas avanzadas con CSS3

CSS3 técnicas avanzadasJavier Usobiaga SeedRocketMarta Armada 16 marzo 2011

@htmlboy@martuishere

vENTAJAS

velocidad

velocidad ﬂexibilidad

velocidad ﬂexibilidadescalabilidad

velocidad ﬂexibilidadescalabilidad ligereza

prOBLEMAS

experimental

experimental redundancia

experimental redundancia abuso

experimental redundancia abuso soporte

dibujo de Phil Henderson @LLcoolPhilSOLUCIONES

progressive enhancement de menos a más Cumplo mi función :-)

progressive enhancement de menos a más Cumplo mi Y función :-) f

graceful degradation de más a menosMe diseñaron así de guay

graceful degradation de más a menosMe diseñaron Tengo una así de guay imagen de fondo

hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a@4lexcat? :-)

hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a Paso de la@4lexcat? :-) imagen de fondo

regressive enhancementtapando agujeros con Javascript

http://modernizr.com

http://yepnopejs.com

¿soporte?

http://caniuse.com

COLOR &TRANSPARENCIAS

rgba.box{ background-color: rgba (211, 85, 41, .7);}

h1 a{ color: rgba(179,45,71,.75); } #navigation li a{ background: rgba(170,178,192,.75); } #content{ background-color: rgba(14,32,59,.5); }http://24ways.org

hslHUE: grado de la rueda de color. 0º es rojo.SATURATION: porcentaje de saturado (100%) a gris (0%)LUMINOSITY: porcentaje de negro (0%) a blanco (100%).

hsla.box{ background-color: hsla (16, 67, 49, .7);}

http://hslpicker.com

gradients.box{ background-image: linear-gradient(45deg, #291633, #D35529);}

gradients.box{ background-image: linear-gradient (#291633 0%, #FFEBA3 50%, #D35529 100%);}

gradients.box{ background-image: linear-gradient (top, hsl(16,67,50) 0%, hsl(16,67,55) 50%, hsl(16,90,50) 50%, hsl(16,90,40) 100%);}

gradients.box{ background-image: radial-gradient(#291633, #D35529);}

http://colorzilla.com/gradient-editor

a#appstore{ background-image: linear-gradient (top, #B6B6B6, #9B9B9B);}a#twitter{ background-image: linear-gradient (top, #2B79DE, #4798E7);} http://dribbbitsapp.com

body{ background: #030205 radial-gradient (center top, circle closest-corner, #615C59,#030205) no-repeat; }http://earthhour.fr

DROPSHADOWS

box shadow.box{ box-shadow: 5px 5px 10px 10px rgba(0,0,0,.75);}

box shadow.box{ box-shadow: 0 5px 0 hsl(16, 67%, 33%), 0 10px 0 rgba(0, 0, 0, .5);}

nav li{ box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), inset 0 1.4em 2em -0.7em rgba(255, 255, 255, .3); }http://bit.ly/viajartiempo

.boton{ box-shadow: 0 1px 0 #E87754, 0 2px 0 #BD4019, 0 3px 0 #AE3B17, 0 5px 0 #9F3615, 0 7px 0 #903113, 0 8px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);} http://bit.ly/viajartiempo

text shadowh1{ text-shadow: 5px 5px 5px rgba(0,0,0,.75);} text shadow

h1{ text-shadow: 1px 1px 0 rgba(255,255,255,.6); }http://lanyrd.com

h1{ text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #FF00DE; }http://bit.ly/text-shadows

h1 .c{ text-shadow: 0px 0px #FE8, 0px 2px #EB0, 0px 1px #FE8, 0px 3px #EB0, -1px 2px #FE8, -1px 4px #EB0, -1px 3px #FE8, (...) -4px 26px #EB0;} http://beercamp.com/2010

bACKGROUNDS

multiple backgrounds.box{ background: url(panda.png) no-repeat right bottom, url(madera.jpg);}

#services li{ background: url(ux.png) no-repeat left top, url(separador.png) no-repeat center bottom; }http://swwweet.com/services.html

#header{ background: url(pattern.png) repeat-x, linear-gradient (top, #17132A, #2A234B); }http://dribbbitsapp.com

input#submit{ background: url(download-arrow.png) no-repeat 0px 50%, #95DC2F linear-gradient (top, #8BD225 0%, #BCF26F 50%, #8BD225 50%, transparent 100%);} http://modernizr.com

background size.box{ background: url(balloons.png) repeat; background-size: 100px auto;}

html{ background-color:#FFECD0; background-image: linear-gradient (-45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent); background-size: 100px 100px; }http://leaverou.me

MÁXIMAFLEXIBILIDAD

media queries@media screen and (max-width:800px){ body{ font-size:12px; } #columna{ width:400px; }}

media queries@media screen and (min-width:1200px)

media queries@media screen and (max-width:320px)

media queries device-aspect-ratio color orientation aspect-ratiodevice-height device-width resolution heightmonochrome max-width width max-height

http://alistapart.com/articles/responsive-web-design

http://bit.ly/hardboiled-media-queries

http://stpaulsschool.org.uk

http://sasquatchfestival.com

http://mediaqueri.es

MÚLTIPLESCOLUMNAS

columns.box{ column-count: 2;} Lorem ipsum dolor sit amet, posuere sollicitudin, tortor eros co ns e c t e t u r ad ip is c i ng e l i t . interdum libero, et condimentum Aliquam semper augue et libero leo purus at nisi. Mauris vel sem vulputate fringilla. Phasellus a lacus, quis laoreet lorem. Integer enim non felis commodo est orci, sollicitudin quis elementum vel non purus. fermentum eget, consequat nec Curabitur ut orci est. Curabitur libero. Sed vitae dolor dolor, eget lobortis lacus ac dolor placerat sed p l a c e r a t l e o. P r o i n e g e s t a s vehicula neque accumsan. Nullam malesuada pharetra. Sed arcu ante, auctor arcu quis lectus auctor adipiscing sit amet semper vel, interdum. Suspendisse at pulvinar aliquet sit amet nunc. ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu

columns.box{ column-gap: 100px;} Lorem ipsum dolor sit amet, volutpat, tortor eu posuere consectetur adipiscing elit. s o l l i c i t u d i n , t o r t o r e ro s Aliquam semper augue et interdum libero, et libero vulputate fringilla. condimentum leo purus at Phasellus a enim non felis nisi. Mauris vel sem lacus, commodo elementum vel non quis laoreet lorem. Integer est purus. Curabitur ut orci est. orci, sollicitudin quis Curabitur lobortis lacus ac fermentum eget, consequat dolor placerat sed vehicula nec libero. Sed vitae dolor neque accumsan. Nullam dolor, eget placerat leo. Proin auctor arcu quis lectus auctor egestas malesuada pharetra. interdum. Suspendisse at Sed arcu ante, adipiscing sit pulvinar ipsum. In hac amet semper vel, aliquet sit habitasse platea dictumst. In amet nunc.

columns.box{ column-rule: 1px solid black;} Lorem ipsum dolor sit amet, tortor eros interdum libero, et consectetur adipiscing elit. condimentum leo purus at nisi. Aliquam semper augue et libero Mauris vel sem lacus, quis laoreet vulputate fringilla. Phasellus a lorem. Integer est orci, enim non felis commodo sollicitudin quis fermentum eget, e l e me n t u m ve l no n pu r u s . consequat nec libero. Sed vitae Curabitur ut orci est. Curabitur dolor dolor, eget placerat leo. lobortis lacus ac dolor placerat Proin egestas malesuada sed vehicula neque accumsan. pharetra. Sed arcu ante, Nullam auctor arcu quis lectus adipiscing sit amet semper vel, auctor interdum. Suspendisse at aliquet sit amet nunc. pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin,

#content{ column-count: 3; column-gap: 1.125em; }http://informationarchitects.jp

NUEVOSSELECTORES

:ﬁrst-childul :first-child{ background: #D35529;}

:last-childul :last-child{ background: #D35529;}

:nth-child()ol :nth-child(odd){ background: #D35529;} 1 2 3 4 5 6 7 8 9

:nth-child()ol :nth-child(3n){ background: #D35529;} 1 2 3 4 5 6 7 8 9

:nth-child()ol :nth-child(3){ background: #D35529;} 1 2 3 4 5 6 7 8 9

:nth-child()ol :nth-child(3n+2){ background: #D35529;} 1 2 3 4 5 6 7 8 9

:nth-child()ol :nth-child(6n+4){ background: #D35529;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

http://css-tricks.com/examples/nth-child-tester

:not()ul :not(:first-child){ background: #D35529;}

attributea[title] {color: red;}a[href=‟index.html”] {color: red;}img[alt*=‟web”] {border: 5px solid red;}a[href$=‟.pdf”] {background: url(pdf.png)}

http://selectivizr.com

#recent-projects li:nth-child(2){ margin: 0 13px; }http://swwweet.com

#intro nav li{ background: rgba(5, 129, 121, .8); } #intro nav li:nth-child(2){ background: rgba(224, 80, 35, .8); } #intro nav li:nth-child(3){ background: rgba(238, 165, 27, .8); } #intro nav li:nth-child(4){ background: rgba(94, 79, 58, .8); } #intro nav li:nth-child(5){ background: rgba(173, 165, 53, .8); }http://bit.ly/viajartiempo

pseudo-elements Oslo Quintop:before{ content:‟Mis gatos:”; color: #D35529;} Mis gatos: Oslo Mis gatos: Quinto

pseudo-elements Oslo Quintop:after{ content:‟es un gato”; color: #D35529;} Oslo es un gato Quinto es un gato

pseudo-elements <li>Cuatro estaciones</li> <li>Margarita</li>li:before{ content: url(pizza.png);} Cuatro estaciones Margarita

pseudo-elements Un cuadradop:before{ content:‟ ”; display: inline-block; width: 10px; height: 10px; background: #D35529;} Un cuadrado

#signin form:before{ content: "{"; font-size: 15em; color: #BE3F9E; position: absolute; top: -15px; left: -100px; } #signin form:after{ content: "}"; font-size: 15em; color: #BE3F9E; position: absolute; top: -15px; right: -100px; }http://freelancebcn.com

#intro nav li{ position:relative; } #intro nav li:before{ content: ""; position: absolute; left: 0; bottom: -8px; border: 10px solid black; border-color: transparent rgb(5, 129, 121); border-width: 0 8px 8px 0; }http://bit.ly/viajartiempo

http://nicolasgallagher.com

TRANSFORMACIONES

scale.box{ transform: scale(.5);}

.articulo:hover{ transform: scale(1.1); }http://abelsutilo.com

rotate.box{ transform: rotate(45deg);}

#imagery .photos li:hover { transform: rotate(2deg) scale(1.1); }http://nordicruby.org

translate.box{ transform: translate(20px, 40px);}

skew.box{ transform: skew(5deg, 30deg);}

TRANSICIONES

transitions.box{ background: #51E500; transition: 1s background ease-in;}.box:hover{ background: #D35529;}

transitions.box{ transition: 1s background ease-in, 1s height ease-in;}

delay.box{ transition: 1s background ease-in .5s;}

li#shape-b a{ transform:rotate(-10deg); transition:all 0.8s ease-in; opacity:0.5; background:#17659b; } li#shape-b a:hover{ transform:rotate(360deg); }http://newadventuresconf.com

.banner h3 a{ background: url(banner.png) 0 0 no-repeat; transition: all 0.3s ease-in-out; } .banner h3 a:hover { margin-right: -10px; text-indent: 10px; background: url(banner.png) 10px 0 no-repeat; } #imagery .photos li { transition : all .2s ease-in-out; } #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); }http://nordicruby.org

rECURSOShttp://books.alistapart.com

rECURSOShttp://hardboiledwebdesign.com

rECURSOShttp://stunningcss3.com

¡GRACIAS!

¿PREGUNTAS?

créditoshttp://www.flickr.com/photos/soonerpa/4220518842 http://www.flickr.com/photos/tainara/314471333http://www.flickr.com/photos/gregheo/5321202672 http://www.flickr.com/photos/adman_as/3507892529http://www.flickr.com/photos/wainwright/351684037 http://www.flickr.com/photos/archer10/2216791949http://www.flickr.com/photos/joeshlabotnik/4749975148 http://www.flickr.com/photos/rohdesign/4444113922http://www.flickr.com/photos/tetzl/178374065 http://www.flickr.com/photos/lycid/1515574003http://www.flickr.com/photos/cibomahto/2291127824 http://www.flickr.com/photos/stevedave/3566325269http://www.flickr.com/photos/st3f4n/4448140377 http://www.flickr.com/photos/aftab/3364835006http://www.flickr.com/photos/blubrblog/4326100513 http://www.flickr.com/photos/rhinoneal/4353519405http://www.flickr.com/photos/lucynieto/2536364522

http://pilarvi.blogspot.com	650
http://flavors.me	199
http://pilarvi.blogspot.com.es	125
http://abelsutilo.tumblr.com	28
http://www.pilarvi.blogspot.com	27
http://paper.li	25
http://rober.tumblr.com	13
http://lanyrd.com	9
http://safe.tumblr.com	6
http://www.pilarvi.blogspot.com.es	5
http://twitter.com	3
http://talksathome.com	3
http://pilarvi.blogspot.com.ar	3
http://a0.twimg.com	3
http://pilarvi.blogspot.de	2
http://pilarvi.blogspot.mx	2
http://cottonfieldsbcn.tumblr.com	1
http://feeds.feedburner.com	1
url_unknown	1
http://enekopalencia.tumblr.com	1
http://us-w1.rockmelt.com	1
http://pilarvi.blogspot.co.uk	1
http://www.talksathome.com	1

Tecnicas avanzadas con CSS3

by Marta Armada on Mar 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

23 Embeds 1,110

Statistics

Tecnicas avanzadas con CSS3 — Presentation Transcript