Cómo crear un menú parte 2

#efecto1{
width:80px;
height:100px;
background:#f90;
color:blue;
background-clip:padding-box;
border:solid 10px rgba(204,204,204,0.3);
transform:skew(10deg,5deg);
-moz-transform:skew(10deg,5deg);
-ms-transform:skew(10deg,5deg);
-o-transform:skew(10deg,5deg);
-webkit-transform:skew(10deg,5deg);
display:inline-block;
}
#efecto1:hover{
transform:skew(-40deg,-10deg);
-moz-transform:skew(-40deg,-10deg);
-ms-transform:skew(-40deg,-10deg);
-o-transform:skew(-40deg,-10deg);
-webkit-transform:skew(-40deg,-10deg);
}
#efecto2{
width:80px;
height:100px;
background:#f90;
color:blue;
background-clip:padding-box;
border:solid 10px rgba(204,204,204,0.3);
display:inline-block;
}
#efecto2:hover{
transform:translate(50px);
-moz-transform:translate(50px);
-ms-transform:translate(50px);
-o-transform:translate(50px);
-webkit-transform:translate(50px);
}
#efecto3{
width:80px;
height:100px;
background:#f90;
color:blue;
background-clip:padding-box;
border:solid 10px rgba(204,204,204,0.3);
display:inline-block;
}
#efecto3:hover{
transform:rotate(20deg);
-moz-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-o-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
#efecto4{
width:80px;
height:100px;
background:#f90;
color:blue;
background-clip:padding-box;
border:solid 10px rgba(204,204,204,0.3);
display:inline-block;
}
#efecto4:hover{
transform:scale(4,2);
-moz-transform:scale(4,2);
-ms-transform:scale(4,2);
-o-transform:scale(4,2);
-webkit-transform:scale(4,2);
}
#efecto5{
width:80px;
height:100px;
background:#f90;
color:blue;
background-clip:padding-box;
border:solid 10px rgba(204,204,204,0.3);
display:inline-block;
}
#efecto5:hover{
transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-moz-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-ms-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-o-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-webkit-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
}
#codigo{
background:#999;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
color:#FFF;
}
#contenido{
border-radius:5px;
border:solid 1px #DEDEDE;
padding:10px;
}

Cómo crear un menú parte 2

Tomando el post anterior seguimos en el tema de cómo crear un menú, en esta nueva entrada vamos a definir los conceptos de las propiedades de CSS3 para entender mucho mejor como es que funcionan.

Si te fijas en el ejemplo del tema anterior sombre cómo crear un menú, encontraras que solo utilizamos las propiedades de Transition y transform con la propiedad Translate() en esta nueva entrada vamos aprender a aplicar algunas otras propiedades tales como scale,rótate,Matrix,Translate.

Si te fijas en la propiedad transform podemos encontrar un sinnúmero de funcionalidades que nos pueden servir para dar un estilo dinámico y vivo a nuestros menú o a cualquier div que queramos aplicárselo en nuestro código HTML, entre esas funcionalidades están.

Skew()
Rótate()
Scale()
Translate()
Matrix


Estas propiedades CSS3 tienen algo en común con ex cesión de matrix y es que todas giran en torno a un eje de coordenada o sea eje X y eje Y, y para aplicarle estas propiedades tenemos que diferencial uno del otro.

Ahora bien para utilizar estas propiedades tenemos que diferencial cada una de las otras porque aunque algunas trabajan con pixeles con respecto al eje X y Y, otras trabajan con deg .

Podemos crear un menú con estas propiedades?

La repuesta es si, para animar y dar movimiento o estilos en 2D, 3D a nuestros div o para trasladar un elemento de una posición a otra etc…

Ahora vamos a ver un ejemplo de cada uno de las propiedades antes mencionadas.

Skew()
Translate()
Rotate()
Scale()
Matrix()

El código HTML y CSS3 que vamos a utilizar será el mismo solo le vamos a ir cambiando la propiedad CSS3 para obtener el efecto que queremos.

Codigo HTML

<!DOCTYPE html>
<html lang=”ES”>
<head>
 <meta charset=”utf-8″ />
<title>Como crear un menu con css3</title>
</head>
<body>
<div id=”efecto1″>
Skew()
</div>
</body>
</html>

Codigo CSS3

#efecto1{
 width:80px;
 height:100px;
 background:#f90;
 color:blue;
 background-clip:padding-box;
 border:solid 10px rgba(204,204,204,0.3);
  }
#efecto1:hover{
 transform:skew(-40deg,-10deg);
 -moz-transform:skew(-40deg,-10deg);
 -ms-transform:skew(-40deg,-10deg);
 -o-transform:skew(-40deg,-10deg);
 -webkit-transform:skew(-40deg,-10deg);
 }

De este codigo solo vamos a utilizar el codigo CSS3 la en la propiedad hover para darle el efecto que queremos a nuestro div, Acuerdate que las -moz-,-ms-,-o-,-webkit- eso es para que esa linea de codigo la lean los principales navegadores.

Ahora podemos definir cada una de ellas para saber más bien cuál es su función si no lo entendiste gráficamente.

Para que sirve skew(): Con esta propiedad skew() de css3 podemos hacer estilos 2D y 3D basándonos en las coordenada del eje X y Y.

la linea de codigo para la figura correspondiente a skew() es avilidata para los principales navegadores:

transform:skew(-40deg,-10deg);
-moz-transform:skew(-40deg,-10deg);
-ms-transform:skew(-40deg,-10deg);
-o-transform:skew(-40deg,-10deg);
-webkit-transform:skew(-40deg,-10deg);

Para que sirve translate(): La propiedad translate() de css3 nos permite trasladar un elemento que esta en una posición hasta otra posición que le indiquemos.
Cambiando la linea del codigo css3 en el hover y poniendo esta obtenemos la figura numero 2.

transform:translate(50px);

-moz-transform:translate(50px);
-ms-transform:translate(50px);

-o-transform:translate(50px);

-webkit-transform:translate(50px);

Para que sirve rótate(): Con rótate() podemos rotar un elemento desde 0 hasta 360 grados la linea de codigo para sustituir en el hover es la siguiente.

transform:rotate(20deg);
-moz-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-o-transform:rotate(20deg);
-webkit-transform:rotate(20deg);

Para que sirve scale(): La propiedad scale() sirve para aumentar tanto el ancho de un div como el alto la linea de codigo para sustituir y obtener la figura de arriba es la siguiente.

transform:scale(4,2);

-moz-transform:scale(4,2);

-ms-transform:scale(4,2);

-o-transform:scale(4,2);
-webkit-transform:scale(4,2);

Para que sirve Matrix(): Matrix es una propiedad que encierra todas las antes mencionadas en el mismo orden que la he mensionado, con la que podemos tanto rotar un div como trasladarlo a otro lugar así como darle un tamaño o escala, la linea correspondiente para el ejemplo es.

transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-moz-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);
-ms-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);

-o-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);

-webkit-transform: matrix(0.5, -0.20, -0.55, 1.35, 90, 90);

Bueno creo que con estos pequeños temas bien claros entonces podemos seguir creando más cosas con HTML5 y CSS3 con una aspecto dinámico y animado, aunque esto casi se usa para crear menú y hacer una que otras animaciones muy raras veces en nuestros sitios web. Pero que sin lugar a duda le da un toque más elegante a cualquier sitio web, Y está siendo cada vez más y mas utilizado por los webmasters por la grandes ventajas que representa tanto para la programación web como para la optimización de un sitio..

En la próxima entrada vamos a crear un menú con algunas de estas propiedades mencionadas, pero esta vez vamos hacer algo más combinado y más interactivo por supuesto que el diseño lo puedes acomodar a tu gusto el que hacemos aqui es solo para explicar las propiedades y puedas ver las nuevas opciones que trae CSS3.

Bueno hasta aquí esta segunda parte de cómo crear un menú con css3, donde creo que tocamos los puntos principales para crear un menú animado y darle vida a nuestro sitio web.

Gracias y hasta la próxima entrada…

Deja un comentario

Tu dirección de correo electrónico no será publicada.