Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Sliders para tu sitio web [HTML] & [CSS]
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: Sliders para tu sitio web [HTML] & [CSS] (Leído 5799 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 396
El poder del usuario radica en su ANONIMATO.
Sliders para tu sitio web [HTML] & [CSS]
«
en:
Octubre 19, 2021, 05:30:31 am »
Disculpen por la calidad, dado que es un GIF
:/
1-
Código
HTML
:
Código: Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1- Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="img-section">
<img src="img/1.jpg" alt="">
</div>
<div class="img-section">
<img src="img/2.jpg" alt="">
</div>
<div class="img-section">
<img src="img/3.jpg" alt="">
</div>
<div class="img-section">
<img src="img/4.jpg" alt="">
</div>
<div class="img-section">
<img src="img/5.jpg" alt="">
</div>
<div class="img-section">
<img src="img/6.jpg" alt="">
</div>
</div>
</body>
</html>
Código
CSS
:
Código: CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*
{
padding
:
0
;
margin
:
0
;
box-sizing
:
border-box
;
}
body
{
background
:
#fff
;
min-height
:
100vh
;
font-family
:
'Oswald'
,
sans-serif
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
.container
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
margin
:
100px
;
overflow
:
hidden
;
transform
:
skew
(
7deg
)
scale
(
1.1
)
;
border-radius
:
20px
;
}
.img-section
{
flex
:
1
;
transition
:
all 1s ease-in-out
;
height
:
450px
;
position
:
relative
;
}
img
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
transition
:
all 1s ease-in-out
;
}
.img-section
:hover
{
flex-grow
:
10
;
-ms-filter
:
grayscale
(
0
)
;
}
2-
Código
HTML
:
Código: Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2- Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider-container">
<div class="images">
<input type="radio" name="slide" id="img1" checked>
<input type="radio" name="slide" id="img2">
<input type="radio" name="slide" id="img3">
<img src="img/1.jpg" class="im1" alt="img1">
<img src="img/2.jpg" class="im2" alt="img2">
<img src="img/3.jpg" class="im3" alt="img3">
</div>
<div class="circles">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
</div>
</div>
</body>
</html>
Código
CSS
:
Código: CSS
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
}
body
{
display
:
flex
;
height
:
100vh
;
width
:
100%
;
justify-content
:
center
;
align-items
:
center
;
background-color
:
#070916
;
}
.slider-container
{
position
:
relative
;
width
:
51%
;
overflow
:
hidden
;
}
.images
{
display
:
flex
;
width
:
100%
;
box-shadow
:
0
0
10px
#000
;
}
.images
img
{
height
:
25rem
;
width
:
100%
;
transition
:
all 0.20s ease-in-out
;
}
.images
input
{
display
:
none
;
}
.circles
{
display
:
flex
;
justify-content
:
center
;
margin
:
5px
;
}
.circles
label
{
height
:
1.25rem
;
width
:
1.25rem
;
border-radius
:
50%
;
border
:
solid
2px
#fff
;
cursor
:
pointer
;
transition
:
all 0.20s ease-in-out
;
margin
:
7px
;
}
.circles
label
:hover
{
background
:
#bdc3c7
;
}
#img1
:
checked ~
.im1
{
margin-left
:
0
;
}
#img2
:
checked ~
.im2
{
margin-left
:
-100%
;
}
#img3
:
checked ~
.im3
{
margin-left
:
-200%
;
}
Carpeta completa con las imágenes incluidas:
https://www.mediafire.com/folder/x7752pyy326ak/Sliders
#R3LI4NT
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Sliders para tu sitio web [HTML] & [CSS]
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more