4.4 KiB
4.4 KiB
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
::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 {Para que os pseudo-elementos
conteúdo: "";
cor de fundo: amarelo;
raio de fronteira: 25%;
posição: absoluta;
altura: 50 px;
largura: 70px;
top: -50px;
esquerda: 5px;
}
::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
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