Slider de imágenes en HTML y CSS

Programación de un carrucel de imágenes solo con HTML y CSS con una interfaz de login alineado a la derecha

Hoy diseñaremos un slider de imágenes en HTML y CSS, donde solo vamos a utilizar CSS, es decir haremos uso de las transiciones con keyframes. 

CARACTERISTICAS

  1. Carrucel de 3 imágenes fullscreen
  2. Interfaz de login sobre el carrucel de imagenes con posición hacia la derecha
  3. Completamente responsive
  4. Animación con keyframes y transiciones

RECURSOS WEB

  1. En una carpeta llamada img colocamos el logotipo en formato png y las imagenes del carrucel tambien.
  2. Crearemos un archivo llamado index.html
  3. Y por último crearemos un archivo llamado estilos.css

CODIGO HTML DEL ARCHIVO INDEX,HTML

Para ello crearemos un archivo llamado index.html el cual tendrá el siguiente código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">  
    	<title>CARRUCEL O SLIDER DE IMAGENES FULLSCREEN SOLO CON CSS</title>
    	<link rel="stylesheet" href="apptiva.css">
	</head>
	<body>
		<div class="sobre">
			<div class="lienzo">
				<div class="derecha">					
					<form action="">
						<p align="center">
							<img src="img/apptivaweb.png" alt="" class="logo"> 
						</p>
						<div class="card">
							<h1>LOGIN</h1>
						</div>
						<input type="text" name="nombre" placeholder="Usuario">
						<input type="password" name="familia" placeholder="Password">
						<input type="submit" name="btn" value="ACCEDER">
					</form>	
				</div>
			</div>
		</div>
		<div class="slider">
			<div class="div">
				<div style="background: url(img/1.jpg) center no-repeat; background-size: cover"></div>
				<div style="background: url(img/2.jpg) center no-repeat; background-size: cover"></div>
				<div style="background: url(img/3.jpg) center no-repeat; background-size: cover"></div>
				<div style="background: url(img/4.jpg) center no-repeat; background-size: cover"></div>
			</div>			
		</div>		
	</body>
</html>

Vemos dos secciones o contenedores claramente definidos  la clase sobre que tiene el siguiente codigo donde la propiedad position es absolute:

.sobre{
	position: absolute;
	background: #ffffff11;
	z-index: 1;
	width: 100%;
	height: 100%;
}

Y la clase slider que tiene el siguiente código donde vemos la propiedad position con el valor relative

.slider{
	position: relative;
	width: 100%;
	height: 100%;
	margin:auto;
}

EL ARCHIVO ESTILOS.CSS

El archivo completo de estilos lo vemos:

body,html{
	margin: 0;
	padding: 0;
	height: 100%;
}
.sobre{
	position: absolute;
	background: #ffffff11;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.sobre .lienzo{
	width: 1024px;
	margin: 0 auto;
}
.sobre .lienzo .derecha{
	width: 300px;
	height: 100%;		  
	right: -40%;		    
	margin-right: 50%;
	position: absolute;
	background: rgba(255,140,0,1);
	background: -moz-linear-gradient(-45deg, rgba(255,140,0,1) 0%, rgba(255,142,4,1) 37%, rgba(255,146,10,0) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,140,0,1)), color-stop(37%, rgba(255,142,4,1)), color-stop(100%, rgba(255,146,10,0)));
	background: -webkit-linear-gradient(-45deg, rgba(255,140,0,1) 0%, rgba(255,142,4,1) 37%, rgba(255,146,10,0) 100%);
	background: -o-linear-gradient(-45deg, rgba(255,140,0,1) 0%, rgba(255,142,4,1) 37%, rgba(255,146,10,0) 100%);
	background: -ms-linear-gradient(-45deg, rgba(255,140,0,1) 0%, rgba(255,142,4,1) 37%, rgba(255,146,10,0) 100%);
	background: linear-gradient(135deg, rgba(255,140,0,1) 0%, rgba(255,142,4,1) 37%, rgba(255,146,10,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8c00', endColorstr='#ff920a', GradientType=1 );
}

.slider{
	position: relative;
	width: 100%;
	height: 100%;
	margin:auto;
	overflow: hidden;
}
.slider .div{
	display: flex;
	padding: 0;
	margin: 0;
	width: 400%;
	height: 100%;
	animation:cambio 20s infinite alternate;
	animation-timing-function: ease-in;
}
.slider .div div{
	width: 100%;
	height: 100%;			
	padding: 0;
	margin: 0;
}
			
@keyframes cambio{
	0% { margin-left: 0; }
	20% { margin-left: 0; }

	25% { margin-left: -100%; }
	45% { margin-left: -100%; }

	50% { margin-left: -200%; }
	70% { margin-left: -200%; }

	75% { margin-left: -300%; }
	100% { margin-left: -300%; }
}
/* FORMULARIO */		
.logo{
	margin-top:40px;
}
.card{			
	color: white;
	padding: 5px;
	text-align: center;		   
}
form{
	margin:20px;
}
		
input,textarea{
	padding: 10px;
	width:-webkit-fill-available;
	border: 1px solid orange;
	border-radius: 5px;
	text-align: center;
	margin-top: 10px;
}
/* FORMULARIO */

@media screen and (max-width: 768px) {
	.slider{ overflow: visible;	}
	.sobre .lienzo{	width: 100%;}
	.sobre .lienzo .derecha{	width: 100%;   height: 100%; background:none; position:static; } 
	form{ background:#ffffffBB; padding: 10px; } 
}

 

VIDEO Slider de Imágenes html y css + Interfaz login

Visitas: 85 | Publicado:2018-12-09 12:57:04

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::