CSS3: nuevos selectores y pseudo elementos
-
Upload
carlos-solis -
Category
Technology
-
view
2.760 -
download
0
description
Transcript of CSS3: nuevos selectores y pseudo elementos
![Page 1: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/1.jpg)
CSS3
Monday, January 16, 12
![Page 2: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/2.jpg)
Contenido
Presentacion
Interaccion
Un sitio moderno se trabaja en 3 capas
Monday, January 16, 12
![Page 3: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/3.jpg)
HTML(5)
CSS(3)
Javascript
Un sitio moderno se trabaja en 3 capas
Monday, January 16, 12
![Page 4: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/4.jpg)
Porque es superior CSS?
Monday, January 16, 12
![Page 5: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/5.jpg)
Porque es superior CSS?
•Separacion por capas•Cosistencia Global•Ancho de Banda•Control de cambios•SEO•Accebilidad •Asi se trabaja la web en este siglo
Monday, January 16, 12
![Page 6: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/6.jpg)
Arquitectura de CSS
Monday, January 16, 12
![Page 7: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/7.jpg)
Monday, January 16, 12
![Page 8: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/8.jpg)
Monday, January 16, 12
![Page 9: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/9.jpg)
CSS3 no es trabaja igual que HTML5!!
Monday, January 16, 12
![Page 10: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/10.jpg)
CSS Layer 1CSS Layer 2CSS Layer 3
Monday, January 16, 12
![Page 11: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/11.jpg)
Monday, January 16, 12
![Page 12: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/12.jpg)
Monday, January 16, 12
![Page 13: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/13.jpg)
CSS Layer 1CSS Layer 2CSS Layer 3
1996
Monday, January 16, 12
![Page 14: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/14.jpg)
1998
CSS Layer 1CSS Layer 2CSS Layer 3
Monday, January 16, 12
![Page 15: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/15.jpg)
2000
CSS Layer 1CSS Layer 2CSS Layer 3
Monday, January 16, 12
![Page 16: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/16.jpg)
CSS Layer 1CSS Layer 2CSS Layer 3CSS Layer 4CSS Layer 5.....
Monday, January 16, 12
![Page 17: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/17.jpg)
Soporte en Browsers
Monday, January 16, 12
![Page 18: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/18.jpg)
Monday, January 16, 12
![Page 19: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/19.jpg)
Monday, January 16, 12
![Page 20: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/20.jpg)
Monday, January 16, 12
![Page 21: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/21.jpg)
Modelo de Cajas
Monday, January 16, 12
![Page 22: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/22.jpg)
Monday, January 16, 12
![Page 23: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/23.jpg)
Selectores
Monday, January 16, 12
![Page 24: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/24.jpg)
Selectores
elemento {
propiedad: valor
}
Monday, January 16, 12
![Page 25: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/25.jpg)
Selectores
elemento hijo {
propiedad: valor
}
Monday, January 16, 12
![Page 26: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/26.jpg)
Selectores
elemento hijo:pseudo {
propiedad: valor
}
Monday, January 16, 12
![Page 27: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/27.jpg)
Como las cataratas, CSS solo cae
Monday, January 16, 12
![Page 28: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/28.jpg)
Nuevos Selectores
Monday, January 16, 12
![Page 29: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/29.jpg)
Hijo ( A > B)
Selecciona únicamente el primer elemento B que sea
descendiente de A
A
B
Monday, January 16, 12
![Page 30: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/30.jpg)
Hermano Adyacente (A + B)
Selecciona cualquier elemento B que tenga el mismo parent que E. por ejemplo en una l ista l i+l i seleccionara todos los elementos de la lista menos el primer <li>.
A
B
Monday, January 16, 12
![Page 31: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/31.jpg)
Hermano General (A ~ B)
Selecciona cualquier elemento B que comparta el mismo parent que cualquier A y que venga posterior en la estructura HTML. Por e jemplo H1~H2 seleccionara cualquier <h2> que este después de un <h1> siempre y cuando ambos compartan el mismo nodo padre, o sea siempre que <h2> no este anidado en otro elemento.
A
B
Monday, January 16, 12
![Page 32: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/32.jpg)
X[atr]
Selecciona cualquier elemento X que tenga el atributo “atr” con cualquier valor,
img[alt] { border: solid}
Monday, January 16, 12
![Page 33: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/33.jpg)
X[atr = val]
Selecciona cualquier elemento X que tenga el atributo “atr” con el valor exacto a “val”.,
img[alt=”curso”] { border: solid}
Monday, January 16, 12
![Page 34: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/34.jpg)
X[atr ^= val]
Selecciona cualquier elemento X que tenga un atributo que comience con “val”.,
img[alt^=”.jpg”] { border: solid 1px lime}
Monday, January 16, 12
![Page 35: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/35.jpg)
X[atr $= val]
Selecciona cualquier elemento X que tenga un atributo que termine con “val”.,
img[alt$=”.jpg”] { border: solid 1px lime}
Monday, January 16, 12
![Page 36: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/36.jpg)
X[atr *= val]
Selecciona cualquier elemento X que tenga un atributo incluya “val”.,
img[alt=”img/”] { border: solid 1px lime}
Monday, January 16, 12
![Page 37: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/37.jpg)
Pseudolementos
Monday, January 16, 12
![Page 38: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/38.jpg)
X: valid
X: invalid
X: required
X: optional
Monday, January 16, 12
![Page 39: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/39.jpg)
E F:nth-child(n)
El elemento F que es el descendiente numero #n del elemento parent E.
li:nth-child(2) { border: solid 1px lime}
Monday, January 16, 12
![Page 40: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/40.jpg)
E F:nth-last-child(n)
El elemento F que es el descendiente numero #n del elemento parent E, pero contando de atras a adelante.
li:nth-last-child(2) { border: solid 1px lime}
Monday, January 16, 12
![Page 41: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/41.jpg)
E:nth-of-type(n)
El elemento E que es el numero n de su tipo.
div:nth-of-type(2) { border: solid 1px lime}
Monday, January 16, 12
![Page 42: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/42.jpg)
E:nth-last-of-type(n)
E l e l emen to E que e s e l numero n de su tipo.Contando desde atras.
div:nth-last-of-type(2) { border: solid 1px lime}
Monday, January 16, 12
![Page 43: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/43.jpg)
F E:first-child
El primer elemento E dentro de F.
li:first-child { border: solid 1px lime}
Monday, January 16, 12
![Page 44: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/44.jpg)
F E:last-child
El ultimo elemento E dentro de F.
li:last-child { border: solid 1px lime}
Monday, January 16, 12
![Page 45: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/45.jpg)
E:not( selector )
Cualquier elemento E que no coincida con el selector.
div:not ( .destacado ) { border: solid 1px silver}
Monday, January 16, 12
![Page 46: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/46.jpg)
Animacion y transiciones
Monday, January 16, 12
![Page 47: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/47.jpg)
Herramientas de animacion
•Flash•Javascript•CSS3
Monday, January 16, 12
![Page 48: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/48.jpg)
Porque animar con CSS?
•Menos dependencia de plugins•Menos código•Menos NERD•Mejor Performance en moviles
Monday, January 16, 12
![Page 49: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/49.jpg)
Ahorrar ancho de banda
Monday, January 16, 12
![Page 50: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/50.jpg)
Bordes redondeados
.recuadro{
border-radius:10px
}
Monday, January 16, 12
![Page 51: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/51.jpg)
Sombras
.recuadro{
box-shadow: 1px 1px 1px rgba(0,0,0, 0.5)
}
Monday, January 16, 12
![Page 52: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/52.jpg)
Sombras
.recuadro{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5)
}
Monday, January 16, 12
![Page 53: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/53.jpg)
Gradientes
.recuadro{
background-image: linear-gradient(bottom, rgb(169,113,40) 15%, rgb(203,147,68) 58%, rgb(244,177,96) 79%);
}
Monday, January 16, 12
![Page 54: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/54.jpg)
http://gradients.glrzad.com/
Gradientes
Monday, January 16, 12
![Page 55: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/55.jpg)
CSS Transforms
•Scale•Rotate•Skew•Translate
Monday, January 16, 12
![Page 56: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/56.jpg)
transform: scale().cuadro{
height:250px;width:250px;background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2)
}
Monday, January 16, 12
![Page 57: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/57.jpg)
transform: scale().cuadro{
height:250px;width:250px;background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2)
}
Monday, January 16, 12
![Page 58: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/58.jpg)
transform: rotate().cuadro{
height:250px;width:250px;background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:rotate(45deg)
}
Monday, January 16, 12
![Page 59: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/59.jpg)
transform: skew().cuadro{
height:250px;width:250px;background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:skew(45deg)
}
Monday, January 16, 12
![Page 60: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/60.jpg)
transformaciones multiples.cuadro{
height:250px;width:250px;background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2) rotate(45deg);
}
Monday, January 16, 12
![Page 61: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/61.jpg)
Modificar el origen.cuadro{
transform: rotate(45deg);transform-origin: rigth top
}
.cuadro:hover{
transform: rotate(45deg);transform-origin: 100% 100%
}
Monday, January 16, 12
![Page 62: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/62.jpg)
Transition.cuadro{
background-color: #000000transition-property: background-color;transition-duration: 1s;
}
.cuadro:hover{
background-color: #000000
}
Monday, January 16, 12
![Page 63: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/63.jpg)
Propiedades sujetas de transformacion
Monday, January 16, 12
![Page 64: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/64.jpg)
Demos!
Monday, January 16, 12
![Page 65: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/65.jpg)
http://www.paulrhayes.com/experiments/cube/multiCubes.html
Monday, January 16, 12
![Page 66: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/66.jpg)
http://ecsspert.com/adobe.php
Monday, January 16, 12
![Page 67: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/67.jpg)
http://www.zurb.com/playground/css3-polaroids
Monday, January 16, 12
![Page 68: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/68.jpg)
http://development.tobypitman.com/css/menu.html
Monday, January 16, 12
![Page 69: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/69.jpg)
http://www.cssplay.co.uk/menu/css3-animation.html
Monday, January 16, 12
![Page 70: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/70.jpg)
http://www.zurb.com/playground/osx-dock
Monday, January 16, 12
![Page 71: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/71.jpg)
http://anthonycalzadilla.com/css3-ATAT/index.html
Monday, January 16, 12
![Page 72: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/72.jpg)
http://silverbackapp.com/index.php?n=2
Monday, January 16, 12
![Page 73: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/73.jpg)
El futuro de CSS
Monday, January 16, 12
![Page 74: CSS3: nuevos selectores y pseudo elementos](https://reader033.fdocuments.us/reader033/viewer/2022042714/54b49e484a79593a7b8b482d/html5/thumbnails/74.jpg)
CSS Shaders
http://www.adobe.com/devnet/html5/articles/css-shaders.html
Monday, January 16, 12