2.7 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78a6367417b2b2512add | Criar um desenho usando CSS | 0 | https://scrimba.com/c/cEDWPs6 | 301048 | create-a-graphic-using-css |
--description--
Ao manipular diferentes seletores e propriedades, você pode criar formas interessantes. Uma das mais fáceis de criar é a forma de lua crescente. Neste desafio, você precisa trabalhar com a propriedade box-shadow
que define a sombra de um elemento, junto da propriedade border-radius
que controla o arredondamento dos cantos do elemento.
Você criará um objeto redondo e transparente com uma sombra nítida ligeiramente deslocada para o lado - a sombra será a forma de lua.
Para criar um objeto redondo, a propriedade border-radius
deve ter um valor de 50%.
Você deve se lembrar de um desafio anterior que a propriedade box-shadow
recebe valores para o eixo horizontal (offset-x
), eixo vertical (offset-y
), blur-radius
, spread-radius
e um valor de cor, nessa ordem. Os valores blur-radius
e spread-radius
são opcionais.
--instructions--
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade background-color
para transparent
e, em seguida, defina a propriedade border-radius
para 50% para fazer a forma circular. Finalmente, altere a propriedade box-shadow
e defina o offset-x
para 25px, o offset-y
para 10px, blur-radius
para 0, spread-radius
para 0 e cor para azul (blue
).
--hints--
A propriedade background-color
deve ter o valor de transparent
.
assert(code.match(/background-color:\s*?transparent;/gi));
A propriedade border-radius
deve ter o valor de 50%
.
assert(code.match(/border-radius:\s*?50%;/gi));
A propriedade box-shadow
deve receber 25px para o eixo horizontal (offset-x
), 10px para o eixo vertical (offset-y
), 0 para blur-radius
, 0 para spread-radius
e, finalmente, azul (blue
) para a cor.
assert(
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
);
--seed--
--seed-contents--
<style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 0px;
box-shadow: 25px 10px 10px 10px green;
}
</style>
<div class="center"></div>
--solutions--
<style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0 0 blue;
}
</style>
<div class="center"></div>