Cómo crear forma de corazón con CSS
CSS3 eleva la viabilidad de lo que podemos construir en sitios web usando solo HTML y CSS. Puedes encontrar ejemplos asombrosos que hemos presentado anteriormente. Pero no nos adelantemos demasiado, un diseño complicado necesitará códigos que pueden causarle un dolor de cabeza.
En su lugar, vamos a crear algo simple para ayudarte. Entender las formas y el posicionamiento con CSS primero., Antes de aventurarse a diseños más avanzados. Ya que el día de San Valentín está a la vuelta de la esquina, vamos a crear una forma de corazón usando HTML y CSS.
Los basicos
Básicamente, podemos crear una nueva forma uniendo una o más formas básicas, como rectángulos y círculos. Si examinamos una forma de corazón podemos encontrar que está hecha de Dos círculos y un rectángulo combinados.. Los elementos HTML son esencialmente un cuadrado o un rectángulo. Gracias al radio de borde CSS3 podemos transformar un rectángulo en un círculo fácilmente.
Comience agregando un Luego, lo convertimos en un cuadrado especificando el ancho y la altura por igual. Elige un color de fondo que te guste. A continuación, haremos los círculos.. En lugar de agregar nuevos elementos, haremos uso de los pseudo-elementos., Junto con la plaza tendremos un resultado como este: Después de eso, creamos el segundo círculo con el pseudo-elemento. Los resultados son los siguientes: Podemos combinar estos dos mismos estilos agrupando los selectores de pseudo-elementos de la siguiente manera: ¡Ta-da! Tenemos forma de corazón, aunque todavía no está en la dirección correcta. Para enderezarlo, usaremos la transformación CSS3.. La transformación puede darse a los elementos principales de la forma; Aquí, eso significa la plaza. Cuando se transforme, el pseudo-elemento cambiará automáticamente su posición siguiendo el elemento principal. Aquí rotaremos el corazón para que se vea. “en pie”. Y así es como se ve nuestro corazón ahora.. El código completo de la forma del corazón de arriba es el siguiente, en HTML: Y en nuestro CSS, será así: Note que ahora configuramos el canal alfa de la Ahora que tenemos una forma de corazón perfecta, podemos reemplazar el fondo a otro color (por ejemplo, rosa o rojo) con facilidad. El único inconveniente aquí es que nosotros no se pudo agregar un borde A la forma debida a los elementos apilados. Agregar una línea de borde hará que el corazón se vea raro. Con CSS3 crear una forma como una forma de corazón ahora es fácil de hacer. La propiedad border-radius nos permite Hacer elementos o incluso un pseudo-elemento en un círculo. Con la transformación CSS3, podemos girar o mover las coordenadas del objeto con facilidad. Estás limitado solo por tu creatividad e imaginación.!
.forma de corazón posición: relativo; ancho: 200px; altura: 200px; color de fondo: rgba (250,184,66, 0,8);
:antes de y :después. Primero establecemos el :antes de Pseudo-elementos como nuestro primer círculo. Lo convertimos en un cuadrado con el mismo tamaño en el ancho y en la altura, tal como hicimos con el div. Luego lo transformamos en un círculo dándole un radio de borde del 50% y lo colocamos en el lado izquierdo del cuadrado.. .forma de corazón: antes de posición: absoluta; abajo: 0px; izquierda: -100px; ancho: 200px; altura: 200px; contenido: "; -webkit-border-radio: 50%; -moz-border-radio: 50%; -o-border-radio: 50%; border-radio: 50%; background-color: rgba (250,184,66 , 0.8);
:después Con los mismos estilos que el primer círculo que creamos. Luego, también lo posicionamos en la parte superior del cuadrado.. .forma de corazón: después de posición: absoluta; arriba: -100px; derecha: 0px; ancho: 200px; altura: 200px; contenido: "; -webkit-border-radio: 50%; -moz-border-radio: 50%; -o-border-radio: 50%; border-radio: 50%; background-color: rgba (250,184,66 , 0.8);
.forma de corazón: antes,. forma de corazón: después de posición: absoluta; ancho: 200px; altura: 200px; contenido: "; -webkit-border-radio: 50%; -moz-border-radio: 50%; -o-border-radio: 50%; border-radio: 50%; background-color: rgba (250,184,66 , 0.8); .heart-shape: antes de parte inferior: 0px; izquierda: -100px; .heart-shape: después de arriba: -100px; derecha: 0px;
.en forma de corazón -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotar (45deg); -o-transformar: rotar (45deg); transformar: girar (45deg);
El resultado:
.forma de corazón posición: relativo; ancho: 200px; altura: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotar (45deg); -o-transformar: rotar (45deg); transformar: girar (45deg); color de fondo: rgba (250,184,66, 1); .heart-shape: antes, .heart-shape: after posición: absoluta; ancho: 200px; altura: 200px; contenido: "; -webkit-border-radio: 50%; -moz-border-radio: 50%; -o-border-radio: 50%; border-radio: 50%; background-color: rgba (250,184,66 , 1); .heart-shape: antes de parte inferior: 0px; izquierda: -100px; .heart-shape: después de arriba: -100px; derecha: 0px;
rgba (250,184,66, 1) en el fondo para 1 Para eliminar la transparencia. Ahora esto es lo que se ve nuestro corazón.
Conclusión
