Embed Size (px)
DESCRIPTION
Citation preview
CSS3técnicas avanzadas
Javier Usobiaga Marta Armada
SeedRocket16 marzo 2011
@htmlboy@martuishere
vENTAJAS
velocidad
velocidad flexibilidad
velocidad
escalabilidad
flexibilidad
velocidad
escalabilidad
flexibilidad
ligereza
prOBLEMAS
experimental
experimental redundancia
experimental
abuso
redundancia
experimental
abuso soporte
redundancia
SOLUCIONES
dibujo de Phil Henderson@LLcoolPhil
progressive enhancement
Cumplo mifunción :-)
de menos a más
Y! "#$%&'$()! $f$*'+
progressive enhancement
Cumplo mifunción :-)
de menos a más
graceful degradation
Me diseñaronasí de guay
de más a menos
Tengo unaimagen de fondo
graceful degradation
Me diseñaronasí de guay
de más a menos
hardboiled
¿Le gustaré a@4lexcat? :-)
“To hell with being graceful”Andy Clarke
Harboiled Web Design
hardboiled
Paso de laimagen de fondo
¿Le gustaré a@4lexcat? :-)
“To hell with being graceful”Andy Clarke
Harboiled Web Design
regressive enhancementtapando agujeros con Javascript
¿soporte?
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);}
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 shadow
text shadow
h1{ text-shadow: 5px 5px 5px rgba(0,0,0,.75);}
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
aspect-ratio color orientation device-aspect-ratio
device-height device-width resolution height
monochrome max-width width max-height
http://alistapart.com/articles/responsive-web-design
http://bit.ly/hardboiled-media-queries
MÚLTIPLESCOLUMNAS
columns
.box{ column-count: 2;
}Lorem ipsum dolor sit amet, consectetur adipiscing e l i t . Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m n o n f e l i s c o m m o d o e l e m e n t u m v e l n o n p u r u s . Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu
posuere sollicitudin, tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer e s t o r c i , s o l l i c i t u d i n q u i s fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget p lace ra t l e o. P ro i n e g e s t as malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
columns
.box{ column-gap: 100px;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a enim non felis commodo elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at p u l v i n a r ip s u m . I n h a c habitasse platea dictumst. In
volutpat, tortor eu posuere sol l ic i tudin , tor tor eros i n t e r d u m l i b e r o , e t condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer est o r c i , s o l l i c i t u d i n q u i s fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. Proin egestas malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
columns
.box{ column-rule: 1px solid black;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit . Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m n o n f e l i s c o m m o d o elementum vel non purus . Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin,
tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet l o r e m . I n t e g e r e s t o r c i , sollicitudin quis fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. P r o i n e g e s t a s m a l e s u a d a p h a r e t r a . S e d a r c u a n t e , adipiscing sit amet semper vel, aliquet sit amet nunc.
#content{ column-count: 3;
column-gap: 1.125em;}
http://informationarchitects.jp
NUEVOSSELECTORES
:first-child
ul :first-child{ background: #D35529;
}
:last-child
ul :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;
}
attribute
a[title] {color: red;}
a[href=‟index.html”] {color: red;}
img[alt*=‟web”] {border: 5px solid red;}
a[href$=‟.pdf”] {background: url(pdf.png)}
#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
p:before{ content:‟Mis gatos:”; color: #D35529;}
Mis gatos: OsloMis gatos: Quinto
<p>Oslo</p><p>Quinto</p>
pseudo-elements
p:after{ content:‟es un gato”; color: #D35529;}
Oslo es un gato Quinto es un gato
<p>Oslo</p><p>Quinto</p>
pseudo-elements
li:before{ content: url(pizza.png);}
<li>Cuatro estaciones</li><li>Margarita</li>
Cuatro estacionesMargarita
pseudo-elements
p:before{ content:‟ ”; display: inline-block; width: 10px; height: 10px; background: #D35529;}
<p>Un cuadrado</p>
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
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
http://hardboiledwebdesign.com
rECURSOS
¡GRACIAS!
¿PREGUNTAS?
http://www.flickr.com/photos/soonerpa/4220518842
http://www.flickr.com/photos/gregheo/5321202672
http://www.flickr.com/photos/wainwright/351684037
http://www.flickr.com/photos/joeshlabotnik/4749975148
http://www.flickr.com/photos/tetzl/178374065
http://www.flickr.com/photos/cibomahto/2291127824
http://www.flickr.com/photos/st3f4n/4448140377
http://www.flickr.com/photos/blubrblog/4326100513
http://www.flickr.com/photos/lucynieto/2536364522
http://www.flickr.com/photos/tainara/314471333
http://www.flickr.com/photos/adman_as/3507892529
http://www.flickr.com/photos/archer10/2216791949
http://www.flickr.com/photos/rohdesign/4444113922
http://www.flickr.com/photos/lycid/1515574003
http://www.flickr.com/photos/stevedave/3566325269
http://www.flickr.com/photos/aftab/3364835006
http://www.flickr.com/photos/rhinoneal/4353519405
créditos
