CSS3 Slider Concept Design

CSS3 Slider Concept Design - Sebelum kita lanjutkan untuk membahas konsep-konsep desain untuk membuat objek bergerak dengan efek slider seperti ini, terlebih dahulu Devy ingin mengucapkan "Selamat Hari NATAL" buat sahabat semua pecinta SAHABAT BLOGGER 77 bagi yang merayakannya, semoga sahabat semua senantiasa sehat dan berbahagia, Amin.

Untuk melengkapi gaya tampilan pada concept design slider kali ini, saya menggunakan sentuhan efek memantul yang saya ambil dari Beberapa Contoh Nama Efek Serta Cara Kerjanya pada artikel sebelumnya dengan bounce-effect seperti ini:

CONCEPT DESIGN
Ini hanya merupakan konsep-konsep elemen untuk mendesain sebuah tampilan dengan efek slider, kode-kode berikut akan mempermudah kerja Anda jika ingin membuat sebuah tampilan dengan efek slider, seperti gallery gambar, arsip file atau untuk menyimpan label artikel blog dengan concept slider design with CSS3 seperti ini:

DEMO SHOW

<style>
@keyframes slide {
    0% { font-size: 0px; opacity: 1;}
   40% { font-size: 75px; opacity: 1;}
   50% { font-size: 60px; opacity: 1;}
   60% { font-size: 75px; opacity: 1;}
   70% { font-size: 70px; opacity: 1;}
   80% { font-size: 75px; opacity: 1;}
   90% { font-size: 73px; opacity: 1;}
   100% { font-size: 75px; opacity: 1;}}

#start {
  position: absolute;width: 100%;
  height: 100%;opacity: 1;font-size: 70px;
  text-align:center;background:#0086c3;color: #fff;
  animation: slide 1.5s ease-in-out forwards;
  text-shadow:2px 3px 3px #101010;}

#start span {
  font:bold italic 17px/normal Lato;
  color:#7FFF00;text-shadow:1px 1px 2px #111}

//example for 5 slide...
#slide1, #slide2, #slide3, #slide4, #slide5 {
  position: absolute;width: 100%;height: 100%;
  opacity: 0;background:#0086c3;
  color: #342c2a; font-size: 80px;}

p {
  font-family: Times, serif;
  text-align: center;letter-spacing: 5px;
  line-height: 80px;color: #fff; margin: 0;
  padding: 60px 0px 0px 0px;
  text-shadow:2px 3px 3px #101010;}

.stage {width: 500px;margin: 0 auto; }
.container {
  position: relative;top: 0;left: 0;
  width: 500px;height: 200px;margin: 0;padding: 0;
  background: #282929;border: 2px solid #d73249;}

.navigation {position: absolute;margin:200px 0 0 62px;}
.btn {
  float: left;margin: 5px;width: 65px;
  height: 30px;text-align: center;
  background:#DC143C;border: 1px solid #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  transition: 0.1s ease-in;}

.btn a {
  display: block; color: #fff;line-height: 30px;
  letter-spacing: 2px;font-size: 12px;}

.btn:hover {
  transition: 0.1s ease-in;
  transform: scale(1.2);
  background:#DC143C}

#slide1:target, #slide2:target, #slide3:target,
#slide4:target, #slide5:target {animation: slide 1.5s ease-in-out forwards;}
</style>

<div class="stage">
     <div class="container">
          <div id="start">Slider Concept
              <span>Design by. Sahabat Blogger 77</span>
          </div>
<div id="slide1"><p>Slide One</p></div>
<div id="slide2"><p>Slide Two</p></div>
<div id="slide3"><p>Slide Three</p></div>
<div id="slide4"><p>Slide four</p></div>
<div id="slide5"><p>Slide five</p></div>

    <div class="navigation">
      <div class="btn"><a href="#slide1">Slide 1</a></div>
      <div class="btn"><a href="#slide2">Slide 2</a></div>
      <div class="btn"><a href="#slide3">Slide 3</a></div>
      <div class="btn"><a href="#slide4">Slide 4</a></div>
      <div class="btn"><a href="#slide5">Slide 5</a></div>
    </div><!..ending nav..!>
     </div><!..ending container..!>
</div><!..ending stage..!>

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!