Estilo & CSS3

Estilo & CSS3 César Carruitero Avila

Objetivo CSS3 Styling

Objetivo
Dar a conocer las novedades de la nueva especificación CSS3
Qué de bueno tiene usar CSS3? -Código más simple -Ahorro tiempo y trabajo Inconvenientes? no está implementado al 100% en todos los navegadores

Antecedentes CSS3 Styling

Pseudo-Elementos CSS3 Styling

Pseudo-elementos
::first-line
::first-letter
::before
::after
::selection

Pseudo-Clases CSS3 Styling

Pseudo-clases :nth-child(N) :nth-last-child(N) :nth-of-type(N). :nth-last-of-type(N) :last-child. :first-of-type :last-of-type. :only-child :only-of-type . :root. :empty. :enabled :disabled. :checked :not(S) .....

Bordes CSS3 Styling

border-color
Permite utilizar múltiples border-color
border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 -moz-border-top-colors: #555 #666 #777 #888 -moz-border-left-colors: #555 #666 #777 #888 -moz-border-right-colors: #555 #666 #777 #888

border-image -moz-border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 stretch;

border-radius -moz-border-radius: 10px; -moz-border-radius: 0 10px 0 10px;
Permite crear bordes redondeados de igual o diferente medida de una manera sencilla

box shadow -moz-box-shadow: 10px 10px 10px #3f74a3; box-shadow: 10px 10px 10px #3f74a3;
Permite crear sombras a objetos

Fondos CSS3 Styling

multiple background
Permite asignar multiples fondos a un elemento ..
Background: url("imagen"), url("imagen");
Y definir su posición
Background-position: 20px 20px, top right;

background-size
Permite modificar el tamaño de una imagen de fondo
background:url(img_flwr.gif); -moz-background-size:80px 60px; background-size:80px 60px;

gradient
Permite crear gradientes
background-image: -moz-linear-gradient( center bottom, rgb(6,153,99) 34%, rgb(36,167,171) 77%);

Color CSS3 Styling

opacity
Permite modificar la opacidad de un elemento.
background-color: #f00; opacity: 1.00;
Valores de 0,0 a 1,0

RGBA color
Permite definir colores usando el formato rgb
background-color: rgb(0,200,0); background-color: rgba(0,200,0,0.5);
RGB= Red Green Blue

HSL/A color
Permite usar hsl para definir color
background-color: hsl(0,50%,50%); background-color: hsla(0,50%,50%,0.5);
HSL=
Hue (Tonalidad) Saturation (Saturación) Lughtness (Luminosidad)

Texto CSS3 Styling

text-shadow
Sombras en texto
text-shadow: 2px 2px 2px #000;

multicolum
Crear columnas de una manera sencilla
-moz-column-count: 2;-moz-column-gap: 40px;

@font-face
Poder utilizar un tipo de fuente sin necesidad que el usuario la tenga instalada
@font-face { font-family: DeliciousRoman; src: url(/Delicious-Roman.otf); } h1 { font-family: DeliciousRoman; }

TRASFORM CSS3 Styling

rotate
Rotar un objeto
-moz-transform: rotate(5deg);

scale -moz-transform: scale(0.5,1.5);

skew -moz-transform: skew(-30deg);

translate -moz-transform: translate(30px, 0);

Transiciones CSS3 Styling

transitions
Intervalos de tiempo entre cambio de propiedades
-moz-transition -moz-transition-property Especifica el nombre de la propiedad CSS a la que la transición será apliacada -moz-transition-duration Duración de la transición -moz-transition-timing-function Especifica una curva bezier para definir los valores intermedios de la propiedad -moz-transition-delay Define el tiempo de espera entre el momento en que se cambia la propiedad y la transición comienza en realidad

Animaciones CSS3 Styling

@keyframes
animaciones completas mediante @keyframes (fotogramas clave)
@keyframe animacionCoche{ /*Indicamos que salimos de la posición 0*/ from{ left:0px; } /*Indicamos que al final la posición debe ser 350*/ to{ left:350px; } }

@media
Consiste en un tipo de expresiones que limiten el alcance de las hojas de estilo usando propiedades como ancho, color y altura
@media all and Es decir aplicar un estilo condicional cuando se visualiza el contenido dependiendo de las dimensiones del navegador

@media

Aplicación CSS3 Styling

Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling Tecnologías HTML5

Estilo & CSS3 César Carruitero Avila cesar(a)mozilla.pe /mozillaperu

http://35-51.posterous.com	29
http://fr.flavors.me	2
http://ffernando.wordpress.com	2
http://pt.flavors.me	1
http://flavors.me	1

Estilo & CSS3

by ccarruitero on Oct 25, 2011

Accessibility

Tags

Upload Details

Usage Rights

5 Embeds 35

Statistics

Estilo & CSS3 — Presentation Transcript