yokeissa: junio 2020

martes, 16 de junio de 2020

Menú Deslizable

Los 10 primeros que dejen su correo en el comentario, les estaré enviando este menú ideal para que desarrollen su pagina web o sistema!!!

sábado, 13 de junio de 2020

Texto Efecto Luminoso

Efecto de Texto Luminoso elaborado con HTML y CSS, muy sencillo espero que se animen a hacerlo!

<pre class="brush: html">

<!----Elaborado por:Issac Ron--->
<!DOCTYPE html>
<html>
    <head>
        <title>Animacion 1</title>
			<link type="text/css" rel="stylesheet" href="text1.css"/>
    </head>
    <body>
        <span class="s1 yokeissa">Yokeissa</span>
        <span class="s2 yokeissa">Yokeissa</span>
		
    </body>
</html>

A continuacion el estilo que es el css:

<pre class="brush: css">

/*******Elaborado por Ron Issac********************/

body {
    position:relative;
    width:98%;
    z-index:-1;                         /**********DIMENSIONES DE LA PANTALLA***********/
    height:98vh;
    background-image:url("images.jpg"); /**********EL FONDO DE LA PANTALLA**************/
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;              /**********CARACTERISTICAS DEL FONDO***********/
    list-style:none;
    text-align: center; 
}

.yokeissa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    font-size: 355px; 
    color: #4fe9ee;
}

.s1 {
    z-index: 1;
    text-shadow: 4px 4px 10px #faf7f7,
                 5px 5px 75px #4fe9ee,/****LA PRIMERA CAPA DE LETRA*****/
                 -5px -5px 75px #4fe9ee;
    animation: text-shadow 3s alternate infinite;
}

.s2 {
    font-size: 345px; /****LA SEGUNDA CAPA DE LETRA*****/
    color: #000000;
    z-index: 2;
}

@keyframes text-shadow {  /****SOMBRAS...*****/
    from {
        text-shadow: 0px 0px 0px #4fe9ee,
                     0px 0px 0px #4fe9ee,
                     0px 0px 0px #4fe9ee;
    }
    to {
        text-shadow: 4px 4px 10px #000000,
                     5px 5px 75px #4fe9ee,
                     -5px -5px 75px #4fe9ee;
    }
}

</pre>

Texto Efecto

 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>