CSS 3

Animacin
Indice
Border-radius
Border-image
Gradientes
Shadow
Transiciones
Border-radius
Redondea los bordes de un elemento
Tiene gran utilidad con <div>, <table> y mas
Podemos dar un nivel de redondeo a cada
esquina.
CSS3: Esquinas redondeadas
CSS3: Esquinas redondeadas
Border-image
Border-image
Border-image
Border-image
Border-image cortes
Stretch: alarga la imagen del borde para ajustarse
Repeat: repite la imagen hasta cubrir el tamao del
borde, pudiendo quedar cortada parte de la imagen
en los extremos.
Round: repite la imagen ajustando el tamao para no
cortarla en los extremos (No en Chrome/Safari)
Space: repite la imagen dejando espacios entre las
imgenes para no cortarla en los extremos.
Border-image cortes
Gradientes
Crea gradientes entre colores.
Pueden ser lineales o radiales.
Nos libra de poner imgenes que ocupan gran
tamao.
Gradientes
Gradientes
Shadow
Crea una sombra a un elemento <div> <table>, etc.
Crea efecto de profundidad.
Podemos usarlas para resaltar contenido o como
tcnica de diseo.
Shadow
Shadow
CSS3: Imagen de fondo de tamao completo
CSS3: Imagen de fondo de tamao completo
Transiciones
Permite cambiar los valores de propiedad suavemente
(de un valor a otro), durante un tiempo determinado.
Transiciones
Transiciones
Podemos cambiar los valores de las propiedades de
ancho y alto
Transiciones
Transiciones - demoras
Transiciones timing-function
Linear: Siempre la misma velocidad.
ease: Lento-Rapido-Lento.
ease-in: Comienzo lento.
ease-out: Final lento.
ease-in-out: Comienzo lento y final lento.
Transiciones - transformacin
Transiciones - transformacin
Animaciones

Una animacin permite un elemento cambiar gradualmente

de un estilo a otro.

Se puede cambiar tantas propiedades CSS que quieras, las

veces que desee.

Para utilizar la animacin CSS3, primero debe especificar

algunos fotogramas (keyframes) clave para la animacin.
Animaciones
Animaciones