CSS garantiza que HTML se vea bien. Pero con CSS es posible mucho más que sólo dar formato a texto, tablas, imágenes, etc. Incluso las formas geométricas pueden ser creados con CSS puro. Con algunos retoques, no sólo es posible crear círculos y triángulos, sino también dibujar figuras complejas, como las estrellas y los corazones.
La ventaja de tales figuras diseñadas con CSS es que no se necesita un archivo externo. Además, el color y el tamaño se puede cambiar fácilmente. La desventaja es que no todos los navegadores pueden interpretar estos estilos CSS. Los navegadores actuales no tienen ningún problema para que corazones y estrellas de estilo CSS funcionen correctamente pero siempre hay algunos que todavía no quieren actualizar su navegador…
La base para las figuras CSS es un elemento de bloque, en nuestros ejemplos usamos un contenedor DIV. Todo lo demás es controlado a través de CSS. Dado que los elementos de bloque siempre tienen formas básicas rectangulares, se tiene que hacer algunos cambios para que sea un círculo o un triángulo.
[the_ad id=»4531″]
Para la visualización de los círculos de ayuda a la propiedad CSS «border-radius». Forma básica es un envase cuadrado, el radio de marco mide la mitad del largo del borde:
[crayon-53b26bad81e69569693909/]
Un oval también se puede crear de esta manera. Esto, sin embargo, tiene diferentes valores para los radios horizontales y verticales:
[crayon-53b26bad81e7b941027731/]
Para crear triángulos con CSS, se hace uso de la propiedad «border». En primer lugar, la altura y la anchura del respectivo elemento HTML se pone a cero. A continuación, el ancho del marco de dos lados opuestos recibirán una anchura transparente y el otro lado se establece con un ancho de color:
[crayon-53b26bad81e85106626067/]
Dado que el elemento en sí no tiene anchura ni altura, el marco está representado exclusivamente. Se puede representar de esta manera diferentes triángulos:
Las figuras complejas constan de varias formas geométricas. Una estrella se puede realizar, por ejemplo, con dos triángulos superpuestos. Para esto no es necesario crear dos elementos HTML, se puede utilizar el pseudo-elemento «:after»:
[crayon-53b26bad81e8e748076973/]
Al principal elemento HTML se le asigna un triángulo apuntando hacia arriba. El pseudo-elemento «:after» le asigna un triángulo con la punta hacia abajo. Dado que el pseudo-elemento no tiene contenido, se le asigna a la propiedad de «contenido» una cadena de caracteres vacía. Además, el pseudo-elemento se coloca en el primer elemento absolutamente.
El corazón también se compone de dos elementos, que se superponen. El elemento HTML actual permanece sin cambios. Los dos elementos del corazón son creados con los pseudo-elementos «:before» y «:after».
Primeramente se crean dos rectángulos idénticos con la parte superior redondeada. El semicírculo se crea con «border-radius». Posteriormente, el elemento se hace girar por 45 grados y se posiciona.
[the_ad id=»4531″]
Por último, el segundo rectángulo se hace girar por -45 grados en lugar de 45 grados y se coloca. Así, los dos rectángulos son uno encima de otro de manera que forman el corazón:
[crayon-53b26bad81e98337890312/]
¿Utilizas CSS para crear objetos como estos? ¿Conoces más figuras geométricas que pueden ser realizadas con CSS?
