Las formas geométricas no solo están presentes en las matemáticas, también podemos obtenerlas en el diseño Web, estas se pueden obtener mediante un poco de CSS y HTML.En esta entrada veremos como aplicar el CSS para diseñar formas Geométricas, explicando detalladamente la linea de código para que se puedan hacer modificaciones al gusto de cada uno.
Para crea nuestras figuras geométricas con CSS, primero crearemos nuestro Código HTML, el cual simplemente tendrá una etiqueta <div> y le añadiremos una clase para que esta sea identificada por el código CSS en donde aremos las modificaciones para cada forma.Código HTML:
<html> <head> <title>triangulo con CSS</title> </head> <body> <div class="forma"> </div></body> </html>
Triangulo con CSS:
En el código HTML que observamos arriba aplicaremos el Código CSS, para que la etiqueta <div> adecue la forma de un triangulo:.triangulo { width: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid #7EB4FC; }
Como vemos en el resultado, es muy fácil de crear triángulos con CSS, solo tenemos que jugar con los bordes del entorno, es muy importare también señalar width=0 ya que esto indica que el ancho de la figura se mantenga en Cero y que solo se trabaje con las dimensiones que se indican en los Bordes.
Border-left: indica las dimensiones del borde Izquierdo en este caso 40px, al colocar la propiedad Solid indicamos que se muestre el borde y ponemos el valor transparent para que no se note el fondo de la dimensione izquierda.
Border-right: al igual que border-left indica las dimensiones, pero esta ves del borde derecho en este caso 40px, al colocar la propiedad Solid indicamos que se muestre el borde y ponemos el valor transparent para que no se note el fondo de la dimensione Derecha.
Border-bottom: En este Atributo esta toda la gracias de que nuestro simple <div> tenga la forma de triangulo, las dimensiones que colocamos a este Borde son las que definen la altura que tendrá nuestro triangulo con respecto a la Punta, ademas de eso en esta indicamos el color que tendrá nuestra forma Geométrica como vemos en el código.
Veremos un par de variaciones mas que podemos añadir a las dimensiones que contendrá nuestro triangulo.
Para este ejemplo cambiamos el border-bottom por el border-top, de esta forma aremos que la punta del triangulo se muestre ase bajo:
.triangulo { width: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 80px solid #7EB4FC; }
Ahora en el resultado la punta de nuestro triangulo se encuentra apuntando a bajo, de esta forma podemos ir intercambiando valores con las dimensiones de los border y obtener diversas formas de triángulos siempre teniendo en cuenta que para que esto resulte solo tenemos que usar 3 de los lados que podamos. Ahora variaremos el border-left y el border-right para tener un triangulo con lados diferentes:
.triangulo { width: 0; border-left: 30px solid transparent; border-right: 20px solid transparent; border-top: 80px solid #7EB4FC; }
Si desean obtener mas modelos de triángulos con CSS pueden visitar www.bufa.es, en donde encontraras mas variaciones de estas formas geométricas echas con CSS.
Trapecio con CSS:
Como sabemos esta forma geométrica se caracteriza por contener 2 lados paralelos, así que aplicaremos un par de estilos CSS para que nuestro <div> tenga esa forma:.trapecio { width: 80px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid #7EB4FC; }
El principio del código CSS se basa en el del Triangulo con la única diferencia que esta ves añadimos un width=80px; la cual simila el cuarto lado del trapecio paralelamente al border-bottom, al igual que en el triangulo podemos varias las dimensiones y podemos crear diversas formas de trapecios con respecto al tamaño en pixeles que se codifique.
Circulo con CSS:
Los círculos se pueden modelar fácilmente con CSS solo tenemos que aplicar la propiedad border-radius y darle un porcentaje adecuado que en este caso es el 50% del total, si variamos ese porcentaje la forma que obtendremos sera un ovoide a continuación veremos un ejemplo:.circulo { border-radius:50%; background-color:#7EB4FC; width:80px; height:80px; }
En nuestro código CSS aplicamos la propiedad border-radius con la cual se bordea circularmente el entorno de nuestro <div> y al aplicar el valor 50% esto hace que lo bordee completamente hasta crear un circulo, de esta forma observamos la forma circular que obtiene, ademas de eso el width y height, el ancho y alto respectivamente, se colocan de la misma dimensión recordando el principio de las longitudes del circulo que el ancho y largo son iguales.
Les invito a poner un porcentaje diferente en el valor del border-radius, para notar el resultado de óvalos.
Cuadrado y ractangulo con CSS:
Ahora llegamos a la parte final del Tutorial, con algo que es muy común de realizar, la formas cuadriculares son fáciles de lograr ya que solo intervienen el alto y ancho de estos, veremos a continuación como lograr estas formas:.cuadrado { width:80px; height:80px; background-color:#7EB4FC; }Como vemos es muy fácil crear un cuadrado solo colocamos width y height, recordando que estos deben ser iguales, luego colocamos el color correspondiente que queremos que tenga la forma con background-color. Para crear un rectángulo solo que tenemos que colocar diferente ancho y alto recordando los principios básicos del rectángulo:
.rectangulo { width:100px; height:70px; background-color:#7EB4FC; }
Aplicando un poco de creatividad al dar nuestros estilos CSS podemos obtener diversas formas geométricas aplicando propiedades del border, width y height. Así si tenemos que agregar alguna de esta formas en algún diseño ya podemos hacerlo con CSS y evitarnos el uso de imagenes que pueden sobrecargar la Web
OJO: cuando aplicamos border-radius para dar forma al circulo, esta propiedad no es reconocida por Internet Explore, así que ahí solo se nota en forma de cuadrado, les recomiendo usar cualquier otro buen navegador diferente a IE.
Cualquier duda o Aporte hacerlo por comentarios. Gracias por su tiempo!
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure