4.0 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78a6367417b2b2512ade | Crea una forma más compleja usando CSS y HTML | 0 | https://scrimba.com/c/cPpz4fr | 301050 | create-a-more-complex-shape-using-css-and-html |
--description--
Una de las formas más populares en el mundo es la forma del corazón, y en este desafío crearás una usando CSS puro. Pero primero, debes comprender los pseudo-elements ::before
y ::after
. Estos pseudo-elements se utilizan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, se utiliza un pseudo-elemento ::before
para agregar un rectángulo a un elemento con la clase heart
:
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
Para que los pseudo-elements ::before
y ::after
funcionen correctamente, deben tener una propiedad content
definida. Esta propiedad generalmente se usa para agregar cosas como una foto o texto al elemento seleccionado. Cuando se utilizan los pseudo-elements ::before
y ::after
para crear formas, la propiedad content
sigue siendo necesaria, pero se establece en una cadena vacía. En el ejemplo anterior, el elemento con la clase de heart
tiene un pseudo-element ::before
que produce un rectángulo amarillo con una altura y un ancho de 50px
y 70px
, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su 25% border-radius
y está posicionado absolutamente a 5px
desde la izquierda y 50px
por encima de la parte superior del elemento.
--instructions--
Transforma el elemento en la pantalla en un corazón. En el selector heart::after
, cambia background-color
a pink
y border-radius
a 50%.
A continuación, apunta el elemento con la clase heart
(solo heart
) y llena la propiedad transform
. Utiliza la función rotate()
con -45 grados.
Finalmente, en el selector heart::before
, establece su propiedad content
en una cadena vacía.
--hints--
La propiedad background-color
del selector heart::after
debe ser pink
.
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
assert(
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
);
El border-radius
del selector heart::after
debe ser 50%.
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
La propiedad transform
para la clase heart
debe usar una función rotate()
configurada en -45 grados.
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
El content
del selector heart::before
debe ser una cadena vacía.
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
--seed--
--seed-contents--
<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>
--solutions--
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
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>