Beruflich Dokumente
Kultur Dokumente
El objetivo de este tutorial es conocer y practicar con las nuevas propiedades que nos presenta el
css3. Disponemos de un concepto terico, un ejercicio resuelto y la vista en ejecucin de la pgina
con su hoja de estilo.
Si no conoce nada de CSS puede visitar primero el tutorial de : CSS Ya.
Concepto
Ejemplo
Vista Previa
Tambin podemos indicar el redondeo de cada vrtice en forma independiente (el orden de los valores son
la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por ltimo la
esquina inferior izquierda):
#recuadro2{
border-radius: 20px 40px 60px 80px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:10px;
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Sombras (box-shadow)
La propiedad box-shadow permite definir una sombra a un objeto de la pgina. Debemos definir tres
valores y un color, por ejemplo:
#recuadro1{
box-shadow: 30px 10px 20px #aaa;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos que aparezca una sombra de color rojo en la parte superior izquierda y una
sombra verde en la parte inferior derecha podemos aplicar lo siguiente:
#recuadro1{
box-shadow: -30px -30px 20px #f00,
30px 30px 20px #0f0;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Mediante la funcin rgba indicamos el color de la sombra con los primeros tres parmetros (en este
ejemplo 255 de rojo, 0 de verde y 0 de azul), luego el cuarto parmetro es el ndice de transparencia
(donde 0 indica que es totalmente transparente la sombra y 1 es totalmente opaca, podemos utilizar
cualquier valor entre 1 y 0)
Para confeccionar un recuadro con sombra de color rojo con un ndice de transparencia del 50% luego
debemos especificarlo de la siguiente manera:
#recuadro1{
box-shadow: 30px 30px 30px rgba(255,0,0,0.5);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
SI queremos que la sombra se disponga en la parte superior izquierda de cada letra luego debemos definir
los siguientes valores:
#titulo2 {
text-shadow: -5px -5px 5px #aaa;
}
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos dejar fijo el vrtice superior izquierdo y seguidamente rotar 10 grados en
sentido horario luego debemos codificar:
#recuadro1{
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
Retornar
Concepto
Ejemplo
Vista Previa
El primer parmetro indica la escala para x (con el valor 1 el elemento queda como est, con un valor
mayor crece y con un valor menor decrece), el segundo parmetro es para la escala en y.
Por ejemplo si queremos que sea del doble de ancho y la mitad de altura luego ser:
Elemento {
transform: scale(2 ,0.5);
}
Un recuadro escalado con 20% menos de ancho y 20% ms de alto (definiendo el punto de origen en el
vrtice superior izquierdo:
#recuadro1{
-ms-transform: scale(0.8 , 1.2);
-webkit-transform: scale(0.8 , 1.2);
-moz-transform: scale(0.8 , 1.2);
-o-transform: scale(0.8 , 1.2);
transform: scale(0.8 , 1.2);
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos trasladar 25 pxeles en "x" y 10 pxeles en "y" luego debemos codificar:
#recuadro1{
-ms-transform: translate(25px,10px);
-webkit-transform: translate(25px,10px);
-moz-transform: translate(25px,10px);
-o-transform: translate(25px,10px);
transform: translate(25px,10px);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Elemento {
transform: rotate(grados) scale(valorx ,valory) translate(valorx ,valory) skew(gradosx ,g
}
Retornar
Concepto
Ejemplo
Vista Previa
Opacidad (opacity)
La opacidad es una caracterstica de los objetos de no dejar pasar la luz (mientras un objeto es ms opaco
significa que no deja pasar la luz) Un elemento HTML dispone de la propiedad opacity para definir cual
es su opacidad. La sintaxis es la siguiente:
Elemento {
opacity: valor;
}
Retornar
Concepto
Ejemplo
Vista Previa
Opacidad (color)
En CSS3 aparece una variante de la asignacin del color mediante la funcin rgba.
Elemento {
color: rgba(rojo,verde,azul,opacidad);
}
Para definir un color debemos indicar cuatro valores, los tres primeros son valores enteros entre 0 y 255,
que indican la cantidad de rojo, verde y azul. El cuarto valor es un nmero entre 0 y 1 que indica la
opacidad que se aplica al color. Si indicamos un 1 se grafica totalmente opaco (es el valor por defecto)
un valor menor har ms transparente el grfico.
Veamos un ejemplo primero dispondremos un texto dentro de un recuadro que tiene una imagen y no
utilizaremos la funcin rgba para definir la opacidad, sino utilizaremos la funcin rgb para definir solo el
color:
#recuadro1 {
background-image: url("foto1.jpg");
color:#f00;
width:700px;
height:450px;
border-radius:15px;
font-size:45px;
}
.texto1 {
color:rgb(255,255,0);
}
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo para generar un cuadro con tres columnas debemos implementar el siguiente cdigo:
#recuadro1{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;
width:600px;
padding:10px;
}
Tenemos que anteceder los prefijos -moz, -webkit para que funcionen con el Firefox y Chrome. El Opera
Retornar
Concepto
Ejemplo
Vista Previa
Si queremos crear un recuadro con texto y que cada columna ocupe 150 pxeles luego codificamos:
#recuadro1{
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
border-radius: 20px;
background-color:#ddd;
padding:10px;
}
El resultado puede variar dependiendo las dimensiones de la ventana del navegador (siempre y cuando
hayamos creado una pgina web fluida, es decir sin un ancho fijo):
Retornar
Concepto
Ejemplo
Vista Previa
Podemos utilizar cualquier unidad para indicar la separacin entre columnas (px, em etc.)
Si queremos una separacin de 40 pxeles entre columnas luego debemos codificar:
#recuadro1{
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;
width:600px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Con el siguiente ejemplo veamos los distintos valores de esta propiedad. Definimos una lnea de un pxel,
con trazo slido de color rojo:
#recuadro1{
-moz-column-rule: 1px solid #f00;
-webkit-column-rule: 1px solid #f00;
column-rule: 1px solid #f00;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:#ddd;
width:600px;
padding:10px;
}
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
El par de valores que indicamos coincide con la posicin de las imgenes que especificamos en la
propiedad background-image.
Implementaremos una pgina que muestre una imagen de 700*400 y dentro de esta otra imagen que se
ubique en los cuatro vrtices de la imagen ms grande.
Utilizaremos las imgenes:
Retornar
Concepto
Ejemplo
Vista Previa
url("logo1.png"),
url("logo1.png"),
url("foto1.jpg");
background-position: 0% 0%,
50% 50%;
background-size:
30px 30px,
250px 250px,
700px 450px;
background-repeat: no-repeat;
width:700px;
height:450px;
}
body {
background:white;
margin:50px;
Retornar
Concepto
Ejemplo
Vista Previa
Un ejemplo de disponer en tres recuadros imgenes de fondo inicializando la propiedad backgroundorigin con los tres valores posibles:
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<style type="text/css">
#recuadro1{
background-origin: border-box;
border: 20px solid #eee;
padding: 20px;
background-image: url("casa.png");
background-color:#ff0;
background-repeat: no-repeat;
width:300px;
height:200px;
}
#recuadro2{
background-origin: padding-box;
border: 20px solid #eee;
padding: 20px;
background-image: url("casa.png");
background-color:#ff0;
background-repeat: no-repeat;
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo crearemos dos recuadro y cuando pasemos la flecha del mouse sobre el mismo cambiaremos
su tamao. El primer recuadro lo haremos sin transicin:
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
#recuadro1:hover{
width:300px;
}
Cuando probamos la pgina veremos que el recuadro1 cambia el ancho del recuadro de 200 pxeles a 300
pxeles en forma instantanea al pasar la flecha del mouse.
Ahora si definimos la propiedad transition indicando que acte sobre la propiedad width y que el cambio
lo realice en 1 segundo:
#recuadro2{
border-radius: 20px;
background-color:#ff0;
width:200px;
padding:10px;
transition:width 1s;
-moz-transition:width 1s;
-ms-transition:width 1s;
-webkit-transition:width 1s;
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos que el recuadro modifique su ancho y cambie de color luego debemos codificar
lo siguiente:
#recuadro1{
border-radius: 20px;
background-color:#ff0;
width:200px;
padding:10px;
transition:width 1s,
background-color 8s;
-moz-transition:width 1s,
background-color 8s;
-ms-transition:width 1s,
background-color 8s;
-webkit-transition:width 1s,
background-color 8s;
-o-transition:width 1s,
background-color 8s;
}
#recuadro1:hover{
width:300px;
background-color: #f00;
}
Como vemos en la propiedad transition indicamos la propiedad width con una duracin de un segundo y
la propiedad background-color con un valor de 8 segundos. Esto significa que cuando dispongamos la
Retornar
Concepto
Ejemplo
Vista Previa
Retornar
Concepto
Ejemplo
Vista Previa
Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transicin.
Por ejemplo si queremos que la transicin comience en 1 segundo la sintaxis ser la siguiente:
#recuadro1{
border-radius: 20px;
background-color:#eee;
width:200px;
padding:10px;
transition:width 1s ease 1s;
-moz-transition:width 1s ease 1s;
-ms-transition:width 1s ease 1s;
-webkit-transition:width 1s ease 1s;
-o-transition:width 1s ease 1s;
}
Puede ser muy til si queremos encadenar transiciones, por ejemplo si queremos que el elemento
modifique su ancho y luego al finalizar el cambio del ancho modifique su color:
#recuadro2{
margin:5px;
border-radius: 20px;
background-color:#eee;
width:200px;
padding:10px;
transition:width 1s ease,
background-color 1s ease 1s;
-moz-transition:width 1s ease,
background-color 1s ease 1s;
-ms-transition:width 1s ease,
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos modificar el ancho de un elemento cuando disponemos la flecha del mouse y
que dure 1 segundo y se lance luego de medio segundo la sintaxis es la siguiente:
#recuadro1{
margin:5px;
border-radius: 20px;
background-color:#eee;
width:200px;
padding:10px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0.5s;
-moz-transition-property: width;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-moz-transition-delay: 0.5s;
-ms-transition-property: width;
-ms-transition-duration: 1s;
-ms-transition-timing-function: linear;
-ms-transition-delay: 0.5s;
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
Retornar
Concepto
Ejemplo
Vista Previa
Veamos un ejemplo donde emplearemos la sintaxis expuesta, a este momento solo el FireFox, Chrome y
Opera implementan las animaciones. Mostraremos un recuadro con un texto que parta de la columna
30px y avance hasta la columna 300px y que cambie del color gris al color amarillo:
#recuadro1{
left:30px;
position:relative;
border-radius: 20px;
background-color:#ddd;
width:200px;
height:100px;
padding:4px;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
-o-animation-name: animacion1;
Retornar
Concepto
Ejemplo
Vista Previa
Si queremos que la animacin se repita solo tres veces luego indicamos en la propiedad animationiteration-count dicho valor:
-moz-animation-iteration-count: 3;
La propiedad animation-direction indica como debe repetirse la animacin, puede tomar el valor
"normal" con lo que la animacin cada vez que finaliza comienza desde el principio. Pero si
inicializamos con el valor "alternate" cuando finaliza la animacin comienza desde el final hasta el
principio:
-moz-animation-direction: alternate;
El ejemplo del concepto anterior que muestra un recuadro con un texto que se desplaza de izquierda a
derecha cambiando su color, pero ahora indicando que se repita en forma indefinida y con el valor
"alternate" en la propiedad animation-direction:
#recuadro1{
left:30px;
position:relative;
border-radius: 20px;
background-color:#ddd;
width:200px;
height:100px;
padding:4px;
-moz-animation-name: animacion1;
Retornar
Concepto
Ejemplo
Vista Previa
El problema del concepto anterior definimos la funcin de animacin "linear" y un tiempo de retardo de 2
segundos:
#recuadro1{
left:30px;
position:relative;
border-radius: 20px;
background-color:#ddd;
width:200px;
height:100px;
padding:4px;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-webkit-animation-name: animacion1;
Retornar
Concepto
Ejemplo
Vista Previa
Animaciones (animation-play-state)
La propiedad animation-play-state nos permite cambiar el estado de la animacin, los valores posibles
son "running" y "paused", es decir ejecutndose o pausada. La sintaxis luego es:
Elemento {
animation-play-state: [running o paused];
}
Por defecto una animacin comienza con esta propiedad con el valor "running".
El siguiente ejemplo muestra un recuadro que cuando disponemos la flecha del mouse en su interior se
activa la animacin cambiando por esquinas redondeadas y el color interior:
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
height:100px;
padding:8px;
-moz-animation-play-state:paused;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-play-state:paused;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-play-state:paused;
-o-animation-name: animacion1;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
}
#recuadro1:hover {
Retornar
Concepto
Ejemplo
Vista Previa
Por ejemplo si queremos 5 frames claves que nos permitan desplazar un recudrado sobre un permetro de
un rectngulo luego tenemos que especificar los siguientes frames:
#recuadro1{
left:30px;
top:30px;
position:relative;
border-radius: 20px;
background-color:#ddd;
width:100px;
height:100px;
padding:4px;
-moz-animation-name: animacion1;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: animacion1;
-webkit-animation-duration: 4s;
Retornar