---
id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS
challengeType: 0
videoUrl: ''
localeTitle: Crear un gráfico utilizando CSS
---
## Description
Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad box-shadow
que establece la sombra de un elemento, junto con la propiedad border-radius
que controla la redondez de las esquinas del elemento. Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. Para crear un objeto redondo, la propiedad border-radius
debe establecerse en un valor del 50%. Puede recordar de un desafío anterior que la propiedad box-shadow
toma valores para offset-x
, offset-y
, blur-radius
, spread-radius
y un valor de color en ese orden. Los valores de spread-radius
blur-radius
spread-radius
son opcionales.
## Instructions
Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el background-color
a transparente, luego establezca la propiedad de border-radius
en 50% para hacer la forma circular. Finalmente, cambie la propiedad box-shadow
para establecer offset-x
en 25px, offset-y
en 10px, blur-radius
en 0, spread-radius
en 0 y color en azul.
## Tests
```yml
tests:
- text: El valor de la propiedad de background-color
debe establecerse en transparent
.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color
property should be set to transparent
.");'
- text: El valor de la propiedad border-radius
debe establecer en 50%
.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius
property should be set to 50%
.");'
- text: 'El valor de la propiedad box-shadow
debe establecer en 25px para offset-x
, 10px para offset-y
, 0 para blur-radius
, 0 para spread-radius
y finalmente azul para el color.'
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
```