Este diseño ha sido extraído desde CodePen
Código HTML y el CSS de este diseño en capas
Roses
Este sería el código HTML base
<div>Roses</div>
Así se le daría los estilos CSS directo con
style
<div style="
font-size: 10rem;
text-align: center;
height: 40vh;
line-height: 40vh;
color: #fcedd8;
background: #e24d5c;
font-family: 'Niconne', cursive;
font-weight: 700;
text-shadow: 3px 3px 0px #eb452b, 6px 6px 0px #efa032, 9px 9px 0px #46b59b, 12px 12px 0px #017e7f, 15px 15px 0px #052939, 18px 18px 0px #c11a2b, 21px 21px 0px #c11a2b, 24px 24px 0px #c11a2b, 27px 27px 0px #c11a2b;
">Roses</div>
element.style {
font-size: 10rem;
text-align: center;
height: 40vh; /*Se aplica la unidad "vh" (Viewport height) en este caso para adaptarlo a diferentes pantallas*/
line-height: 40vh;
color: #fcedd8;
background: #e24d5c;
font-family: 'Niconne', cursive;
font-weight: 700;
text-shadow: 3px 3px 0px #eb452b,
6px 6px 0px #efa032,
9px 9px 0px #46b59b,
12px 12px 0px #017e7f,
15px 15px 0px #052939,
18px 18px 0px #c11a2b,
21px 21px 0px #c11a2b,
24px 24px 0px #c11a2b,
27px 27px 0px #c11a2b;
}
NOTA: Visitar DevCode
DevCode Unidades VH VW de CCS3
Unidades VH y VW de CSS3
En este tutorial vamos a conocer y veremos un ejemplo con las unidades vh y vw, que introdujo la versión 3 de CSS... Leer más» para más información sobre las unidades vh y vw en CSS3
