Como criar uma forma de coração com CSS
CSS3 eleva a viabilidade do que podemos construir em sites usando apenas HTML e CSS. Você pode encontrar exemplos incríveis que já apresentamos anteriormente. Mas não vamos ficar muito à frente de nós mesmos, um projeto complicado vai precisar de códigos que possam lhe causar dor de cabeça.
Em vez disso, vamos criar algo simples para ajudá-lo Entenda formas e posicionamento com CSS primeiro, antes de se aventurar em projetos mais avançados. Já que o dia dos namorados está chegando, vamos criar um formato de coração usando HTML e CSS.
O básico
Basicamente, podemos criar uma nova forma unindo uma ou mais formas básicas, como retângulos e círculos. Se examinarmos uma forma de coração, podemos descobrir que ela é composta de dois círculos e um retângulo combinados. Elementos HTML são essencialmente um quadrado ou retângulo. Graças ao raio de borda CSS3, podemos transformar um retângulo em um círculo facilmente.
Comece adicionando um Então, fazemos um quadrado especificando a largura e a altura igualmente. Escolha uma cor de fundo que você goste. Em seguida, faremos os círculos. Em vez de adicionar novos elementos, faremos uso dos pseudo-elementos, Juntamente com a praça, teremos um resultado como este: Depois disso, criamos o segundo círculo com o pseudo-elemento Os resultados são os seguintes: Podemos combinar esses dois estilos agrupando os seletores de pseudoelemento da seguinte maneira: Ta-da! Nós temos uma forma de coração, embora ainda não esteja na direção certa. Para endireitá-lo, usaremos o CSS3 Transformation. Transformação pode ser dada aos principais elementos da forma; aqui, isso significa o quadrado. Quando transformado, o pseudoelemento mudará automaticamente sua posição seguindo o elemento principal. Aqui vamos girar o coração para que seja visto “de pé”. E é assim que nosso coração parece agora. O código completo da forma do coração acima é o seguinte, em HTML: E no nosso CSS, será assim: Observe que agora definimos o canal alfa do Agora que temos uma forma de coração perfeita, podemos substituir o fundo para outra cor (por exemplo, rosa ou vermelho) com facilidade. A única desvantagem aqui é que nós não foi possível adicionar uma borda à forma devido aos elementos empilhados. Adicionando uma linha de fronteira fará o coração parecer estranho. Com o CSS3, criar uma forma como uma forma de Coração agora é facilmente realizável. A propriedade border-radius nos permite fazer elementos ou até mesmo um pseudo-elemento em um círculo. Com a transformação CSS3, podemos girar ou mover as coordenadas do objeto com facilidade. Você está limitado apenas pela sua criatividade e imaginação!
.coração-forma posição: relativa; largura: 200px; altura: 200 px; cor de fundo: rgba (250, 184,66, 0,8);
:antes e :depois de. Nós primeiro definimos :antes pseudo-elementos como nosso primeiro círculo. Nós fazemos um quadrado com tamanho igual na largura e altura, assim como fizemos com o div. Em seguida, transformamos em um círculo dando-lhe um raio de 50% e o colocamos no lado esquerdo do quadrado. .coração-forma: antes posição: absoluta; fundo: 0px; esquerda: -100px; largura: 200px; altura: 200 px; conteúdo: "; -webkit-border-radius: 50%; -moz-fronteira-raio: 50%; -o-fronteira-raio: 50%; fronteira-raio: 50%; cor de fundo: rgba (250,184,66 0.8);
:depois de com os mesmos estilos que o primeiro círculo que criamos. Então, também posicionamos no topo da praça. .heart-shape: depois de position: absolute; topo: -100px; direita: 0px; largura: 200px; altura: 200 px; conteúdo: "; -webkit-border-radius: 50%; -moz-fronteira-raio: 50%; -o-fronteira-raio: 50%; fronteira-raio: 50%; cor de fundo: rgba (250,184,66 0.8);
.coração-forma: antes, em forma de coração: após posição: absoluta; largura: 200px; altura: 200 px; conteúdo: "; -webkit-border-radius: 50%; -moz-fronteira-raio: 50%; -o-fronteira-raio: 50%; fronteira-raio: 50%; cor de fundo: rgba (250,184,66 , 0.8); .heart-shape: antes bottom: 0px; left: -100px; .heart-shape: após top: -100px; right: 0px;
.forma de coração -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotaciona (45deg); -o-transformar: girar (45deg); transformar: girar (45deg);
O resultado:
.coração-forma posição: relativa; largura: 200px; altura: 200 px; -webkit-transform: rotaciona (45deg); -moz-transform: rotate (45deg); -ms-transform: rotaciona (45deg); -o-transformar: girar (45deg); transformar: girar (45deg); cor de fundo: rgba (250, 184, 66, 1); .heart-shape: antes, .heart-shape: depois de position: absolute; largura: 200px; altura: 200 px; conteúdo: "; -webkit-border-radius: 50%; -moz-fronteira-raio: 50%; -o-fronteira-raio: 50%; fronteira-raio: 50%; cor de fundo: rgba (250,184,66 , 1); .heart-shape: antes de bottom: 0px; left: -100px; .heart-shape: depois de top: -100px; right: 0px;
rgba (250.184,66, 1) no fundo para 1 para remover a transparência. Agora é isso que o nosso coração parece.
Conclusão
