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:


Slider concept image



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..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS3 Slider Concept Design
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

15 komentar

  1. Apakah cara ini mesti melihat tempalte apa yang dipakai di blog kita

    BalasHapus
    Balasan
    1. banyak ragam template dengan tampilan design yang berbeda-beda, namun pada dasarnya template itu semua sama, hanya rangkaiaan struktur kode data element yang ada didalamnya yang membedakannya. semua template umumnya dibentuk dengan style seperti ini:

      http://2.bp.blogspot.com/-ODrcy67bhuM/Ux8s-bGe6oI/AAAAAAAAA4Y/pWZ9i58lHKY/s1600/file-image.png

      Template hanyalah sebuah tampilan untuk membungkus semua data yang akan ditampilkan pada blog. jadi efek seperti apa yang akan kita tampilkan pada blog, bekerja atau tidak semua terletak pada elemen template itu sendiri. misalnya jika efek dengan script, maka template akan membutuhkan script-jQuery didalamnya.

      Hapus
    2. Terima kasih banyak Mbak Devy atas jawabannya. Keren euy, dalam komentar bisa pasang gambar.

      Hapus
    3. tidak sulit kok mas menampilkan gambar dalam komentar, karena komentar halamannya sama dengan posting. hanya menambahkan beberapa perintah script saja disana.

      Hapus
  2. apa bisa di side bar inih Vy..?

    BalasHapus
    Balasan
    1. tempat konten disisip di kode yg mana Vy..!?

      Hapus
    2. semuanya tergantung mas Al ingin menampilkan apa disana yang sekiranya pantes untuk menghias sidebar page.
      kalau untuk mengganti content, perhatikan kode ini:

      <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>


      tinggal disesuaikan event apa yang akan ditampilkan disana.

      Hapus
  3. :)) terkagum-kagum nih sama mbak Devy.. #plak-aw

    BalasHapus
    Balasan
    1. ouw.. mas wicky kagum sama sy yah..?
      makci.... :d

      Hapus
  4. bagus bingit vy, kodenya banyak banget, kuat ga yah ngangkatnya hehe

    BalasHapus
    Balasan
    1. tampilan dengan 5 slide, jika tidak kuat membawanya, tinggal dihapus saja ke-4 slidenya, hehe..biar sedikit

      Hapus
  5. slide dan warnanya lembut dan cantik seperti yang bikin ,,,,, :o

    BalasHapus
  6. anu mbak Dev, kode CSS nya diletakkan dmn ya?? saya coba gagal mlu..makasih sebelumnya

    BalasHapus
    Balasan
    1. sebagai tahap percobaan letakkan seluruh kode diatas pada formulir kosong halaman posting mode tulis HTML, bukan yang Compose.

      Hapus
    2. oh, di halaman posting ya?? bukan di edit template??
      mav merepotkan mbak dev

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK