Efectos con HTML5 Y CSS3.

La web cambi para siempre cuando unos aos atrs nuevas aplicaciones desarrolladas sobre
implementaciones Ajax mejoraron el diseo y la experiencia de los usuarios. La versin 2.0,
asignada a la web para describir un nuevo nivel de desarrollo, represent un cambio no solo en la
forma en que la informacin era transmitida sino tambin en cmo los sitios web y nuevas
aplicaciones eran diseados y construidos.
CSS3 provee nuevas propiedades para crear efectos visuales y dinmicos que son parte esencial de
la web en estos das.
border-radius Esta propiedad genera esquinas redondeadas para la caja formada por el elemento.
Posee dos parmetros diferentes que dan forma a la esquina. El primer parmetro determina
la curvatura horizontal y el segundo la vertical, otorgando la posibilidad de crear una elipsis.
Para declarar ambos parmetros de la curva, los valores deben ser separados por una barra (por
ejemplo, border-radius: 15px / 20px ). Usando solo un valor determinaremos la misma forma para
todas las esquinas (por ejemplo, border-radius: 20px ). Un valor para cada esquina puede ser
declarado en un orden que sigue las agujas del reloj, comenzando por la esquina superior
izquierda.
box-shadow Esta propiedad crea sombras para la caja formada por el elemento. Puede tomar
cinco parmetros: el color, el desplazamiento horizontal, el desplazamiento vertical, el valor de
difuminacin, y la palabra clave inset para generar una sombra interna. Los desplazamientos
pueden ser negativos, y el valor de difuminacin y el valor inset son opcionales (por ejemplo, boxshadow: #000000 5px 5px 10px inset ).
text-shadow Esta propiedad es similar a box-shadow pero especfica para textos. Toma cuatro
parmetros: el color, el desplazamiento horizontal, el desplazamiento vertical, y el valor de
difuminacin (por ejemplo, text-shadow: #000000 5px 5px 10px ).
@font-face Esta regla no permite cargar y usar cualquier fuente que necesitemos. Primero,
debemos declarar la fuente, proveer un nombre con la propiedad font-family y especificar el
archivo con src (por ejemplo, @font-face{ font-family: Mifuente; src: url('font.ttf') } ). Luego de esto,
podremos asignar la fuente (en el ejemplo Mifuente ) a cualquier elemento del documento.
linear-gradient(posicin inicio, color inicial, color final) Esta funcin puede ser aplicada a las
propiedades background o background-image para generar un gradiente lineal. Los atributos
indican el punto inicial y los colores usados para crear el gradiente. El primer valor puede ser
especificado en pixeles, en porcentaje o usando las palabras clave top, bottom, left y right. El
punto de inicio puede ser reemplazado por un ngulo para proveer una direccin especfica para el
gradiente (por ejemplo, linear-gradient(top, #FFFFFF 50%, #006699 90%); ).
radial-gradient(posicin inicio, forma, color inicial, color final) Esta funcin puede ser
aplicada a las propiedades background o background-image para generar un gradiente radial.
La posicin de inicio es el origen y puede ser declarado en pixeles, porcentaje o como una combinacin
de las palabras clave center , top , bottom , left y right . Existen dos valores para la forma:
circle y ellipse , y puntos de terminacin pueden ser declarados para cada color indicando
la posicin donde la transicin comienza (por ejemplo, radial-gradient(center, circle, #FFFFFF
0%, #006699 200%); ).
rgba() Esta funcin es una mejora de rgb() . Toma cuatro valores: el color rojo (0-255), el color verde
(0-255), el color azul (0-255), y la opacidad (un valor entre 0 y 1).

hsla() Esta funcin es una mejora de hsl() . Puede tomar cuatro valores: el tono (un valor entre 0 y
360), la saturacin (un porcentaje), la luminosidad (un porcentaje), y la opacidad (un valor
entre 0 y 1).
outline Esta propiedad fue mejorada con la incorporacin de otra propiedad llamada outlineoffset . Ambas propiedades combinadas generan un segundo borde alejado del borde original
del elemento (por ejemplo, outline: 1px solid #000000; outline-offset: 10px; ).
border-image Esta propiedad crea un borde con una imagen personalizada. Necesita que el borde
sea declarado previamente con las propiedades border o border-with , y toma al menos tres
parmetros: la URL de la imagen, el tamao de las piezas que sern tomadas de la imagen para
construir el borde, y una palabra clave que especifica cmo esas piezas sern ubicadas alrededor
del elemento (por ejemplo, border-image: url("file.png") 15 stretch; ).
transform Esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones bsicas:
scale (escalar), rotate (rotar), skew (inclinar), y translate (trasladar o mover). La funcin
scale recibe solo un parmetro. Un valor negativo invierte el elemento, valores entre 0 y 1
reducen el elemento y valores mayores que 1 expanden el elemento (por ejemplo, transform:
scale(1.5); ). La funcin rotate usa solo un parmetro expresado en grados para rotar el elemento
(por ejemplo, transform: rotate(20deg); ). La funcin skew recibe dos valores, tambin en
grados, para la transformacin horizontal y vertical (por ejemplo, transform: skew(20deg,
20deg); ). La funcin translate mueve el objeto tantos pixeles como sean especificados por sus
parmetros (por ejemplo, transform: translate(20px); ).
A continuacin elaboraremos una nueva pgina en HTML5 en la que se muestra el uso de algunos
de estos nuevos efectos, al archivo podemos llamarle EfectosCSS3.html, recuerden probar en FireFox
y Chrome.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Efectos.css">
<title>Efectos Especiales con CSS3</title>
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
<br/><br/><br/><br/>
<div class="background">
<div class="transbox">
<p>This is some text that
This is some text that is
This is some text that is
This is some text that is
This is some text that is
</p>
</div>
</div>
<br/><br/><br/>
<div id="cajaRoja">
Demo transition
</div>
</body>
</html>

is placed
placed in
placed in
placed in
placed in

in the transparent box.

the transparent box.
the transparent box.
the transparent box.
the transparent box.

A continuacin incluyo el cdigo en CSS3 en el que se definen los efectos especiales debemos llamar
a esta pgina Efectos.css.
/*
Document
: Efectos
Created on : 4/05/2013, 07:37:12 PM
Author
: isma
Description:
Documento en CSS3 que define diferentes efectos visuales sobre elementos
de la pgina.
*/
body{
text-align: center;
}
#principal{
/*Estilos bsicos para la cabecera*/
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 3px solid #999999;
background: #DDDDDD;
/********Efecto para crear un segundo borde********/
outline: 2px dashed #000099;
outline-offset: 15px;
/********Efecto para crear un borde con esquinas redondeadas********/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/********Efecto
para
crear
un
borde
diferentes********
-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 20px 10px 30px 50px;
*/

con

esquinas

redondeadas

/********Efecto para crear una sombra********/

-moz-box-shadow: rgb(150,0,0) 10px 10px;
-webkit-box-shadow: rgb(150,0,0) 10px 10px;
box-shadow: rgb(150,0,0) 10px 10px;
/********Efecto para crear un fondo con gradiente lineal********
background: -webkit-linear-gradient(top, #FFFFFF, #006699);
background: -moz-linear-gradient(top, #FFFFFF, #006699);
*/
/********Efecto para crear un fondo con gradiente lineal con 30 grados de
inclinacin********/
background: -webkit-linear-gradient(30deg, #FFFFFF, #006699);
background: -moz-linear-gradient(30deg, #FFFFFF, #006699);

/********Efecto para crear un fondo con gradiente circular********

background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);*/
/********Efectos de traslacin, rotacin y escalado********/
-moz-transform: translateY(100px) rotate(5deg) scaleX(0.3);
-webkit-transform: translateY(100px) rotate(10deg) scaleX(1);
}
#titulo{
font: bold 36px Verdana, Geneva, sans-serif;
/********Efecto de sombra para el texto********/
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/********Efecto de opacidad en el elemento********/
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
#cajaRoja
{
background-color: #900;
height:50px;
width:100px;
padding:1em;
color:#fff;
font-weight:bold;
/********Efecto de transicin con las propiedades
width********/
/*Estandar W3C*/
transition-property:background,width;
transition-duration:2s,3s;
transition-timing-function:linear, ease-out;

background-color

/*Chrome y Safari */
-webkit-transition-property:background-color, width;
-webkit-transition-duration:2s, 3s;
-webkit-transition-timing-function:linear, ease-out;
/*Opera*/
-o-transition-property:background-color 3s linear;
-o-transition-duration:2s, 3s;
-o-transition-timing-function:linear, ease-out;
/*Mozilla Firefox */
-moz-transition-property:background-color, width;
-moz-transition-duration:2s, 3s;
-moz-transition-timing-function:linear, ease-out;
/*Internet Explorer*/
-ms-transition-property:background-color, width;
-ms-transition-duration:2s, 3s;
-ms-transition-timing-function:linear, ease-out;
}
#cajaRoja:hover
{
background-color: #090;
width: 150px;
}