CSS3: nuevos selectores y pseudo elementos
Upcoming SlideShare
Loading in...5
×
 

CSS3: nuevos selectores y pseudo elementos

on

  • 3,032 views

 

Statistics

Views

Total Views
3,032
Views on SlideShare
2,989
Embed Views
43

Actions

Likes
2
Downloads
74
Comments
0

3 Embeds 43

http://gc.scalahed.com 37
http://aulavirtual.utel.edu.mx 4
http://us-w1.rockmelt.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS3: nuevos selectores y pseudo elementos CSS3: nuevos selectores y pseudo elementos Presentation Transcript

    • CSS3Monday, January 16, 12
    • Un sitio moderno se trabaja en 3 capas Contenido Presentacion InteraccionMonday, January 16, 12
    • Un sitio moderno se trabaja en 3 capas HTML(5) CSS(3) JavascriptMonday, January 16, 12
    • Porque es superior CSS?Monday, January 16, 12
    • Porque es superior CSS? •Separacion por capas •Cosistencia Global •Ancho de Banda •Control de cambios •SEO •Accebilidad •Asi se trabaja la web en este sigloMonday, January 16, 12
    • Arquitectura de CSSMonday, January 16, 12
    • Monday, January 16, 12
    • Monday, January 16, 12
    • CSS3 no es trabaja igual que HTML5!!Monday, January 16, 12
    • CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
    • Monday, January 16, 12
    • Monday, January 16, 12
    • 1996 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
    • 1998 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
    • 2000 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
    • CSS Layer 1 CSS Layer 2 CSS Layer 3 CSS Layer 4 CSS Layer 5 .....Monday, January 16, 12
    • Soporte en BrowsersMonday, January 16, 12
    • Monday, January 16, 12
    • Monday, January 16, 12
    • Monday, January 16, 12
    • Modelo de CajasMonday, January 16, 12
    • Monday, January 16, 12
    • SelectoresMonday, January 16, 12
    • Selectores elemento { propiedad: valor }Monday, January 16, 12
    • Selectores elemento hijo { propiedad: valor }Monday, January 16, 12
    • Selectores elemento hijo:pseudo { propiedad: valor }Monday, January 16, 12
    • Como las cataratas, CSS solo caeMonday, January 16, 12
    • Nuevos SelectoresMonday, January 16, 12
    • Hijo ( A > B) Selecciona únicamente el primer elemento B que sea descendiente de A A BMonday, January 16, 12
    • Hermano Adyacente (A + B) Selecciona cualquier elemento B que tenga el mismo parent que E. por ejemplo en una lista li+li seleccionara todos los elementos de la lista menos el primer <li>. A BMonday, January 16, 12
    • 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 ejemplo 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 BMonday, January 16, 12
    • X[atr] Selecciona cualquier elemento X que tenga el atributo “atr” con cualquier valor, img[alt] { border: solid}Monday, January 16, 12
    • 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
    • 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
    • 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
    • X[atr *= val] Selecciona cualquier elemento X que tenga un atributo incluya “val”., img[alt=”img/”] { border: solid 1px lime}Monday, January 16, 12
    • PseudolementosMonday, January 16, 12
    • X: valid X: invalid X: required X: optionalMonday, January 16, 12
    • 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
    • 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
    • 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
    • E:nth-last-of-type(n) El elemento E que es el numero n de su tipo.Contando desde atras. div:nth-last-of-type(2) { border: solid 1px lime}Monday, January 16, 12
    • F E:first-child El primer elemento E dentro de F. li:first-child { border: solid 1px lime}Monday, January 16, 12
    • F E:last-child El ultimo elemento E dentro de F. li:last-child { border: solid 1px lime}Monday, January 16, 12
    • E:not( selector ) Cualquier elemento E que no coincida con el selector. div:not ( .destacado ) { border: solid 1px silver}Monday, January 16, 12
    • Animacion y transicionesMonday, January 16, 12
    • Herramientas de animacion •Flash •Javascript •CSS3Monday, January 16, 12
    • Porque animar con CSS? •Menos dependencia de plugins •Menos código •Menos NERD •Mejor Performance en movilesMonday, January 16, 12
    • Ahorrar ancho de bandaMonday, January 16, 12
    • Bordes redondeados .recuadro{ border-radius:10px }Monday, January 16, 12
    • Sombras .recuadro{ box-shadow: 1px 1px 1px rgba(0,0,0, 0.5) }Monday, January 16, 12
    • Sombras .recuadro{ text-shadow: 1px 1px 1px rgba(0,0,0, 0.5) }Monday, January 16, 12
    • 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
    • Gradientes http://gradients.glrzad.com/Monday, January 16, 12
    • CSS Transforms •Scale •Rotate •Skew •TranslateMonday, January 16, 12
    • transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) }Monday, January 16, 12
    • transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) }Monday, January 16, 12
    • transform: rotate() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:rotate(45deg) }Monday, January 16, 12
    • transform: skew() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:skew(45deg) }Monday, January 16, 12
    • transformaciones multiples .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) rotate(45deg); }Monday, January 16, 12
    • Modificar el origen .cuadro{ transform: rotate(45deg); transform-origin: rigth top } .cuadro:hover{ transform: rotate(45deg); transform-origin: 100% 100% }Monday, January 16, 12
    • Transition .cuadro{ background-color: #000000 transition-property: background-color; transition-duration: 1s; } .cuadro:hover{ background-color: #000000 }Monday, January 16, 12
    • Propiedades sujetas de transformacionMonday, January 16, 12
    • Demos!Monday, January 16, 12
    • http://www.paulrhayes.com/experiments/cube/ multiCubes.htmlMonday, January 16, 12
    • http://ecsspert.com/adobe.phpMonday, January 16, 12
    • http://www.zurb.com/playground/css3-polaroidsMonday, January 16, 12
    • http://development.tobypitman.com/css/menu.htmlMonday, January 16, 12
    • http://www.cssplay.co.uk/menu/css3-animation.htmlMonday, January 16, 12
    • http://www.zurb.com/playground/osx-dockMonday, January 16, 12
    • http://anthonycalzadilla.com/css3-ATAT/index.htmlMonday, January 16, 12
    • http://silverbackapp.com/index.php?n=2Monday, January 16, 12
    • El futuro de CSSMonday, January 16, 12
    • CSS Shaders http://www.adobe.com/devnet/html5/articles/css- shaders.htmlMonday, January 16, 12