CSS3 eleva la flexibilidad de lo que podemos diseñar en nuestros sitios web utilizando solo HTML y CSS. Podemos encontrar ejemplos en la web de toda clase de elementos sorprendentes como animaciones completas en CSS, ejemplos alucinantes con el canvas de HTML... Pero no hace falta que nos vayamos tan lejos, de hecho, a pesar de parecer simple, esto requiere de códigos super complejos que, de ser sinceros, a veces escapan a mi entendimiento.
En su lugar, vamos a crear algo mucho más simple para ayudarte a entender las formas y los posicionamientos de CSS en primer lugar, antes de que te aventures a diseños más avanzados. Hoy nos hemos levantado románticos y hemos dicho, ¿por qué no crear la silueta de un corazón para ilustrar este ejemplo? No nos ha parecido mala idea y, es por eso que aquí tienes un artículo sobre cómo crear corazones con CSS y nada más.
Lo básico
Básicamente, podemos crear una forma compleja uniendo una o más formas básicas, como rectángulos y círculos. Si echamos un vistazo a la silueta del típico corazón veremos que está compuesto de dos círculos y un rectángulo combinados. Los elementos HTML esencialmente son o rectángulos o cuadrados. Gracias a la propiedad border-radius de CSS3 podemos transformar un rectángulo en un círculo de forma sencilla.
Comienza añadiendo un elemento div como base de nuestro corazón.
<div class="heart-shape"></div>
Lo siguiente es crear un cuadrado especificando igual el ancho y el alto. Elige el color de fondo que quieras...
.heart-shape{
position: relative;
width: 200px;
height: 200px;
background-color: rgba(250,184,66, 0.8);
}
Ahora, haremos los círculos.
En lugar de añadir más elementos, vamos a hacer uso de los pseudo elementos :before y :after. Primero establecemos el pseudo elemento :before como nuestro primer círculo. Ahora crearemos un cuadrado de igual anchura y altura que el div que hicimos anteriormente. A continuación, lo transformamos en un círculo, dándole un border-radius de un 50% y lo ponemos en el lado izquierdo del cuadrado.
.heart-shape:before{
position: absolute;
bottom: 0px;
left: -100px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}
Junto con el cuadrado obtendremos un resultado tal que así:
Una vez que tenemos esto, creamos el segundo círculo con el pseudo elemento :after con los mismos estilos que el primer círculo que hemos creado. Después, lo colocamos en la parte superior del cuadrado.
.heart-shape:after{
position: absolute;
top: -100px;
right: 0px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}
El resultado si vas siguiendo todos los pasos, sería el siguiente:
Podemos agrupar estos dos estilos agrupando los selectores de los pseudo elementos de esta manera
.heart-shape:before,
.heart-shape:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}
.heart-shape:before{
bottom: 0px;
left: -100px;
}
.heart-shape:after{
top: -100px;
right: 0px;
}
¡Tachán! Ya tenemos nuestro corazón, pero no en la posición adecuada. Para colocarlo vamos a utilizar las transformaciones de CSS3.
Podemos aplicar transformaciones a los elementos principales de las formas, es decir, al cuadrado que hemos creado antes. Cuando aplicamos la transformación, el pseudo-elemento cambiará automáticamente su posición tras el elemento principal.
Vamos a rotar el corazón para que se vea “de pie”
.heart-shape{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Y así es como nuestro debería de aparecer.
El resultado
El código completo para hacer un corazón sería el siguiente. El HTML sería:
<div class="heart-shape"></div>
Y nuestro CSS luciría tal que así:
.heart-shape{
position: relative;
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: rgba(250,184,66, 1);
}
.heart-shape:before,
.heart-shape:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 1);
}
.heart-shape:before{
bottom: 0px;
left: -100px;
}
.heart-shape:after{
top: -100px;
right: 0px;
}
Ahora que tenemos un corazón perfecto, podemos reemplazar su color por otro más representativo (como un rojo o un rosa palo) con facilidad. El único inconveniente de todo esto es que no podemos agregarle un borde a la forma ya que es una sucesión de elementos apilados. Añadir un borde ahrá que tu corazón se vea raro, muy raro.
Con CSS3 crear formas, como la que hemos hecho hoy, es factible. La propiedad border-radius nos permite convertir elementos, o pseudo elementos, en un círculo. Mediante las transformaciones de CSS3, podemos girar o mover las coordenadas de un objeto con suma facilidad.
Solamente estás limitado por tu creatividad y por tu imaginación así que, ¡manos a la obra!
Fuente: hongkiat.com