CSS3: nuevos selectores y pseudo elementos

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?

•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

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

Soporte en Browsers

Modelo de Cajas

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

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

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.

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: scale().cuadro{

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

CsS3 surfantants

CSS3 Introduction

Css3 paul trani

Html5 n css3

CSS3 and Selectors

INMIGRANTES EN ESPAÑA: NUEVOS VECINOS, NUEVOS …

CSS3 Refresher

CSS3 vs jQuery

Fundamental CSS3

Learn css3

1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2011-01/notes_CSS3intro_day1_01132011.pdf · 15 What’s New in CSS3 16 What’s New in CSS3? CSS3 is the third

CSS3 and jQuery

1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2010-12/notes_CSS3intro_day2_121020… · CSS3 Properties (cont’d) • 2D Transformations –rotate –scale

CSS3 Selectors

Html5 CSS3

Work shop css3

Presentation css3

CSS3 Fundamentals. CSS3 Introduction CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS.

Mastering CSS3

Nuevos materiales - DIGITAL.CSIC: Homedigital.csic.es/bitstream/10261/3702/1/nuevos materiales metalicos.pdf · Nuevos materiales en la sociedad del siglo XXI ... Nuevos materiales