CSS3: nuevos selectores y pseudo elementos

CSS3

Monday, January 16, 12

Contenido

Presentacion

Interaccion

Un sitio moderno se trabaja en 3 capas


HTML(5)

CSS(3)

Javascript

Un sitio moderno se trabaja en 3 capas


Porque es superior CSS?


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


Arquitectura de CSS


CSS3 no es trabaja igual que HTML5!!


CSS Layer 1CSS Layer 2CSS Layer 3



1996


1998



2000



CSS Layer 1CSS Layer 2CSS Layer 3CSS Layer 4CSS Layer 5.....


Soporte en Browsers


Modelo de Cajas


Selectores


Selectores

elemento {

propiedad: valor

}


Selectores

elemento hijo {

propiedad: valor

}


Selectores

elemento hijo:pseudo {

propiedad: valor

}


Como las cataratas, CSS solo cae


Nuevos Selectores


Hijo ( A > B)

Selecciona únicamente el primer elemento B que sea

descendiente de A

A

B


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


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


X[atr]

Selecciona cualquier elemento X que tenga el atributo “atr” con cualquier valor,

img[alt] { border: solid}


X[atr = val]

Selecciona cualquier elemento X que tenga el atributo “atr” con el valor exacto a “val”.,

img[alt=”curso”] { border: solid}


X[atr ^= val]

Selecciona cualquier elemento X que tenga un atributo que comience con “val”.,

img[alt^=”.jpg”] { border: solid 1px lime}


X[atr $= val]

Selecciona cualquier elemento X que tenga un atributo que termine con “val”.,

img[alt$=”.jpg”] { border: solid 1px lime}


X[atr *= val]

Selecciona cualquier elemento X que tenga un atributo incluya “val”.,

img[alt=”img/”] { border: solid 1px lime}


Pseudolementos


X: valid

X: invalid

X: required

X: optional


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}


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}


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}


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}


F E:first-child

El primer elemento E dentro de F.

li:first-child { border: solid 1px lime}


F E:last-child

El ultimo elemento E dentro de F.

li:last-child { border: solid 1px lime}


E:not( selector )

Cualquier elemento E que no coincida con el selector.

div:not ( .destacado ) { border: solid 1px silver}


Animacion y transiciones


Herramientas de animacion

•Flash•Javascript•CSS3


Porque animar con CSS?

•Menos dependencia de plugins•Menos código•Menos NERD•Mejor Performance en moviles


Ahorrar ancho de banda


Bordes redondeados

.recuadro{

border-radius:10px

}


Sombras

.recuadro{

box-shadow: 1px 1px 1px rgba(0,0,0, 0.5)

}


Sombras

.recuadro{

text-shadow: 1px 1px 1px rgba(0,0,0, 0.5)

}


Gradientes

.recuadro{

background-image: linear-gradient(bottom, rgb(169,113,40) 15%, rgb(203,147,68) 58%, rgb(244,177,96) 79%);

}


http://gradients.glrzad.com/

Gradientes




CSS Transforms

•Scale•Rotate•Skew•Translate


transform: scale().cuadro{

height:250px;width:250px;background-color:rgb(171, 38, 41);

}

.cuadro:hover{

transform:scale(2)

}


transform: rotate().cuadro{


}

.cuadro:hover{

transform:rotate(45deg)

}


transform: skew().cuadro{


}

.cuadro:hover{

transform:skew(45deg)

}


transformaciones multiples.cuadro{


}

.cuadro:hover{

transform:scale(2) rotate(45deg);

}


Modificar el origen.cuadro{

transform: rotate(45deg);transform-origin: rigth top

}

.cuadro:hover{

transform: rotate(45deg);transform-origin: 100% 100%

}


Transition.cuadro{

background-color: #000000transition-property: background-color;transition-duration: 1s;

}

.cuadro:hover{

background-color: #000000

}


Propiedades sujetas de transformacion


Demos!


http://www.paulrhayes.com/experiments/cube/multiCubes.html






http://ecsspert.com/adobe.php




http://www.zurb.com/playground/css3-polaroids




http://development.tobypitman.com/css/menu.html




http://www.cssplay.co.uk/menu/css3-animation.html


http://www.cssplay.co.uk/menu/css3-animation.html#x

http://www.cssplay.co.uk/menu/css3-animation.html#x

http://www.zurb.com/playground/osx-dock




http://anthonycalzadilla.com/css3-ATAT/index.html




http://silverbackapp.com/index.php?n=2




El futuro de CSS


CSS Shaders

http://www.adobe.com/devnet/html5/articles/css-shaders.html






CSS3: nuevos selectores y pseudo elementos

Technology

Transcript of CSS3: nuevos selectores y pseudo elementos