---
id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS
challengeType: 0
videoUrl: ''
localeTitle: Crie um gráfico usando CSS
---
## Description
Ao manipular diferentes seletores e propriedades, você pode criar formas interessantes. Um dos mais fáceis de tentar é uma forma de lua crescente. Para este desafio, você precisa trabalhar com a propriedade box-shadow
que define a sombra de um elemento, juntamente com a propriedade border-radius
que controla a redondeza 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 da lua que você vê. Para criar um objeto redondo, a propriedade border-radius
deve ser definida para um valor de 50%. Você pode lembrar de um desafio anterior que a propriedade box-shadow
usa valores para offset-x
, offset-y
, blur-radius
spread-radius
, blur-radius
spread-radius
e um valor de cor nessa ordem. Os valores de spread-radius
e blur-radius
spread-radius
são opcionais.
## Instructions
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a background-color
para transparente e defina a propriedade border-radius
para 50% para criar a forma circular. Finalmente, altere a propriedade box-shadow
para definir o offset-x
como 25px, o offset-y
como 10px, blur-radius
como 0, spread-radius
como 0 e cor como azul.
## Tests
```yml
tests:
- text: O valor da propriedade background-color
deve ser definido como transparent
.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color
property should be set to transparent
.");'
- text: O valor da propriedade border-radius
deve ser definido como 50%
.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius
property should be set to 50%
.");'
- text: 'O valor da propriedade box-shadow
deve ser definido como 25px para offset-x
, 10px para offset-y
, 0 para blur-radius
, 0 para spread-radius
e finalmente blue para a cor.'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.");'
```
## Challenge Seed
## Solution
```js
// solution required
```