Slider Molon CSS3 RWD, background-image

Developer
Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Size
7,650 Kb
Views
14,168
  1. Slider Molon CSS3 RWD, background-image Previews
  2. Slider Molon CSS3 RWD, background-image HTML Codes
  3. Slider Molon CSS3 RWD, background-image CSS Codes
  4. Slider Molon CSS3 RWD, background-image JS Codes

How do I make an slider molon css3 rwd, background-image?

Un slider que se puede modificar en 5 pasos en css para usarse con cualquier cantidad de imágenes (bueno supongo que hasta un máximo de 20) y con un efecto bastante vistoso.. What is a slider molon css3 rwd, background-image? How do you make a slider molon css3 rwd, background-image? This script and codes were developed by Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) on 18 October 2022, Tuesday.

Slider Molon CSS3 RWD, background-image Previews
IQ Test

Slider Molon CSS3 RWD, background-image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider Molon CSS3 RWD, background-image</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Nova+Oval|Salsa);
/*ACLARACIONES
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
* Me apoyo en la libreria, prefix-free de Lea Verou, para los prefijos.
* Solo funciona en aquellos navegadores que acepten CSS3.
* Se necesitan realizar 5 pasos, para poder usarlo sin importar el número de imagenes.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/
/*///////////////////////
CONFIGURACIÓN DEL SLIDER
////////////////////////*/
/*1ER PASO: Aquí se colocan las imagenes*/
.slider figure:nth-child(1) a
{background-image: url('https://www.freejpg.com.ar/asset/900/15/1595/F100004528.jpg');}
.slider figure:nth-child(2) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6c/6c63/F100004521.jpg');}
.slider figure:nth-child(3) a
{background-image: url('https://www.freejpg.com.ar/asset/900/3a/3a64/F100004569.jpg');}
.slider figure:nth-child(4) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6b/6b80/F100004646.jpg');}
.slider figure:nth-child(5) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6b/6ba5/F100004713.jpg');}
.slider figure:nth-child(6) a
{background-image: url('https://www.freejpg.com.ar/asset/900/18/1826/F100004867.jpg');}
.slider figure:nth-child(7) a
{background-image: url('https://www.freejpg.com.ar/asset/900/a3/a385/F100004703.jpg');}
/*2DO PASO: Determina el tiempo de duración por cada slide.
[(tiempo-duración-imagen X N°-Imagenes)] = (tiempo-total-slider)
EJ: Sí fuesen 6 segundos por cada imagen, y son 5 imagenes, entonces son 30segundos, el tiempo total
6s x 5 = 30s*/
/*tiempo-duración-imagen*/
.slider figcaption,
.slider figure::before
{ animation-duration: 5s;
}
/*tiempo-total-slider*/
.slider figure
{ animation-duration: 35s;
}
/*3ER PASO: Determina el orden de aparición de las imagenes
[{(tiempo-duración-imagen) X (N°-orden-aparición)} - (tiempo-duración-imagen)] = (tiempo-aparición-slide)
EJ: Sí el tiempo de duración de cada imagen fuese de 6 segundos (6s).
tiempo1 = (6s x 1)-6s = 0s
tiempo2 = (6s x 2)-6s = 6s
tiempo3 = (6s x 3)-6s = 12s
Y así sucesivamente
*/
.slider figure:nth-child(1)
{animation-delay: 0s;}
.slider figure:nth-child(2)
{animation-delay: 5s;}
.slider figure:nth-child(3)
{animation-delay: 10s;}
.slider figure:nth-child(4)
{animation-delay: 15s;}
.slider figure:nth-child(5)
{animation-delay: 20s;}
.slider figure:nth-child(6)
{animation-delay: 25s;}
.slider figure:nth-child(7)
{animation-delay: 30s;}
/*5TO PASO: Configurar la animación de transición.
Los 3 primeros tiempos no se deben de tocar. Los valores deben cambiar son el 4°, 5° y 6° en relación a.
4°tiempo = 100% / N°-imagenes; 5°tiempo = 4°tiempo +1; 6°tiempo = 4°tiempo +2
EJ: Sí fuesen 8 imagenes
4°tiempo = 100%/8 = 12.5%
5°tiempo = 12.5%+1 = 13.5%
6°tiempo = 12.5%+2 = 14.5%;
NOTA: Aunque siempre se puede alterar los keyframes para el efecto que se quiera obtener.*/
@keyframes slider
{ 0%{transform: translateX(0%) scale(0.5); opacity: 0;} 1%{transform: translateX(100%) scale(0.5); opacity: 1;} 2%{transform: translateX(100%) scale(1)} /*Modificar desde aquí*/ 14.3%{transform: translateX(100%) scale(1); z-index: 10;} 15.3%{transform: translateX(100%) scale(0.3); opacity: 1;} 16.3%{transform: translateX(200%) scale(0.3); opacity: 0;}
}
/*Dimensiones del Slider
Por defecto ocupara el 100% de alto y ancho del padre*/
.slider
{ width: 100%; height: 100%; max-height: inherit;
}
/*Configurar Colores
Sí no vas a usar colores y no quieres los usados por defecto, pueden borrar el css o colocar transparent en los siguientes campos.*/
/*Fondo slider*/
div.slider
{background: ;}
/*Fondo slides*/
div.slider figure
{background: ;}
/*Color del temporizador*/
div.slider figure:before
{background: ;}
/*Fondo figcaption*/
div.slider figcaption
{background: ;}
/*/////////////////////////
HASTA AQUI LA CONFIGURACIÓN
ABAJO LOS ESTILOS NECESARIOS
///////////////////////////*/
.slider
{ background-color: rgb(5,40,20); overflow: hidden; position: relative; margin: auto;
}
.slider,
.slider::before,
.slider::after
.slider *,
.slider *::before,
.slider *::after
{ box-sizing: border-box;
}
@media screen and (min-width:1024px){
/*BORRAR DESDE AQUÍ EN CASO DE NO QUERER QUE SE PAUSE LA ANIMACION EN HOVER
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/ .slider:hover *, .slider:hover figure::before { animation-play-state: paused; } .slider:hover::before, .slider:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(0.7); } .slider::before, .slider::after { content: ''; background-color: transparent; position: absolute; z-index: 100; top: 50%; left: 50%; opacity: 0; transition: .5s all ease; transform: translate(-50%,-50%) scale(0.5); will-change: opacity, transform; } .slider::before { background-color: rgba(5,40,20,.3); width: 5rem; height: 5rem; border-radius: 50%; } .slider::after { border: solid rgba(255,255,255,.8); border-width: 0 0.8rem; width: 2.5rem; height: 2.8rem; }
/*_________________________________________________________________________
BORRAR HASTA AQUÍ EN CASO DE NO QUERER QUE SE PAUSE LA ANIMACION EN HOVER*/
}
.slider figure
{ width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 20; top: 0; left: -100%; opacity: 0; will-change: transform, opacity, z-index; animation-name: slider;
}
.slider figure,
.slider figcaption,
.slider figure::before
{ animation-timing-function: ease; animation-iteration-count: infinite;
}
/*COLOR DE FONDO DE LOS SLIDES*/
/*VERDE*/
.slider figure:nth-child(4n+1)
{background-color: rgb(29,87,51);}
/*GRIS*/
.slider figure:nth-child(4n+2)
{background-color: rgb(152,181,181);}
/*AMARILLO*/
.slider figure:nth-child(4n+3)
{background-color: rgb(252,204,58);}
/*ROZADO*/
.slider figure:nth-child(4n+4)
{background-color: rgb(252,58,58);}
.slider a
{ width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,.1); background-size: cover; background-position: center;
}
.slider figcaption
{ background-color: rgba(5,40,20,.5); padding: 1rem; position: absolute; bottom: 10%; left: 0; right: 0; will-change: transform, opacity; animation-name: aparece;
}
.slider figure::before
{ content: ''; position: absolute; top: 0; left: 0; background-color: inherit; z-index: 20; height: 0.2rem; width: 0%; will-chage: background, width; animation-name: tiempo;
}
@keyframes aparece
{ 0%{ transform: translateY(-200%); opacity: 0; } 20%{ transform: translateY(-200%); opacity: 0; } 30%{ transform: translateY(0%); opacity: 1; } 95%{ transform: translateY(0%); opacity: 1; } 98%{ transform: translateY(-100%); opacity: 0.5; z-index: 20;} 100%{ transform: translateY(200%); opacity: 0; }
}
@keyframes tiempo
{ 99%{width: 100%;} }
/*===========================
ESTILOS MERAMENTE DECORATIVOS
=============================*/
*{padding: 0; margin: 0;}
*,*::before, *::after
{box-sizing: border-box;}
html, body
{ background-color: rgb(21,61,36); font-family: 'Nova Oval', tahoma, sans-serif; color: white; width: 100%; height: 100%; font-size: 16px;
}
body
{ padding: 5% 0;
}
.presentacion, .autopublicidad
{ position: fixed; top: 0; left: 0; text-align: center; width: 100%; padding: 0.5%; z-index: 101; text-shadow: rgba(21,61,36,.8) 0 0 .8rem;
}
.presentacion h3,
.presentacion h4
{ font-weight: normal; color: rgb(29,107,51); line-height: 1rem;
}
.presentacion h3
{ color: rgba(252,204,58,.5); font-family: 'Salsa', inherit, sans-serif;
}
p.autopublicidad
{ top: inherit; bottom: 0; color: rgb(29,107,51); font-size: 0.95rem;
}
.autopublicidad a,
.autopublicidad a:link,
.autopublicidad a:visited
{ display: inline-block; background-color: rgba(252,204,58,.1); color: rgba(252,204,58,.6); padding: 0.2rem 0.6rem 0.2rem 0.45rem; margin: 0 0.3rem; text-decoration : none; border-radius: 0.2rem; font-family: 'Salsa', inherit, sans-serif;
}
.autopublicidad a:hover
{ color: rgba(252,204,58,.9); background-color: rgba(252,204,58,.4);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!--/////////EXPLICACIÓN///////////
Estructura del slider:
_____________________
div.slider> figure> a
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Por cada imagen se debe agregar un figure>a
Se se desea es posible agregar un figcaption. ej: figure>a+figcaption
PD:Sí te posas encima del slider, la animación se detiene
////////////////////////////////-->
<div class="slider"> <figure> <a href="#"></a> <figcaption> Foto 1, yo molo mucho, wee! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 2, tu también molas mucho, wee! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 3, molamos mucho, wee! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 4, todos molamos, wee! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 5, El slider molon! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 6, Muchas Imagenes, wee! </figcaption> </figure> <figure> <a href="#"></a> <figcaption> Foto 7, El slider molon! </figcaption> </figure>
</div>
<!--Esto es solo decorativo, se puede borrar sin problemas-->
<p class="autopublicidad"> <span>visita mi portafolio de diseño grafico<a href="http://www.be.net/g3kdigital" target="_blanck">Aquí</a></span> <span>o mira una versión de este mismo codepen pero con el uso de la etiqueta IMG<a href="https://codepen.io/g3kdigital/pen/uDtza" target="_blanck">Aquí</a> </span>
</p>
<div class="presentacion"> <h3>RWD Slider CSS3, 7 imagenes vr.1.2</h3> <h4>Imagenes por background y un solo keyframe</h4>
</div> <script src="js/index.js"></script>
</body>
</html>

Slider Molon CSS3 RWD, background-image - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Nova+Oval|Salsa);
/*ACLARACIONES
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
* Me apoyo en la libreria, prefix-free de Lea Verou, para los prefijos.
* Solo funciona en aquellos navegadores que acepten CSS3.
* Se necesitan realizar 5 pasos, para poder usarlo sin importar el número de imagenes.
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/
/*///////////////////////
CONFIGURACIÓN DEL SLIDER
////////////////////////*/
/*1ER PASO: Aquí se colocan las imagenes*/
.slider figure:nth-child(1) a
{background-image: url('https://www.freejpg.com.ar/asset/900/15/1595/F100004528.jpg');}
.slider figure:nth-child(2) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6c/6c63/F100004521.jpg');}
.slider figure:nth-child(3) a
{background-image: url('https://www.freejpg.com.ar/asset/900/3a/3a64/F100004569.jpg');}
.slider figure:nth-child(4) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6b/6b80/F100004646.jpg');}
.slider figure:nth-child(5) a
{background-image: url('https://www.freejpg.com.ar/asset/900/6b/6ba5/F100004713.jpg');}
.slider figure:nth-child(6) a
{background-image: url('https://www.freejpg.com.ar/asset/900/18/1826/F100004867.jpg');}
.slider figure:nth-child(7) a
{background-image: url('https://www.freejpg.com.ar/asset/900/a3/a385/F100004703.jpg');}
/*2DO PASO: Determina el tiempo de duración por cada slide.
[(tiempo-duración-imagen X N°-Imagenes)] = (tiempo-total-slider)
EJ: Sí fuesen 6 segundos por cada imagen, y son 5 imagenes, entonces son 30segundos, el tiempo total
6s x 5 = 30s*/
/*tiempo-duración-imagen*/
.slider figcaption,
.slider figure::before
{ animation-duration: 5s;
}
/*tiempo-total-slider*/
.slider figure
{ animation-duration: 35s;
}
/*3ER PASO: Determina el orden de aparición de las imagenes
[{(tiempo-duración-imagen) X (N°-orden-aparición)} - (tiempo-duración-imagen)] = (tiempo-aparición-slide)
EJ: Sí el tiempo de duración de cada imagen fuese de 6 segundos (6s).
tiempo1 = (6s x 1)-6s = 0s
tiempo2 = (6s x 2)-6s = 6s
tiempo3 = (6s x 3)-6s = 12s
Y así sucesivamente
*/
.slider figure:nth-child(1)
{animation-delay: 0s;}
.slider figure:nth-child(2)
{animation-delay: 5s;}
.slider figure:nth-child(3)
{animation-delay: 10s;}
.slider figure:nth-child(4)
{animation-delay: 15s;}
.slider figure:nth-child(5)
{animation-delay: 20s;}
.slider figure:nth-child(6)
{animation-delay: 25s;}
.slider figure:nth-child(7)
{animation-delay: 30s;}
/*5TO PASO: Configurar la animación de transición.
Los 3 primeros tiempos no se deben de tocar. Los valores deben cambiar son el 4°, 5° y 6° en relación a.
4°tiempo = 100% / N°-imagenes; 5°tiempo = 4°tiempo +1; 6°tiempo = 4°tiempo +2
EJ: Sí fuesen 8 imagenes
4°tiempo = 100%/8 = 12.5%
5°tiempo = 12.5%+1 = 13.5%
6°tiempo = 12.5%+2 = 14.5%;
NOTA: Aunque siempre se puede alterar los keyframes para el efecto que se quiera obtener.*/
@keyframes slider
{ 0%{transform: translateX(0%) scale(0.5); opacity: 0;} 1%{transform: translateX(100%) scale(0.5); opacity: 1;} 2%{transform: translateX(100%) scale(1)} /*Modificar desde aquí*/ 14.3%{transform: translateX(100%) scale(1); z-index: 10;} 15.3%{transform: translateX(100%) scale(0.3); opacity: 1;} 16.3%{transform: translateX(200%) scale(0.3); opacity: 0;}
}
/*Dimensiones del Slider
Por defecto ocupara el 100% de alto y ancho del padre*/
.slider
{ width: 100%; height: 100%; max-height: inherit;
}
/*Configurar Colores
Sí no vas a usar colores y no quieres los usados por defecto, pueden borrar el css o colocar transparent en los siguientes campos.*/
/*Fondo slider*/
div.slider
{background: ;}
/*Fondo slides*/
div.slider figure
{background: ;}
/*Color del temporizador*/
div.slider figure:before
{background: ;}
/*Fondo figcaption*/
div.slider figcaption
{background: ;}
/*/////////////////////////
HASTA AQUI LA CONFIGURACIÓN
ABAJO LOS ESTILOS NECESARIOS
///////////////////////////*/
.slider
{ background-color: rgb(5,40,20); overflow: hidden; position: relative; margin: auto;
}
.slider,
.slider::before,
.slider::after
.slider *,
.slider *::before,
.slider *::after
{ box-sizing: border-box;
}
@media screen and (min-width:1024px){
/*BORRAR DESDE AQUÍ EN CASO DE NO QUERER QUE SE PAUSE LA ANIMACION EN HOVER
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/ .slider:hover *, .slider:hover figure::before { animation-play-state: paused; } .slider:hover::before, .slider:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(0.7); } .slider::before, .slider::after { content: ''; background-color: transparent; position: absolute; z-index: 100; top: 50%; left: 50%; opacity: 0; transition: .5s all ease; transform: translate(-50%,-50%) scale(0.5); will-change: opacity, transform; } .slider::before { background-color: rgba(5,40,20,.3); width: 5rem; height: 5rem; border-radius: 50%; } .slider::after { border: solid rgba(255,255,255,.8); border-width: 0 0.8rem; width: 2.5rem; height: 2.8rem; }
/*_________________________________________________________________________
BORRAR HASTA AQUÍ EN CASO DE NO QUERER QUE SE PAUSE LA ANIMACION EN HOVER*/
}
.slider figure
{ width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 20; top: 0; left: -100%; opacity: 0; will-change: transform, opacity, z-index; animation-name: slider;
}
.slider figure,
.slider figcaption,
.slider figure::before
{ animation-timing-function: ease; animation-iteration-count: infinite;
}
/*COLOR DE FONDO DE LOS SLIDES*/
/*VERDE*/
.slider figure:nth-child(4n+1)
{background-color: rgb(29,87,51);}
/*GRIS*/
.slider figure:nth-child(4n+2)
{background-color: rgb(152,181,181);}
/*AMARILLO*/
.slider figure:nth-child(4n+3)
{background-color: rgb(252,204,58);}
/*ROZADO*/
.slider figure:nth-child(4n+4)
{background-color: rgb(252,58,58);}
.slider a
{ width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,.1); background-size: cover; background-position: center;
}
.slider figcaption
{ background-color: rgba(5,40,20,.5); padding: 1rem; position: absolute; bottom: 10%; left: 0; right: 0; will-change: transform, opacity; animation-name: aparece;
}
.slider figure::before
{ content: ''; position: absolute; top: 0; left: 0; background-color: inherit; z-index: 20; height: 0.2rem; width: 0%; will-chage: background, width; animation-name: tiempo;
}
@keyframes aparece
{ 0%{ transform: translateY(-200%); opacity: 0; } 20%{ transform: translateY(-200%); opacity: 0; } 30%{ transform: translateY(0%); opacity: 1; } 95%{ transform: translateY(0%); opacity: 1; } 98%{ transform: translateY(-100%); opacity: 0.5; z-index: 20;} 100%{ transform: translateY(200%); opacity: 0; }
}
@keyframes tiempo
{ 99%{width: 100%;} }
/*===========================
ESTILOS MERAMENTE DECORATIVOS
=============================*/
*{padding: 0; margin: 0;}
*,*::before, *::after
{box-sizing: border-box;}
html, body
{ background-color: rgb(21,61,36); font-family: 'Nova Oval', tahoma, sans-serif; color: white; width: 100%; height: 100%; font-size: 16px;
}
body
{ padding: 5% 0;
}
.presentacion, .autopublicidad
{ position: fixed; top: 0; left: 0; text-align: center; width: 100%; padding: 0.5%; z-index: 101; text-shadow: rgba(21,61,36,.8) 0 0 .8rem;
}
.presentacion h3,
.presentacion h4
{ font-weight: normal; color: rgb(29,107,51); line-height: 1rem;
}
.presentacion h3
{ color: rgba(252,204,58,.5); font-family: 'Salsa', inherit, sans-serif;
}
p.autopublicidad
{ top: inherit; bottom: 0; color: rgb(29,107,51); font-size: 0.95rem;
}
.autopublicidad a,
.autopublicidad a:link,
.autopublicidad a:visited
{ display: inline-block; background-color: rgba(252,204,58,.1); color: rgba(252,204,58,.6); padding: 0.2rem 0.6rem 0.2rem 0.45rem; margin: 0 0.3rem; text-decoration : none; border-radius: 0.2rem; font-family: 'Salsa', inherit, sans-serif;
}
.autopublicidad a:hover
{ color: rgba(252,204,58,.9); background-color: rgba(252,204,58,.4);
}

Slider Molon CSS3 RWD, background-image - Script Codes JS Codes

/*PALETA DE COLORES
verde oscuro rgb(21,61,36)
verde rgb(29,87,51)
gris rgb(152,181,181)
amarillo rgb(252,204,58)
rozado rgb(252,58,58)
Slider Molon CSS3 RWD, background-image - Script Codes
Slider Molon CSS3 RWD, background-image - 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 7,650 Kb
Views 14,168
Do you need developer help for Slider Molon CSS3 RWD, background-image?

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
Aviso de Cookies
Personalizando el input file
Version beta EDUHOLDING
Menu responsive con imagenes demo de ayuda en foro
Seven pillars
Demo preload liquid css only
INTENTO FALLIDO DE ANIMACION SVG
SynerMetrix Maqueta
Correo fraudulento de Davivienda
Cambiar idioma solo css
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!