Prueba de diseño del header

Developer
Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Size
6,577 Kb
Views
12,144
  1. Prueba de diseño del header Previews
  2. Prueba de diseño del header HTML Codes
  3. Prueba de diseño del header CSS Codes

How do I make an prueba de diseño del header?

What is a prueba de diseño del header? How do you make a prueba de diseño del header? This script and codes were developed by Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) on 18 October 2022, Tuesday.

Prueba de diseño del header Previews
IQ Test

Prueba de diseño del header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prueba de diseño del header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Esto debe ir en el head-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://g3k.co/font/rawen.css' rel='stylesheet' type='text/css'>
<link href='http://g3k.co/font/mix-rawen-g3k/g3k.css' rel='stylesheet' type='text/css'>
<!--INPUTS QUE SE ELIMINARAN CUANDO SE USE JQUERY-->
<input type="checkbox" id="ctrl-menu"/>
<input type="checkbox" id="ctrl-config"/> <input type="radio" name="letra" id="ctrl-lang"/> <input type="radio" name="letra" id="ctrl-letra-1"/> <input type="radio" name="letra" id="ctrl-letra-2"/> <input type="radio" name="letra" id="ctrl-letra-3"/> <input type="radio" name="resolucion" id="ctrl-monitor"/> <input type="radio" name="resolucion" id="ctrl-laptop"/> <input type="radio" name="resolucion" id="ctrl-pad-h"/> <input type="radio" name="resolucion" id="ctrl-pad-v"/> <input type="radio" name="resolucion" id="ctrl-phone-h"/> <input type="radio" name="resolucion" id="ctrl-phone-v"/>
<!--La maquetación empieza aquí-->
<div class="contenedor">
<nav> <label for="ctrl-menu"><b>menu</b></label> <label for="ctrl-config"><b>Configurar</b></label> <ul class="menu">	<li><a href="#filosofia">Mi Filosofía</a></li>	<li><a href="#portafolio">Portafolio</a></li>	<li class="inicio"><a href="#inicio"><b>G3Kdigital</b></a></li>	<li><a href="#habilidades">Curriculum</a></li> <li><a href="#contacto">Contactame</a></li> </ul>
</nav>
<header> <h1 id="inicio"> <span class="bienvenidos">Bienvenidos sean a</span> <span class="g3k" title="g3kdigital">g3k</span> </h1> <h2>La Dimensión Creativa</h2> <h4 class="frase-cliche">	<span>Hecho con <u>amor</u> <br />y mucho <b>estilo</b> (CSS)</span> </h4> <figure class="ilustracion">	<img src="http://g3k.co/g3k/img/svg/ilustracion-dimension-creativa.svg" alt="Portal G3K" /> </figure>
</header>
<!--Secciones ocultas-->
<section class="config"> <div class="settings"> <h3>Configuración de la pagina</h3> <h5>Cambiar Idioma</h5> <label for="ctrl-lang">Es/En</label> <h5>Tamaño de letra (Parrafos)</h5> <label for="ctrl-letra-1">Normal</label> <label for="ctrl-letra-2">Grande</label> <label for="ctrl-letra-3">Gigante</label> <h5 class="px">Previsualizar Dispositivo</h5> <label for="ctrl-monitor">Monitor</label> <label for="ctrl-laptop">Laptop</label> <label for="ctrl-pad-h">Pad (Horizontal)</label> <label for="ctrl-pad-v">Pad (Vertical)</label> <label for="ctrl-phone-h">Smartphone (Horizontal)</label> <label for="ctrl-phone-v">Smartphone (Vertical)</label> </div>
</section>
</body>
</html>

Prueba de diseño del header - Script Codes CSS Codes

/*=======================
COLORES
=======================*/
colores div::after{content: attr(class)}
colores div{display:inline-block; color: white; padding: 0.5rem;margin-bottom:0.5rem;}
/*FONDOS===============*/
.azul-oscuro,
html, body,
nav,
.frase-cliche span,
.frase-cliche span::before,
.frase-cliche span::after, .filosofia,
.habilidades>header,
.habilidades h5 span, .habilidades h5 .es::before, .habilidades h5 .es::after,
footer,
.settings{	background-color:rgb(0,51,102);	background-image: url('http://g3k.co/g3k/img/ui/color-azul-oscuro.png');}
.azul-medio,
.contenedor>header,.habilidades{	background-color:rgb(0,92,175);}
.azul-claro,
nav label[for*="menu"]{	background-color:rgb(30,144,225);}
.verde-azul{	background-color:rgb(26,164,201);}
.verde-mar{ background-color:rgb(32,178,170);}
.verde-cyan,
nav label[for*="config"]{ background-color:rgb(26,201,142);}
.gris-medio{	background-color:rgb(230,230,230);}
.gris-claro,
.portafolio{	background-color:rgb(240,240,240);	background-image: url('http://g3k.co/g3k/img/ui/color-gris-claro.png');}
.casi-blanco{	background-color:rgb(250,250,250);}
.blanco{	background-color:rgb(255,255,255);}
/*---------------------*/
/*LETRA===============*/
letra-blanco,
.filosofia, .habilidades{ color: white;
}
.letra-azul-medio,
.portafolio{	color: rgb(0,92,175);
}
.letra-verde-mar,
a:visited{ color: rgb(26,164,201);
}
.letra-verde-cyan,
a:link,
nav .menu a:focus, nav .menu a:hover, nav .menu a:active { color: rgb(26,201,142);
}
/*---------------------*/
.contenedor main>section, footer
{ min-height: 50vh;
}
/*------------------------Elementos*/
*,*::after,*::before
{	box-sizing: border-box; padding: 0; margin: 0; -webkit-transition: all ease 0.5s; transition: all ease 0.5s;
}
*::before,*::after
{ display: inline-block;
}
html, body
{ text-align:center; font: 16px/1.5rem "open sans", arial, sans-serif; color: white;
}
a{}
nav, header, main, section, footer
{ position: relative; z-index: 20;
}
img
{	width:100%
}
section:not(.habilidades)>header::before,
section:not(.habilidades)>header::after
{	content: ''; background-size: 100% 100%; background-image: url('http://g3k.co/g3k/img/ui/linea-horizontal-f-blanco.png'); width: 100%; height: 2.5rem;
}
section>header
{ padding: 1rem 0;
}
section>header::before
{ -webkit-transform: scaleX(-1); transform: scaleX(-1);
}
h1, h2, h3, h4, h5, h6
{ font-family: 'rawen', helvetica, arial; font-weight: normal;
}
h1, h2
{
}
h1
{	font-family: /*'rawen-light',*/'rawen', open-sans, arial, sans-serif; font-size: 1.9rem;
}
h2
{ display: inline-block; position: relative; font-size: 1.4rem; line-height: 3rem; padding: 0 1.3rem; letter-spacing: -0.05rem;
}
h3
{ font-size: 2rem; padding: 0.5rem; margin: 1rem; line-height: 2rem;
}
h4
{ padding: 0.3rem; position: relative;
}
h4 .lang.es
{ position: relative;
}
h4 .lang::before,
h4 .lang::after
{ content:''; width: 6rem; height: 2.5rem; position: absolute; right: 110%; -webkit-transform: scaleX(-1); transform: scaleX(-1); will-change: transform, background, height; background-repeat: no-repeat; background-size: 100% 100%; background-image: url('http://g3k.co/g3k/img/ui/grafismo-gradiante.png'); top: -0.5rem;
}
h4 .lang::after
{ right: inherit; left: 110%; -webkit-transform: scaleX(1); transform: scaleX(1);
}
h3, h4
{ font-weight: normal;
}
/*------------------------clases generales*/
.contenedor
{	max-width: 225rem; margin: auto; overflow: hidden;
}
.en
{ position: absolute; left: 150%;
}
input[id*="ctrl"]
{ display: none;
}
/*------------------------clases por seccion*/
/*------------------------
NAV
--------------------------*/
nav
{ z-index: 30; position: fixed; min-height: 1rem; width: 100%; top: 0%; -webkit-filter: drop-shadow(0 0 0.2rem rgba(0,0,0,.3)); filter: drop-shadow(0 0 0.2rem rgba(0,0,0,.3));
}
/*$picos-navegacion*/
nav::after
{ content:''; width: 100%; height: 3rem; position: absolute; z-index: 1; left: 0; top: 97%; will-change: transform, background, height; -webkit-transform: scaleY(-1); transform: scaleY(-1); background-repeat: no-repeat; background-position: -200% 100%, bottom right; background-size: 98% 70%, 100% 70%; background-image: url('http://g3k.co/g3k/img/ui/long-montain-azul.png'), url('http://g3k.co/g3k/img/ui/middle-montain-der.png');
}
/*botones-navegacion*/
nav label[for*="ctrl"]
{ width: 2.5rem; height: 3rem; font-size: 0rem; color: transparent; display: inline-block; position: absolute; z-index: 5; top: 0; cursor: pointer;
}
nav label[for*="menu"]
{ left: 0; }
nav label[for*="config"]
{ right: 0; }
nav label[for*="menu"]:hover
{ background: rgb(30,180,240);
}
nav label[for*="config"]:hover
{ background: rgb(30,230,140);
}
/*$decoracion-boton*/
nav label[for*="config"]::before,
nav label[for*="menu"]::after
{ content: ''; position: absolute; top: 0; border-style: solid; border-width: 1.5rem 1rem; border-color: transparent;
}
nav label[for*="ctrl"]::before
{ right: 100%;
}
nav label[for*="ctrl"]::after
{ left: 100%;
}
nav label[for*="menu"]::before
{ border-right-color: rgb(0,255,140);
}
nav label[for*="menu"]::after
{ border-left-color: rgb(30,144,225);
}
nav label[for*="config"]::before
{ border-right-color: rgb(26,201,142);
}
nav label[for*="config"]:hover::before
{ border-right-color: rgb(30,230,140);
}
nav label[for*="menu"]:hover::after
{ border-left-color: rgb(30,180,240);
}
nav label[for*="config"]::after
{ border-left-color: rgb(26,201,142);
}
/*$iconos navegacion*/
nav label[for*="menu"] b,
nav label[for*="config"] b
{ display: inline-block;
}
/*$icono-menu*/
nav label[for*="menu"] b,
nav label[for*="menu"] b::before,
nav label[for*="menu"] b::after
{ position: absolute; width: 1.5rem; height: 0.22rem; background-color: white;
}
nav label[for*="menu"] b
{ top: 46%; right: 12%;
}
nav label[for*="menu"] b::before,
nav label[for*="menu"] b::after
{ content:''; left: 0;
}
nav label[for*="menu"] b::before
{ top: -200%;
}
nav label[for*="menu"] b::after
{ bottom: -200%;
}
/*$icono menu hover*/
nav label[for*="menu"]:hover b::before
{ -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
nav label[for*="menu"]:hover b::after
{ -webkit-transform: translateY(50%); transform: translateY(50%);
}
/*$icono config*/
nav label[for*="config"] b
{ position: absolute; width: 1.6rem; height: 1.6rem; border: 2px dashed white; border-radius:50%; left: 40%; top: 48%; z-index: 50; -webkit-transform-origin: 85% -35%; transform-origin: 85% -35%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
nav label[for*="config"] b:before
{	content:''; position: absolute;/* left: 0%; top: 0%; width: 100%; height: 100%;*/ left: 3%; top: 4%; width: 95%; height: 95%; border: 0.2rem solid white; border-radius:50%;
}
/*$icono config hover*/
nav label[for*="config"]:hover b
{ -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
/*$menu*/
.menu
{ padding: 3.5rem 0.2rem 0.5rem; width: 90%; margin: 0 auto;
}
.menu li
{ display: inline-block; margin: 0 -0.1rem;
}
/*$iconos de navegacion*/
nav a
{	text-decoration: none; display: inline-block; padding: 0.1rem 1rem 0.5rem; font-size: 0.8rem;
}
nav a:link
{ color: white;
}
nav a::before
{ display: block; font-family:'g3k'; font-size: 1.3rem; padding: 0.25rem;
}
nav a b{font-weight:normal;}
a[href*="inicio"]
{ font-size: 0rem; position: absolute; z-index: 5; top: 0; left: 50%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translateX(-50%) scale(0.75); transform: translateX(-50%) scale(0.75);
}
a[href*="filosofia"]::before
{ content: 'f';
}
a[href*="portafolio"]::before
{ content: 'p';
}
a[href*="inicio"]::before
{ content: 'E'; padding-top: 1.3rem; font-size: 3rem; z-index: 15;
}
a[href*="inicio"]::after
{ content: ''; position: absolute; z-index: -3; top: 0; left: 50%; border-style: solid; border-color: rgb(0,51,102) transparent transparent; border-width: 5.3rem 3rem 0 3rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));;
}
a[href*="habilidades"]::before
{ content: 'h';
}
a[href*="contacto"]::before
{ content: 'b';
}
/*$controles del menu de navegación*/
/*NOCHECKED-----------------*/
input[id*="menu"]:not(:checked) ~ .contenedor nav .menu
{	padding: 1rem 0; max-height: 0rem; overflow: hidden;
}
input[id*="menu"]:not(:checked) ~ .contenedor nav li:not(.inicio)
{	opacity: 0;
}
input[id*="menu"]:not(:checked) ~ .contenedor nav a[href*="inicio"]
{ -webkit-transform: translateX(-50%) scale(0.8); transform: translateX(-50%) scale(0.8);
}
/*CHECKED-------------------*/
input[id*="menu"]:checked ~ .contenedor nav .menu
{ max-height: 20rem;
}
input[id*="menu"]:checked ~ .contenedor nav li:not(.inicio)
{ -webkit-animation: aparece-arriba 1.5s ease-out 0s forwards; animation: aparece-arriba 1.5s ease-out 0s forwards;
}
input[id*="menu"]:checked ~ .contenedor label[for*="menu"],
input[id*="config"]:checked ~ .contenedor label[for*="config"]
{ background-color: rgb(250,60,110);
}
input[id*="menu"]:checked ~ .contenedor label[for*="menu"]::after
{ border-left-color: rgb(250,60,110);
}
input[id*="config"]:checked ~ .contenedor label[for*="config"]::before
{ border-right-color: rgb(250,60,110);
}
input[id*="menu"]:checked ~ .contenedor label[for*="menu"] b
{ background: rgba(255,255,255,0);
}
input[id*="menu"]:checked ~ .contenedor label[for*="menu"] b::before
{	-webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: translate(25%,-25%) rotate(45deg); transform: translate(25%,-25%) rotate(45deg);
}
input#ctrl-menu:checked ~ .contenedor label[for*="menu"] b::after
{	-webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: translate(25%,25%) rotate(-45deg); transform: translate(25%,25%) rotate(-45deg)
}
/*------------------------
$CONFIGURACIÓN
--------------------------*/
section.config
{	position: absolute; top: 0; z-index: 26; width: 100%; min-height: 100%; min-height: 100vh;
}
section.config::before
{ content: ''; position: fixed; top:0; bottom:0; left:0; right:0; background-color: rgba(0,0,0,.5);
}
.settings
{ position: absolute; width: 90%; padding: 2rem 1.5rem; margin: 1rem 5%; padding-top: 2rem; box-shadow: 0 0 0.5rem rgba(0,0,0,.5);
}
.settings h3
{ margin-top: 1rem; position: relative; display: inline-block; background-color: rgba(30,144,225,.5);
}
.settings h3::before,
.settings h3::after
{ content: ''; position: absolute; top: 0; border: solid rgba(30,144,225,.5); border-width: 1.5rem 1rem;
}
.settings h3::before
{ border-left-color: transparent; right: 100%;
}
.settings h3::after
{ border-right-color: transparent; left: 100%;
}
.settings h5
{ margin-top: 5%;
}
.settings label[for*="ctrl"]
{ padding: 0.25rem; display: inline-block; font-size: 0.8rem; vertical-align: top; width: 25%; line-height: 1rem;
}
.settings .px ~ label[for*="ctrl"]::before
{ font-family: 'g3k', arial; font-size: 1.2rem; content: 'b'; padding: 0.5rem 0.25rem 0; display: inline-block; width: 100%;
}
/*$controles configuracion*/
/*NOCHECKED-----------------*/
input#ctrl-config:not(:checked) ~ .contenedor .config
{ display: none;
}
/*CHECKED-----------------*/
input#ctrl-config:checked ~ .contenedor .config
{ opacity: 0; display: inherit; -webkit-animation: aparece 0.8s ease forwards; animation: aparece 0.8s ease forwards;
}
input#ctrl-config:checked ~ .contenedor .settings
{ -webkit-animation: aparece-arriba 2s ease 0s forwards; animation: aparece-arriba 2s ease 0s forwards;
}
/*------------------------
SECCIÓN HEADER
--------------------------*/
.contenedor>header
{ min-height: 20vh; padding-top: 5.5rem; z-index: 25; will-change: background, transform; background-size: 100% 100%; background-position: center center; background-image: -webkit-radial-gradient( center, rgba(0,51,102,0) 50%, rgba(0,51,102,1) 100%); background-image: radial-gradient( to center, rgba(0,51,102,0) 50%, rgba(0,51,102,1) 100%)
}
.contenedor>header::before
{ content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); background-size: 50% 15%; background-position: 0% 5%, 100% 5%; background-repeat: no-repeat; background-image: url('http://g3k.co/g3k/img/ui/iceberg-arriba-izq.png'), url('http://g3k.co/g3k/img/ui/iceberg-arriba-der.png');
}
.contenedor>header::after
{	content: '';	width: 100%;	height: 4rem;	position: absolute; left: 0; bottom: 0%; background-repeat: no-repeat; background-position: bottom left, bottom right; background-size: 50% 70%, 100% 100%, 0% 0%;	background-image: url('http://g3k.co/g3k/img/ui/short-montain.png'), url('http://g3k.co/g3k/img/ui/middle-montain-der.png'), url('http://g3k.co/g3k/img/ui/long-montain-azul.png');
}
.contenedor h1::before,
.contenedor h1::after
{ content:''; position: absolute; z-index: -1; width: 20%; height: 100%; top: 0; will-change: transform, background-position; -webkit-animation: triangulos-fondo 2s linear infinite; animation: triangulos-fondo 2s linear infinite; background-size: 125% auto; background-position: 0% 50%;
}
.contenedor h1::before
{ left: 0; background-image: url('http://g3k.co/g3k/img/svg/triangulos.svg');
}
.contenedor h1::after
{ right:0; background-image: url('http://g3k.co/g3k/img/svg/triangulos2.svg');
}
.bienvenidos
{ /*width: 20rem;*/ background: rgba(26,201,142,0.8);
}
.bienvenidos, .g3k
{ line-height: 3rem; display: inline-block; position: relative; padding: 0 0.5rem;
}
.bienvenidos::before,
.bienvenidos::after,
.g3k::before,
.g3k::after,
h2::before,
h2::after
{ content: ''; position: absolute; border-style: solid; border-width: 1.5rem 1rem;	top: 0;
}
.bienvenidos::before
{ border-color: transparent transparent rgba(26,201,142,0.8) rgba(26,201,142,0.8) ; left: 100%;
}
.bienvenidos::after
{ border-color: rgba(26,201,142,0.8) rgba(26,201,142,0.8) transparent transparent; right: 100%;
}
.g3k
{	margin-left: 0.5rem;	text-transform: uppercase; font-family: 'g3k', open-sans, arial; font-size: 1.3rem; letter-spacing: -0.2rem; font-weight: normal;
}
.g3k, h2
{	background-color:rgba(0,51,102,.5);
}
.g3k::before
{ border-color: rgba(0,51,102,.5) rgba(0,51,102,.5) transparent transparent; right: 100%;
}
.g3k::after
{ border-color: rgba(0,51,102,.5) transparent transparent rgba(0,51,102,.5); left: 100%;
}
h2::before
{ border-color: transparent rgba(0,51,102,.5) rgba(0,51,102,.5) transparent; right: 100%;
}
h2::after
{ border-width: 1.5rem 1rem; border-color: transparent transparent rgba(0,51,102,.5) rgba(0,51,102,.5); left: 100%;
}
.ilustracion
{ padding-top: 2rem; position: relative; z-index: -1; overflow: hidden;
}
.ilustracion::before
{ content:''; position: absolute; z-index: -5; width: 30%; height: 30%; left: -50%; will-change: position, transform; -webkit-animation: gradius 20s ease-in 20 3s; animation: gradius 20s ease-in 20 3s; background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-image: url('http://g3k.co/g3k/img/svg/gradius.svg');
}
.ilustracion::after
{ content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); background-size: 80% 20%, 0; background-position: -10% bottom, right bottom; background-repeat: no-repeat; background-image: url('http://g3k.co/g3k/img/ui/iceberg-abajo-izq.png'), url('http://g3k.co/g3k/img/ui/iceberg-abajo-der.png');
}
.ilustracion img
{	opacity: 0;	margin-left: -5%;	width: 110%;	will-change: transform, opacity;	-webkit-animation: aparece-abajo 1s ease-out 1s forwards; animation: aparece-abajo 1s ease-out 1s forwards;
}
.frase-cliche,
.frase-cliche span
{ display: inline-block;
}
.frase-cliche
{ position: absolute; top: 100%; left: 50%; z-index: 10; background-image: -webkit-linear-gradient( left, rgba(51,169,220,1) 10%, rgba(4,169,158,1) 40%, rgba(247,230,46,1) 70%); background-image: linear-gradient( to right, rgba(51,169,220,1) 10%, rgba(4,169,158,1) 40%, rgba(247,230,46,1) 70%); padding: 0.12rem; max-width: 15rem; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.frase-cliche span
{ width: 100%; min-width: 13rem; padding: 1rem; position: relative; z-index: 10;
}
.frase-cliche::before,
.frase-cliche span::before,
.frase-cliche::after,
.frase-cliche span::after
{ content: ''; position: absolute; top: 0; width: 24%; height: 100%; z-index: -10;
}
.frase-cliche::before,
.frase-cliche::after
{
}
.frase-cliche::before,
.frase-cliche span::before
{ -webkit-transform: skewX(-30deg) perspective(1px); transform: skewX(-30deg) perspective(1px); outline: 1px solid transparent; left: -1.5rem;
}
.frase-cliche::after,
.frase-cliche span::after
{	-webkit-transform: skewX(30deg) perspective(1px); transform: skewX(30deg) perspective(1px); outline: 1px solid transparent; right: -1.5rem;
}
.frase-cliche::before
{ background-color: rgb(51,169,220);
}
.frase-cliche::after
{ background-color: rgb(247,230,46);
}
/*------------------------
$ANIMACIONES
--------------------------*/
@-webkit-keyframes gradius
{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);} 50%{-webkit-transform: translateX(600%);transform: translateX(600%);} 100%{-webkit-transform: translateX(600%);transform: translateX(600%);}
}
@keyframes gradius
{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);} 50%{-webkit-transform: translateX(600%);transform: translateX(600%);} 100%{-webkit-transform: translateX(600%);transform: translateX(600%);}
}
@-webkit-keyframes triangulos-fondo
{ 0%{background-position: 0% 50%;} 100%{background-position: 496% 50%;}
}
@keyframes triangulos-fondo
{ 0%{background-position: 0% 50%;} 100%{background-position: 496% 50%;}
}
@-webkit-keyframes aparece
{ 20%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 1;}
}
@keyframes aparece
{ 20%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 1;}
}
@-webkit-keyframes aparece-abajo
{ 20%{	opacity: 0;	-webkit-transform: translate(0%,20%); transform: translate(0%,20%);} 50%{	opacity: 1;	-webkit-transform: translate(0%,-3%); transform: translate(0%,-3%);} 55%{	-webkit-transform: translate(0%,1.5%); transform: translate(0%,1.5%);} 60%{	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);} 100%{	opacity: 1;	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);}
}
@keyframes aparece-abajo
{ 20%{	opacity: 0;	-webkit-transform: translate(0%,20%); transform: translate(0%,20%);} 50%{	opacity: 1;	-webkit-transform: translate(0%,-3%); transform: translate(0%,-3%);} 55%{	-webkit-transform: translate(0%,1.5%); transform: translate(0%,1.5%);} 60%{	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);} 100%{	opacity: 1;	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);}
}
@-webkit-keyframes aparece-arriba
{ 0%{	opacity: 0;	-webkit-transform: translate(0%,-20%); transform: translate(0%,-20%);} 50%{	opacity: 1;	-webkit-transform: translate(0%,2%); transform: translate(0%,2%);} 55%{	-webkit-transform: translate(0%,-1%); transform: translate(0%,-1%);} 100%{	opacity: 1;	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);}
}
@keyframes aparece-arriba
{ 0%{	opacity: 0;	-webkit-transform: translate(0%,-20%); transform: translate(0%,-20%);} 50%{	opacity: 1;	-webkit-transform: translate(0%,2%); transform: translate(0%,2%);} 55%{	-webkit-transform: translate(0%,-1%); transform: translate(0%,-1%);} 100%{	opacity: 1;	-webkit-transform: translate(0%,0%); transform: translate(0%,0%);}
}
/*
@keyframes flotando
{ 0%{transform: translate(0%,0%);} 25%{transform: translate(-1.5%,0.5%);} 55%{transform: translate(0%,1.2%);} 65%{transform: translate(1.2%,-0.5%);} 90%{transform: translate(0.5%,-1.5%);} 100%{transform: translate(0%,0%);}
}
*/
Prueba de diseño del header - Script Codes
Prueba de diseño del header - Script Codes
Home Page Home
Developer Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Username g3kdigital
Uploaded October 18, 2022
Rating 3
Size 6,577 Kb
Views 12,144
Do you need developer help for Prueba de diseño del header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) (g3kdigital) Script Codes
Name
Correo fraudulento de Davivienda
Aviso de Cookies
Personalizando el input file
Cambiar idioma solo css
INTENTO FALLIDO DE ANIMACION SVG
Menu Arbol Vr 1.4
Menu Arbol Vr 1.3
Version beta EDUHOLDING
Menu responsive con imagenes demo de ayuda en foro
Seven pillars
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!