7.-Hojas de Estilo en Cascada Version 3 - CSS3

Hojas de Estilo en Cascada versión 3 (CSS3)
Las hojas de estilo en cascada para su versión 3 incluyen nuevos efectos para los DIV y otros
elementos de HTML, CSS3 constituye una importante mejora a las páginas WEB y uno de los
pilares en la WEB 2.0. CSS3 es parte fundamental del nuevo estándar HTML5.
Estudiantes de UTH, no olviden que CSS3 no es compatible con todos

los navegadores de Internet obsoletos y de ciertos teléfonos celulares
o tablets, además para entender este material es necesario haber
estudiado el anterior titulado: Manejo de Hojas de Estilo en Cascada
CSS.
Bordes Redondeados
El atributo utilizado para lograrlo es: border-radius, en el definimos la cantidad de píxeles
de redondez que va a tener el DIV, por ejemplo:
<div style="border:2px solid; border-radius:25px; width:20%;
background-color: lime; ">
<center>Tu Universidad Hondureño</center>
</div>
El resultado de este fragmento es:
Observe que cada esquina del DIV se pronunció en un arco de 25 píxeles.
Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Sombras
box-shadow es el atributo indicado, por ejemplo:
<div style="border:1px solid; box-shadow: 15px 10px 5px
#888888; width:25%; background-color: orange;">
<center><img src='http://www.uth.hn/images/logo.png'></center>
</div>
La sintaxis es la siguiente:
box-shadow: horizontal vertical suavizado color

donde:
Horizontal es la posición de la sombra en píxeles para el eje X
Vertical es la posición de la sombra en píxeles para el eje Y
Suavizado es que tan suave va a dibujarse la sombra, se representa en píxeles
Color el color de la sombra, puede ser hexadecimal o valor de constante (red,

blue, yellow, etc.)
El resultado del ejemplo anterior es:
Degradados Lineales
CSS3 nos permite crear fondos de varios colores dando un efecto de degradado, en el
pasado necesitábamos de un software para hacer dichos efectos y luego poner la imagen,
ahora es más fácil, a continuación encontrará varios ejemplos, pero antes veamos la
sintaxis del atributo que necesitaremos:
background: linear-gradient(ángulo, color1, color2, color3, …. , colorN )
Donde:
Ángulo es la dirección del degradado, va de 0 a 360 grados, se expresa con la

unidad de medida deg, por ejemplo para 60 grados escribimos: 60deg.
Color1, Color2, Color3, … , ColorN puede usar la cantidad que colores que desee,
estos van separados con comas.

Degradado Lineal Vertical
<div style="background: linear-gradient(180deg, green, orange);">
<center><img src='http://www.uth.hn/images/logo.png'>
</center>
</div>
Degradado Lineal Horizontal

<div style="background: linear-gradient(90deg, green, orange);">
</center>
</div>
NOTA: Observe como lo único que cambiamos fue los grados del ángulo, en este caso está
a 90 grados.
Degradado Lineal Multicolor en Diagonal

<div style="background: linear-gradient(45deg, green, orange, yellow,
blue, purple);">
</center>
</div>
NOTA: Vea como se pusieron 5 colores diferentes y el ángulo se estableció a 45 grados para
dar la impresión de un degradado en diagonal.

Degradados Radiales
También es posible crear degradados circulares, la sintaxis del atributo que necesitaremos
es la siguiente:
background: radial-gradient(color1, color2, …. , colorN )
Donde:
Color1, Color2, Color3, … , ColorN puede usar la cantidad que colores que desee,
estos van separados con comas.
<div style="background: radial-gradient(red, yellow, green);">
</center>
</div>
Texto con Sombra

También es posible aplicar efecto de sombra a un texto dentro de un área, para el siguiente
ejemplo aplicaremos una sombra a todo el texto del cuerpo de nuestro sitio WEB:
<html>
<body style="text-shadow: 15px 5px 10px green;">
<font size=7 face='Arial' color=blue>
Ingenieria en Computación UTH
</font>
</body>
</html>
Siendo la sintaxis la siguiente:
text-shadow: horizontal vertical suavizado color

donde:
Horizontal es la posición de la sombra en píxeles para el eje X
Vertical es la posición de la sombra en píxeles para el eje Y
Suavizado es que tan suave va a dibujarse la sombra, se representa en píxeles
Color el color de la sombra, puede ser hexadecimal o valor de constante (red,

blue, yellow, etc.)

El resultado es:
Rotación
Si lo que desea es rotar un DIV por ejemplo, debe utilizar el atributo llamado transform:
rotate, la sintaxis es la siguiente:
transform: rotate( grados de rotación );
Donde:
Ángulo son los ángulos de rotación, va de 0 a 360 grados, se expresa con la

unidad de medida deg.
Ejemplo:
<br/><br/><br/><br/><br/>
<div style="transform: rotate(30deg); border: 1px solid black;
width: 400px">
</center>
</div>
NOTA: no todos los navegadores son compatibles con esta función.

Oblicuidad
Si desea torcer un elemento puede usar el atributo skew, la sintaxis es:
transform: skew(Ángulo 1, Ángulo 2);

Donde:
Ángulo1 es el primer angulo que define la rotación, va de 0 a 360 grados, se

expresa con la unidad de medida deg.
Ángulo2 es el segundo angulo que define como se va a torcer, va de 0 a 360

grados, se expresa con la unidad de medida deg.
Ejemplo:
<br/><br/><br/><br/><br/>
<center>
<div style="transform: skew(30deg,20deg); background: yellow;
width: 400px;">
<img src='http://www.uth.hn/images/logo.png'>
</div>
</center>

Transiciones: Stretch Horizontal
CSS3 cuenta también cuenta con efectos de transición los cuales se disparan en situaciones
tales como cuando el navegante acerca el puntero del mouse sobre determinado DIV, el
siguiente ejemplo ilustra mejor este tipo de situaciones:
<html>
<head>
<style>
.animacionUTH
{
width:110px;
height:66px;
background: #00BB22;
background-image: url('http://www.uth.hn/images/logo.png');
transition:width 2s;
}
.animacionUTH:hover
{
width:322px;
}
</style>
</head>
<body>
<div class="animacionUTH"></div>
Acerque el cursor a la imagen
</body>
</html>
Observe el código marcado en verde, los estilos en este ejemplo fueron declarados en la
HEAD de la página.
Creamos un estilo personalizado llamado animacionUTH, pero le modificamos el estilo

principal y también el estilo Hover (que es el estilo que se utiliza cuando el usuario
posiciona el cursor del mouse sobre la región que utilize ese estilo).
En el estilo principal agregamos un atributo llamado transtition, a dicho atributo le pusimos

que la propiedad width va a ser cambiada en un lapso de 2 segundos (por ello se usa el
numero 2s).

En el estilo Hover de nuestro estilo personalizado pusimos que el width será de 322 píxeles,
o sea que cuando el usuario posicione el cursor del mouse sobre el DIV que usa dicho estilo
este DIV se estirará un total de 322 píxeles, siendo este su tamaño final.
Tamaño inicial: 110 píxeles de ancho Al acercar el cursor a dicho DIV este se
estirará hasta un ancho de 322 píxeles en un
tiempo de 2 segundos.
Transiciones: Opacity
Basados en el ejemplo anterior es posible también modificar otras propiedades, en este
caso Opacity, que es la que define que tan transparente será el objeto:
<html>
<head>
<style>
.animacionUTH
{
width:110px;
height:66px;
background: #00BB22;
background-image: url('http://www.uth.hn/images/logo.png');
transition:opacity 3s;
}
.animacionUTH:hover
{
opacity:0;
}
</style>
</head>
<body>
<div class="animacionUTH"></div>
Acerque el cursor a la imagen
</body>
</html>

Vea que es idéntico al ejemplo anterior solo que en este caso la propiedad modificada es el
opacity del DIV, por lo tanto, cuando se acerque el cursor al DIV este comenzará a
desvanecerse.
Animaciones: color y posición

En CSS3 también es posible definir un guion de animación en el cual se especifique que va
ocurrir en determinados porcentajes de un lapso de tiempo, el siguiente ejemplo lo que
hace es animar un div de izquierda a derecha y la va cambiando el color:
<html>
<head>
<style>
.EstiloAnimacion
{
width:100px;
height:100px;
background:red;
font-size: 28pt;
text-align: center;
position:relative;
left: 0px;
animation:guionAnimacion 10s;
}
@keyframes guionAnimacion
{
0% {left:0px;}
25% {left:100%; background: blue;}
50% {left:20%; background: cyan;}
100% {left:50%; background: yellow;}
}
</style>
</head>
<body>
<div class="EstiloAnimacion">UTH</div>
</body>
</html>

Nuestro estilo personalizado se llamará EstiloAnimacion, establecemos que las
coordenadas para ubicar los elementos serán relative, o sea que podremos manipular las
coordenadas del DIV que utilice este este estilo. La coordenada inicial en el eje X será 0px
(left) y la propiedad animation permite definir como se llamará el guion que manejará las
animaciones y la duración del mismo: 10s = 10 segundos.
Para crear guiones de animación usamos la sentencia @keyframes y luego le ponemos el

nombre del guion, este lleva una estructura similar a la de las hojas de estilo.
El guion en este caso lo que indica es:
0% es cuando inicia nuestra animación, o sea las condiciones iniciales del DIV cuando
arranque la animación, para este ejemplo es que la posición del DIV será 0px.
25% indica que cuando pase el 25% del tiempo total de la animación (en este ejemplo
pusimos 10 segundos o sea que el 25% sería 2.5 segundos) entonces hasta llegar a ese
tiempo el DIV se desplazará un 100% del ancho total de la página y cambiará su color a azul.
50% aquí indicamos que a los 5 segundos (50% de los 10 segundos) el DIV se desplazará a la
posición que represente el 20% de la página y cambiará su color a celeste (cyan).
100% cuando la animación esté por terminar (se cumplen los 10 segundos) el DIV se
desplazará al 50% de la página (al centro) y cambiará su color a amarillo.
Animaciones: posición y cambio de imagen en tiempo real

Un aspecto interesante de CSS3 es el hecho de no solo poder manipular propiedades de
posición, tamaño o aspecto, sino también la imagen de fondo de un elemento puede
cambiarse en determinados intervalos de tiempo.
El siguiente ejemplo utiliza dos imágenes que están almacenadas en uno de los servidores
de una de las aplicaciones que he programado (califik.com es un producto 100%
Hondureño).
Ambas imágenes son dos GIF animados:
http://califik.com/samus_der.gif http://califik.com/samus_izq.gif
El siguiente ejemplo muestra como en un intervalo de 4 segundos se pasa de una imagen a
otra dando la impresión que es un personaje que voltea a ver en dirección contraria a
medida se desplaza:

<html>
<head>
<style>
.EstiloAnimacion
{
width:43px;
height:45px;
position:relative;
left: 0px;
top: 445px;
background-image:
url('http://califik.com/samus_der.gif'),url('http://califik.com/samus_izq.gif');
background-repeat: no-repeat;
background-position: 0px 0px, 45px 0px;
animation-iteration-count:infinite;
}
{
0% {left:0px;}
50% {left:90%; background-position: 0px 0px, 45px 0px; }
51% {background-position: 45px 0px, 0px 0px; }
100% {left:0px; background-position: 45px 0px, 0px 0px; }
}
</style>
</head>
<body background='http://www.califik.com/uthsps.jpg' style='background-repeat: no-
repeat';>
<div class="EstiloAnimacion"></div>
</body>
</html>
Para comenzar se ha definido que el fondo del div tendrá dos imágenes:
background-image:
url('http://califik.com/samus_der.gif'),
url('http://califik.com/samus_izq.gif');
Note que cada una de las imágenes está separada con coma (coloreada en rojo)
Simplemente haciendo esto obtendríamos un fondo combinado como el siguiente:

Este resultado no es favorable porque parece que ambas imágenes ocupan la misma
posición dentro del fondo, para separarlas una de la otra usamos las propiedades
background-repeat y background-position:
background-repeat: no-repeat;
background-position: 0px 0px, 45px 0px;
En ellas definimos que cada una de la imágenes no se repetirá mas de una vez (no-repeat) y
además daremos posiciones diferentes a cada una de las dos imágenes:
Posición: Posición:
Eje X: 0 Eje X: 45
Eje Y: 0 Eje Y: 0
Note que por cada imagen en la propiedad background-position se pone dos valores, uno
para x y el otro para y. Por cada imagen van dos valores, así de esta forma ambas no
ocupan el mismo lugar dentro del fondo.
La animación durará 4 segundos, y el guion que la manejará se llamará guionAnimacion.
Y para que la animación se esté ejecutnado una y otra vez de forma infinita se usa:
Lo que indica que serán iteraciones infinitas. Usted puede definir cuantas iteraciones
(vueltas) va a ejecutarse de dicha animación.
El guión será:
{
0% {left:0px;}
50% {left:90%; background-position: 0px 0px, 45px 0px; }
51% {background-position: 45px 0px, 0px 0px; }
100% {left:0px; background-position: 45px 0px, 0px 0px; }
}
0% al comenzar la animación el DIV estará en el pixel 0 de la página.
50% a los 2 segundos (el 50% de los 4 segundos) se desplazará el DIV hasta llegar al 90%
del ancho de la pantalla, y el fondo del DIV será siempre la primera imagen que tiene

coordenadas 0px 0px en el fondo y segunda imagen permanecerá en las coordenadas 45px
0px (fuera del área del DIV, o sea oculta)
51% a los 2.04 segundos se hará el cambio de la imagen del fondo, se pone la imagen 2 que
tiene coordenadas 45px 0px de primero, y la imagen 1 con coordenadas 0px 0px se pone
después (permaneciendo oculta)
100% hasta terminar los 4 segundos la imagen 2 (coordenadas 45px 0px) será la primera en
dibujarse y el DIV se desplazará hasta la posición cero de la pantalla.
Un claro ejemplo de aprovechar esta técnica de programación en CSS (y claro combinando

algo de programación JavaScript) es el Pacman publicado por Google hace unos años:
http://www.google.com/doodles/30th-anniversary-of-pac-man, este utiliza una sola
imagen para cargar todos los elementos gráficos del juego y luego mediante background-
position hace el corte de la imagen deseada para el sprite necesitado:

Animaciones: color, posición y opacidad
En la siguiente animación se alteran las coordenadas tanto en X como en Y de un DIV, así
como su color y opacidad sumado a un retardo en el inicio de las animaciones:
<html>
<head>
<style>
.UTH
{
width:100px;
height:58px;
background:red;
position:relative;
animation-name:animacionUTH;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-direction:alternate;
}
@keyframes animacionUTH
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px; }
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px; opacity: 0.05}
}
</style>
</head>
<body>
<div CLASS="UTH"><img src='http://www.califik.com/UTH.png'

width=100px></div>
</body>
</html>
La explicación es la siguiente: utilizamos otra forma de mandar a llamar un guion de
animación y de definir la duración de la misma:

animation-name:animacionUTH;
Con esta propiedad definimos el nombre del guion de animaciones a usar
animation-duration:5s;
Con esta propiedad definimos el tiempo que va a durar la animación (todo el guion)
animation-timing-function:linear;
Define la forma en que la animación va a desarrollarse, para este caso la animación siempre
mantendrá una velocidad uniforme, puede cambiar la palabra linear por cualquiera de los
siguientes valores:
 ease la animación comienza despacio, luego se acelera y por ultimo baja su

velocidad.
 ease-in la animación comienza despacio, luego tiene una velocidad constante.
 ease-out la animación es constante y al final termina con velocidad lenta.
animation-delay:2s;
Define el tiempo en que comenzará la animación, o sea la cantidad de segundos para que la
animación haga PLAY o sea comience a ejecutarse el guion.
La animación se realizará infinitamente
animation-direction:alternate;
La animación una vez termine será rebobinada o sea que dará un efecto de que el tiempo
retrocede, o sea que todos los desplazamiento hechos se volverán a hacer de forma
inversa.
CSS3 es un mundo completamente nuevo, permite hacer un sinfín de

cosas a nuestras páginas WEB, es parte del nuevo HTML5 y por lo
tanto es necesario aprenderlo para dar el próximo paso.
Este material es mas que todo introductorio, espero les sirva para iniciarse en este nuevo
modelo de trabajo.

7.-Hojas de Estilo en Cascada Version 3 - CSS3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

7.-Hojas de Estilo en Cascada Version 3 - CSS3

Cargado por

Copyright:

Formatos disponibles

Hojas de Estilo en Cascada versión 3 (CSS3)

Estudiantes de UTH, no olviden que CSS3 no es compatible con todos

Observe que cada esquina del DIV se pronunció en un arco de 25 píxeles.

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

box-shadow: horizontal vertical suavizado color

Horizontal es la posición de la sombra en píxeles para el eje X

Vertical es la posición de la sombra en píxeles para el eje Y

Suavizado es que tan suave va a dibujarse la sombra, se representa en píxeles

Color el color de la sombra, puede ser hexadecimal o valor de constante (red,

El resultado del ejemplo anterior es:

background: linear-gradient(ángulo, color1, color2, color3, …. , colorN )

Ángulo es la dirección del degradado, va de 0 a 360 grados, se expresa con la

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Degradado Lineal Horizontal

Degradado Lineal Multicolor en Diagonal

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

background: radial-gradient(color1, color2, …. , colorN )

Texto con Sombra

text-shadow: horizontal vertical suavizado color

Horizontal es la posición de la sombra en píxeles para el eje X

Vertical es la posición de la sombra en píxeles para el eje Y

Suavizado es que tan suave va a dibujarse la sombra, se representa en píxeles

Color el color de la sombra, puede ser hexadecimal o valor de constante (red,

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Ángulo son los ángulos de rotación, va de 0 a 360 grados, se expresa con la

NOTA: no todos los navegadores son compatibles con esta función.

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

transform: skew(Ángulo 1, Ángulo 2);

Ángulo1 es el primer angulo que define la rotación, va de 0 a 360 grados, se

Ángulo2 es el segundo angulo que define como se va a torcer, va de 0 a 360

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Acerque el cursor a la imagen

Creamos un estilo personalizado llamado animacionUTH, pero le modificamos el estilo

En el estilo principal agregamos un atributo llamado transtition, a dicho atributo le pusimos

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Acerque el cursor a la imagen

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Animaciones: color y posición

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Para crear guiones de animación usamos la sentencia @keyframes y luego le ponemos el

El guion en este caso lo que indica es:

Animaciones: posición y cambio de imagen en tiempo real

Ambas imágenes son dos GIF animados:

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Simplemente haciendo esto obtendríamos un fondo combinado como el siguiente:

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Un claro ejemplo de aprovechar esta técnica de programación en CSS (y claro combinando

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

<div CLASS="UTH"><img src='http://www.califik.com/UTH.png'

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

 ease la animación comienza despacio, luego se acelera y por ultimo baja su

CSS3 es un mundo completamente nuevo, permite hacer un sinfín de

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

También podría gustarte