42

3 formas de hacer un corazón con CSS

15625Puntos

hace 3 años

Curso de Desarrollo Web Online 2016
Curso de Desarrollo Web Online 2016

Curso de Desarrollo Web Online 2016

Aprende desde cero a crear y maquetar sitios web. Con HTML5 y CSS3 crea la página web de tu producto e inicia tu carrera para ser un Frontend profesional.

En esta temporada es posible que quieras agregar un toque de amor a tu sitio web, ¿por qué no hacerlo agregando uno que otro corazón por ahí? Celebra el día de San Valentín aprendiendo 3 formas distintas de hacer un corazón con CSS. A continuación te explico cómo hacerlo.

1. La forma de un corazón con CSS

Puede parecer difícil pero la realidad es que la forma de un corazón está simplemente compuesta por un par de círculos y un cuadrado que rota 45 grados.

image.pngn nuestro código representaremos el cuadrado con un elemento con clase .love y los círculos con los pseudo elementos :before y :after.

<div class="love"></div>

Primero dibujamos el cuadrado:

.love {
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: red;
}

A continuación agregamos las propiedades necesarias para dibujar el par de círculos:

.love:before,
.love:after {
  content: "";
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: red;
}

Y finalmente modificamos la posición de cada una de estas figuras para poder darle forma a nuestro corazón.

.love {
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: red;
  position: relative;
  top: 10rem;
  left: 10rem;
}

.love:before,
.love:after {
  content: "";
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: red;
  position: absolute;
}

.love:before {
  top: 0;
  left: -25px;
}

.love:after {
  top: -25px;
}

Como bonus, haremos que nuestro corazón tenga una animación de latido. Lo haremos con keyframes y escalando nuestro corazón de 1 a 2 infinitamente.

.love {
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: red;
  position: relative;
  top: 10rem;
  left: 10rem;
  animation: beating 2s ease infinite;
}

@keyframes beating {
  0% {
  	transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(2);
  }
  100% {
  	transform: rotate(45deg) scale(1);
  }
}

2. Utiliza una fuente de iconos

Si estás buscando una alternativa menos elaborada, puedes optar por la opción de usar una fuente de iconos que contenga un corazón. Intenta con Font Awesome, ahí encontrarás lo que necesitas.

Captura de pantalla 2018-02-14 a la(s) 16.23.07.png)

3. Hazlo con código ASCII

Por ultimo, la forma más sencilla de lograr nuestro objetivo es implemente dejando que la web haga el trabajo por nosotros. Es tan fácil como poner el código del símbolo de corazón (&#9829) en el contenido de nuestro elemento.

.love {
	content: '\2665';
	color: red;
	font-size: 10rem;
}
Captura de pantalla 2018-02-14 a la(s) 16.36.57.png

Seguramente hay muchas formas más de lograr este objetivo, estaré atenta a leer sus ideas en los comentarios. ¡Feliz San Valentín!

Curso de Desarrollo Web Online 2016
Curso de Desarrollo Web Online 2016

Curso de Desarrollo Web Online 2016

Aprende desde cero a crear y maquetar sitios web. Con HTML5 y CSS3 crea la página web de tu producto e inicia tu carrera para ser un Frontend profesional.
Fannytaviles
Fannytaviles
fannytaviles

15625Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
17093Puntos
          ******       ******
        **********   **********
      ************* *************
     *****************************
     *****************************
     *****************************
      ***************************
        ***********************
          *******************
            ***************
              ***********
                *******
                  ***
                   *
6
32933Puntos

Esto lo aprendi en el curso de animaciones con leonidas esteban!

Corazon.png

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Twitter Like</title><style>body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .like{
      background-color: white;
      border: 0;
      cursor: pointer;
      /*width: 100px;
      height: 100px;*/width: 50px;
      height: 50px;
      background-image: url('corazon.png');
      outline: 0;
      background-size: 1450px50px;
    }
    .like.is-liked{
      animation-name: like;
      animation-duration: .8s;
      animation-timing-function: steps(28);
      animation-fill-mode: forwards;
    }
    @keyframes like {
      0%{
       background-position: 00;
      }
      100%{
        /*background-position: -2800px 0;*//*background-position: -1450px 0;*/background-position: right;
      }
    }
  </style></head><body><divclass="tweet-box"><buttonclass="like"id="like"></button></div><script>const $like = document.getElementById('like');
/*    $like.addEventListener('evento', que hace el evento)*/
    $like.addEventListener('click', (event) => {
  /*console.log(event);*/
    $like.classList.toggle('is-liked')
})
  </script></body></html>```
1
25051Puntos

No recuerdo exactamente en clase fue, un platzero compartió este enlace con muchas formas css.

1

<!DOCTYPE html>
<htmllang=“en”>
<head>
<metacharset=“UTF-8”>
<metaname="viewport"content=“width=device-width, initial-scale=1.0”>
<metahttp-equiv="X-UA-Compatible"content=“ie=edge”>
<title>Twitter Like</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.like{
background-color: white;
border: 0;
cursor: pointer;
/width: 100px;
height: 100px;
/
width: 50px;
height: 50px;
background-image: url(‘corazon.png’);
outline: 0;
background-size: 1450px50px;
}
.like.is-liked{
animation-name: like;
animation-duration: .8s;
animation-timing-function: steps(28);
animation-fill-mode: forwards;
}
@keyframes like {
0%{
background-position: 00;
}
100%{
/background-position: -2800px 0;/
/background-position: -1450px 0;/
background-position: right;
}
}
</style>
</head>
<body>
<divclass=“tweet-box”>
<buttonclass="like"id=“like”>
</button>
</div>
<script>
const $like = document.getElementById(‘like’);
/* $like.addEventListener(‘evento’, que hace el evento)*/
$like.addEventListener(‘click’, (event) => {
/console.log(event);/
$like.classList.toggle(‘is-liked’)
})
</script>
</body>
</html>```

![](<code>
)```
0
8095Puntos

Y cómo hacemos uno roto para los hermanos caídos el 14 de feb? :p