Les presento un efecto de letra diseñado con html y css. les dejo el codigo para que lo hagan es ideal para paginas web y sistemas. funciona muy bien solo tienen que llamar los archivos igual al nombre que le he colocado "efecto1.css" para el css y fonts.css para la fuente tambien pueden encontrar la libreria de la fuente.
<pre class="brush: html">
<!----Elaborado por:Issac Ron--->
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Efecto 1 de letras</title>
<link rel="stylesheet" href="efecto1.css">
<link rel="stylesheet" href="fonts.css">
</head>
<body>
<div class="yokeissa-text">
<div>Yokeissa</div>
<div class="sub-text">Front-End Developer</div>
</div>
</body>
</html>A continuacion el estilo que es el css:
<pre class="brush: css">
body::before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: url(fondo.png) no-repeat center center fixed;
background-size: cover;
z-index: -1;
}
.yokeissa-text {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: url(fondo.png) no-repeat center center fixed;
background-size: cover;
z-index: -1;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
color: #fff;
mix-blend-mode: darken;
text-shadow: 0 0 0.05em rgba(0, 0, 0, 0.2),
-0.025em 0.025em 0.1em #000,
-0.05em 0.05em 0.1em #000,
-0.1em 0.1em 0.3em #000,
-0.1em 0.1em 0.5em rgba(0, 0, 0, 0.5);
translate: translate3d(0, 0, 0);
font-family: 'Muli', sans-serif;
font-size: 12vw;
line-height: 1;
font-weight: 900;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
.sub-text {
font-size: 0.475em;
}</pre>
La libreria de la fuente .css
<pre class="brush: css">
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/muli/v20/7Aulp_0qiz-aVz7u3PJLcUMYOFlnl0k40eiNxw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/muli/v20/7Aulp_0qiz-aVz7u3PJLcUMYOFlnl0k50eiNxw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/muli/v20/7Aulp_0qiz-aVz7u3PJLcUMYOFlnl0k30eg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</pre>
No hay comentarios:
Publicar un comentario