Tecnicas avanzadas con CSS3

CSS3
técnicas avanzadas

Javier Usobiaga SeedRocket
Marta Armada 16 marzo 2011

velocidad ﬂexibilidad

escalabilidad

velocidad ﬂexibilidad

escalabilidad ligereza

experimental redundancia

abuso

experimental redundancia

abuso soporte

dibujo de Phil Henderson
@LLcoolPhil

SOLUCIONES

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 menos

Me diseñaron
así de guay

graceful degradation
de más a menos

Me 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 enhancement
tapando agujeros con Javascript

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

hsl
HUE: 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

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


text shadow
h1{
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

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

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

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

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

:last-child
ul :last-child{
}

:nth-child()
ol :nth-child(odd){
}

1 2 3 4 5 6 7 8 9

:nth-child()
ol :nth-child(3n){
}

1 2 3 4 5 6 7 8 9

:nth-child()
ol :nth-child(3){
}

1 2 3 4 5 6 7 8 9

:nth-child()
ol :nth-child(3n+2){
}

1 2 3 4 5 6 7 8 9

:nth-child()
ol :nth-child(6n+4){
}

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){
}

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){
}

}

}

}


pseudo-elements
Oslo
Quinto

p:before{
content:‟Mis gatos:”;
color: #D35529;
}

Mis gatos: Oslo
Mis gatos: Quinto

pseudo-elements
Oslo
Quinto

p: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 cuadrado

p:before{
content:‟ ”;
display: inline-block;
width: 10px;
height: 10px;
}

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


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

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

.box:hover{
}

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

rECURSOS

http://books.alistapart.com

rECURSOS

http://hardboiledwebdesign.com

rECURSOS

http://stunningcss3.com

créditos
http://www.flickr.com/photos/soonerpa/4220518842 http://www.flickr.com/photos/tainara/314471333

http://www.flickr.com/photos/gregheo/5321202672 http://www.flickr.com/photos/adman_as/3507892529

http://www.flickr.com/photos/wainwright/351684037 http://www.flickr.com/photos/archer10/2216791949

http://www.flickr.com/photos/joeshlabotnik/4749975148 http://www.flickr.com/photos/rohdesign/4444113922

http://www.flickr.com/photos/tetzl/178374065 http://www.flickr.com/photos/lycid/1515574003

http://www.flickr.com/photos/cibomahto/2291127824 http://www.flickr.com/photos/stevedave/3566325269

http://www.flickr.com/photos/st3f4n/4448140377 http://www.flickr.com/photos/aftab/3364835006

http://www.flickr.com/photos/blubrblog/4326100513 http://www.flickr.com/photos/rhinoneal/4353519405

http://www.flickr.com/photos/lucynieto/2536364522

Tecnicas avanzadas con CSS3

Recommended

Recommended

More Related Content

Similar to Tecnicas avanzadas con CSS3

Similar to Tecnicas avanzadas con CSS3 (20)

More from Marta Armada

More from Marta Armada (8)

Recently uploaded

Recently uploaded (20)

Tecnicas avanzadas con CSS3