Slide pronto para editar
Menu Css
Slideshow pronto
Slide pronto para editar
O que é slideshow ?
É uma sequencia imagens comum que mostra cada conteúdo através das setas e marcadores, contando com efeitos de transição nas figuras além da legenda na parte inferior de cada imagem.
O slider é um elemento visual muito comum em aplicações em páginas web, principalmente àquelas que exibem muitas imagens, possibilitando uma melhor experiência ao usuário.
Entretanto, a utilização massiva de JavaScript pode prejudicar o desempenho do website, especialmente em dispositivos móveis. Assim, sempre que possível, uma ótima opção é aproveitar os recursos do CSS3 para a criação de elementos visuais sem a necessidade de JavaScript.
Portanto, neste tutorial vamos criar um slide simples porém bem funcional com html e css sem uso de scripts.
Nesta seção, projetaremos uma estrutura simples na tag <div>,<input>, <label>.
Essas são as tags que usaremos para criar o nosso Slideshow com Css.
Vamos Adicionar o HTML
<!--Slide-->
<div class="slide-css">
<input class="input-slide" type="radio" id="trigger1" name="slider" checked autofocus>
<label class="label-slide" for="trigger1">
</label>
<div class="slide background-1"></div>
<input class="input-slide" type="radio" id="trigger2" name="slider">
<label class="label-slide" for="trigger2">
</label>
<div class="slide background-2"></div>
<input class="input-slide" type="radio" id="trigger3" name="slider">
<label class="label-slide" for="trigger3">
</label>
<div class="slide background-3"></div>
<input class="input-slide" type="radio" id="trigger4" name="slider">
<label class="label-slide" for="trigger4">
</label>
<div class="slide background-4"></div>
<input class="input-slide" type="radio" id="trigger5" name="slider">
<label class="label-slide" for="trigger5">
</label>
<div class="slide background-5"></div>
</div>
<!--Slide-->Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Slide.
.slide-css { width: 100%; float: left; position: sticky; overflow: hidden; }
.sr-only {
position: absolute;
pointer-events: none;
width: 1px;
height: 1px;
overflow: hidden;
color: transparent;
}
.input-slide {
position: absolute;
opacity: 0;
cursor: pointer;
}
.label-slide {
display: inline-block;
width: 15px;
height: 15px;
border: solid 2px #ffffff;
border-radius: 999px;
background-color: transparent;
margin: 70px 5px 5px 5px;
z-index: 2;
cursor: pointer;
transition-duration: .4s;
box-shadow: 0 0 20px 0 #000;
left: 30%;
position: relative;
}
.input-slide:checked + .label-slide{
background-color: #007cff;
}
.input-slide:focus + .label-slide{
box-shadow: 0 0 0 2px teal, 0 0 18px #ffffff;
}
.slide {
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform: translateX(-100%);
transition-duration: .6s;
opacity: 1;
}
.input-slide:checked ~ .slide {
transform: translateX(100%);
}
.input-slide:checked + .label-slide + .slide {
transform: translateX(0);
opacity: 1;
}
.background-1 { background-image: url(../uploads/slide1.jpg); }
.background-2 { background-image: url(../uploads/slide2.jpg); }
.background-3 { background-image: url(../uploads/slide3.jpg); }
.background-4 { background-image: url(../uploads/slide4.jpg); }
.background-5 { background-image: url(../uploads/slide5.jpg); }
/*480PX BREAKPOINT*/
@media (min-width:30em){
.label-slide {
margin: 130px 5px 5px 5px;
left: 39%;
}
}
/*600PX BREAKPOINT*/
@media (min-width:37em){
.label-slide {
margin: 180px 5px 5px 5px;
left: 43%;
}
}
/*768PX BREAKPOINT*/
@media (min-width:48em){
.label-slide {
margin: 230px 5px 5px 5px;
left: 43%;
}
}
/*960PX BREAKPOINT*/
@media (min-width:60em){
.label-slide {
margin: 265px 5px 15px 5px;
left: 46%;
}
}
/*1280PX BREAKPOINT*/
@media (min-width:80em){
.label-slide {
margin: 450px 5px 15px 5px;
left: 47%;
}
}
/*1366PX BREAKPOINT*/
@media (min-width:85em){
.label-slide {
margin: 480px 5px 15px 5px;
left: 47%;
}
}
/*1920PX BREAKPOINT*/
@media (min-width:120em){
.label-slide {
margin: 520px 5px 15px 5px;
left: 49%;
}
}Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Slide pronto para editar!
Veja o Resultado baixo!
Deixe um comentário