freeCodeCamp

4.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a6367417b2b2512ade	Create a More Complex Shape Using CSS and HTML	0		Crie uma forma mais complexa usando CSS e HTML

Description

Uma das formas mais populares do mundo é a forma do coração, e neste desafio você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos ::before e ::after. Esses pseudo-elementos são usados para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudoelemento ::before é usado para adicionar um retângulo a um elemento com o heart da classe:

.heart :: before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

Para que os pseudo-elementos ::before e ::after funcionem corretamente, eles devem ter uma propriedade de content definida. Essa propriedade geralmente é usada para adicionar itens como uma foto ou texto ao elemento selecionado. Quando os pseudoelementos ::before e ::after são usados para criar formas, a propriedade content ainda é necessária, mas é definida como uma string vazia. No exemplo acima, o elemento com a classe heart possui um pseudoelemento ::before que produz um retângulo amarelo com height e width de 50px e 70px, respectivamente. Este retângulo tem cantos arredondados devido ao seu raio de 25% e está posicionado absolutamente a 5px da left e 50px acima da top do elemento.

Instructions

Transforme o elemento na tela em um coração. No heart::after selector, mude a background-color para pink e o border-radius para 50%. Em seguida, segmente o elemento com o heart da classe (apenas heart ) e preencha a propriedade transform . Use a função rotate() com -45 graus. ( rotate() funciona da mesma forma que skewX() e skewY() ). Finalmente, no heart::before selector, defina sua propriedade content para uma string vazia.

Tests

tests:
  - text: 'A propriedade <code>background-color</code> do <code>heart::after</code> selector deve ser rosa.'
    testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
  - text: 'O <code>border-radius</code> de <code>border-radius</code> do <code>heart::after</code> seletor deve ser de 50%.'
    testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
  - text: A propriedade <code>transform</code> para a classe <code>heart</code> deve usar uma função <code>rotate()</code> definida como -45 graus.
    testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
  - text: 'O <code>content</code> do <code>heart::before</code> selector deve ser uma string vazia.'
    testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'

Challenge Seed

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: ;
}
.heart::after {
  background-color: blue;
  content: "";
  border-radius: 25%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

Solution

// solution required

4.5 KiB Raw Blame History