Cara membuat Elegant Responsive Pure CSS3 Slider - Lelluzec

Jumat, 27 Maret 2020

Cara membuat Elegant Responsive Pure CSS3 Slider

Kegunaan Carousel: Merancang UI yang Efektif untuk Situs Web dengan Konten Berlebihan
Ringkasan: Carousel memungkinkan banyak konten untuk menempati satu ruang tunggal yang didambakan. Ini mungkin menenangkan pertikaian perusahaan, tetapi pada viewports besar atau kecil, orang sering menggulirkan melewati Carousel. Pahlawan statis atau mengintegrasikan konten di UI mungkin merupakan solusi yang lebih baik. Tetapi jika Carousel adalah pahlawan Anda, navigasi dan konten yang baik dapat membantu menjadikannya efektif.

Manfaat terbesar dari Carousel:
Manfaat terbesar dari penggunaan Carousel adalah bahwa mereka memungkinkan lebih dari satu konten untuk menempati bagian real estat utama yang sama di beranda, yang dapat membantu meredakan pertikaian tentang konten mana yang paling pantas. Manfaat tambahan adalah bahwa karena lebih banyak informasi muncul di dekat bagian atas area yang dapat dilihat, mungkin ada peluang lebih besar bagi orang untuk melihatnya.

HTML:
<link rel="stylesheet" href="style.css">
<article id="slider">
<div>
            <p>
                        <span>Elegant Responsive Pure CSS3 Slider</span>
            </p>
</div>
<input checked type='radio' name='slider' id='slide1'/>
<input type='radio' name='slider' id='slide2'/>
<input type='radio' name='slider' id='slide3'/>
<input type='radio' name='slider' id='slide4'/>
<input type='radio' name='slider' id='slide5'/>
<div id="slides">
            <div id="container">
                        <div class="inner">
                                    <article>
                                    <img src="http://placehold.it/942X400"/>
                                    </article>
                                    <article>
                                    <div class='caption'>
                                                <bar>A Bubble on Flower</bar>
                                    </div>
                                    <img src="https://0.s3.envato.com/files/84450220/img/Dummy1-942X400.jpg"/>
                                    </article>
                                    <article>
                                    <div class='caption'>
                                                <bar>A Small Elephant <a href="#">read more</a></bar>
                                    </div>
                                    <img src="https://0.s3.envato.com/files/84450220/img/Dummy2-942X400.jpg"/>
                                    </article>
                                    <article>
                                    <div class='caption'>
                                                <bar>A Yellow Flower <a href="#">read more</a></bar>
                                    </div>
                                    <img src="https://0.s3.envato.com/files/84450220/img/Dummy3-942X400.jpg"/>
                                    </article>
                                    <article>
                                    <div class='caption'>
                                                <bar>A Pink Flower</bar>
                                    </div>
                                    <img src="https://0.s3.envato.com/files/84450220/img/Dummy4-942X400.jpg"/>
                                    </article>
                        </div>
            </div>
</div>
<div id="commands">
            <label for='slide1'></label>
            <label for='slide2'></label>
            <label for='slide3'></label>
            <label for='slide4'></label>
            <label for='slide5'></label>
</div>
<div id="active">
            <label for='slide1'></label>
            <label for='slide2'></label>
            <label for='slide3'></label>
            <label for='slide4'></label>
            <label for='slide5'></label>
</div>

</article>

CSS:

html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,article,aside,canvas,details,embed,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
body{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none}
article{display:block}
body{background:#f0523f;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:16px;margin:12px 0}
span{margin:35px 0 5px;font-size:26px;font-weight:normal;color:#fff}
#slider{text-align:center}
h2{margin:40px 0 25px;border-bottom:1px solid #bbb;padding:0 0 10px}
p{margin:20px 0 16px}
strong{font-weight:bold}
label,a{color:brown;cursor:pointer;text-decoration:none;font-style:italic}
label:hover,a:hover{color:#ddd!important}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
label,#active,img{-moz-user-select:none;-webkit-user-select:none}
.catch{display:block;height:0;overflow:hidden}
#slider{margin:0 auto}
input{display:none}
#slide1:checked ~ #slides .inner{margin-left:0}
#slide2:checked ~ #slides .inner{margin-left:-100%}
#slide3:checked ~ #slides .inner{margin-left:-200%}
#slide4:checked ~ #slides .inner{margin-left:-300%}
#slide5:checked ~ #slides .inner{margin-left:-400%}
#container{width:100%;overflow:hidden}
article img{width:100%}
#slides .inner{width:500%;line-height:0}
#slides article{width:20%;float:left}
#commands{margin:-25% 0 0 0;width:100%;height:50px}
#commands label{display:none;width:80px;height:80px;opacity:0.5}
#commands label:hover{opacity:0.8}
#active{position:relative;z-index:5;margin:16% 0 0;text-align:center}
#active label{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:inline-block;width:10px;height:10px;background:#bbb}
#active label:hover{background:#333;border-color:#777!important}
#slide1:checked ~ #commands label:nth-child(2),#slide2:checked ~ #commands label:nth-child(3),#slide3:checked ~ #commands label:nth-child(4),#slide4:checked ~ #commands label:nth-child(5),#slide5:checked ~ #commands label:nth-child(1){background:url('https://0.s3.envato.com/files/84450220/img/next.png') no-repeat;float:right;margin:0 12px 0 0;display:block}
#slide1:checked ~ #commands label:nth-child(5),#slide2:checked ~ #commands label:nth-child(1),#slide3:checked ~ #commands label:nth-child(2),#slide4:checked ~ #commands label:nth-child(3),#slide5:checked ~ #commands label:nth-child(4){background:url('https://0.s3.envato.com/files/84450220/img/previous.png') no-repeat;float:left;margin:0 0 0 -6px;display:block}
#slide1:checked ~ #active label:nth-child(1),#slide2:checked ~ #active label:nth-child(2),#slide3:checked ~ #active label:nth-child(3),#slide4:checked ~ #active label:nth-child(4),#slide5:checked ~ #active label:nth-child(5){background:#000;opacity:0.6;border-color:#fff!important;border:2px solid #fff}
.caption{line-height:20px;margin:0 0 -150%;position:absolute;padding:320px 12px;opacity:0;color:#fff;text-transform:none;font-family:'Open Sans',Arial,Helvetica,sans-serif;text-align:left;font-size:18px}
.caption bar{display:inline-block;padding:10px;background:#000;border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
#slides{position:relative;padding:2px;border:1px solid #ddd;margin:45px 0 0;background:#FFF;background:-webkit-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-moz-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-ms-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:-o-linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);background:linear-gradient(#FFF,#FFF 20%,#EEE 80%,#DDD);-webkit-border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);box-shadow:0 0 3px rgba(0,0,0,0.2)}
#slides .inner{-webkit-transform:translateZ(0);-webkit-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-o-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);-webkit-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-moz-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-ms-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);-o-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000)}
#slider{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#commands label{-webkit-transform:translateZ(0);-webkit-transition:opacity 0.2s ease-out;-moz-transition:opacity 0.2s ease-out;-o-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}
#slide1:checked ~ #slides article:nth-child(1) .caption,#slide2:checked ~ #slides article:nth-child(2) .caption,#slide3:checked ~ #slides article:nth-child(3) .caption,#slide4:checked ~ #slides article:nth-child(4) .caption,#slide5:checked ~ #slides article:nth-child(5) .caption{opacity:1;-webkit-transition:all 1s ease-out 0.6s;-moz-transition:all 1s ease-out 0.6s;-o-transition:all 1s ease-out 0.6s;transition:all 1s ease-out 0.6s}
#commands,#commands label,#slides,#active,#active label{-webkit-transform:translateZ(0);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
#slider{max-width:960px}
@media only screen and (max-width:850px) and (min-width:450px){
  #slider #commands{margin:-25% 0 0 5%;width:90%;height:50px}
  #slider #commands label{-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
  #slider #slides .caption{padding:280px 12px}
  #slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
  #slider #active{margin:15% 0 0}
}
@media only screen and (max-width:450px){
  #slider #commands{margin:-28% 0 0 1%;width:100%;height:70px}
  #slider #active{margin:12% 0 0}
  #slider #slides{padding:2px 0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
  #slider #slides .caption{opacity:0!important}
  #slider #commands label{-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}
}
@media only screen and (min-width:850px){
  body{padding:0 80px}
}

Jika kalian malas untuk mengetik, kalian bisa mendwonload filenya dibawah ini:

Share with your friends

Give us your opinion