Membuat Border Bergerak Di Sisi Gambar - Elemen yang akan kita gunakan dalam efek kali ini adalah animation-clipMe, sedangkan gerakan kita perintahkan dengan infinite-media untuk membuat border bergerak di sisi gambar seperti ini:




DEMO SHOW



Animation Keyframes Infinite




BACA JUGA
Diary Notes Theme Sitemap Responsive



Jika berhubungan dengan animation effect, sudah pasti disana ada objek bergerak secara terus menerus tanpa ada perintah mouse-hover ataupun pointer-click. Gerakan ini disebut dengan keyframes-animation, seperti Animasi Teks Hitam Putih Dengan Marquee merupakan salah satu contoh bentuk keyframes-infinite untuk membuat teks bergerak tanpa batas. Kali ini gambar dalam posting yang akan kita buat border bergerak dengan perintah yang sama.

Penerapan Efek Ke Blog
Pada Halaman editor teks, pilih tab HTML (bukan yang COMPOSE) saat Anda akan membuat postingan terbaru, selanjutnya COPY semua kode dibawah ini, lalu PASTE dalam halaman. Kode lengkapnya seperti ini:


<style type="text/css">
.bb {
  width:200px;height:200px;margin:120px auto;
  /* ganti dengan URL-gambar anda */
  background:url("URL-Gambar Anda") no-repeat center center;
  border:2px solid aqua;color:#69ca62;cursor:pointer;
  box-shadow:inset 0 0 0 3px rgba(105, 202, 98, 0.5)}

.bb::before{animation-delay:-4s;-webkit-animation-delay:-4s;-moz-animation-delay:-4s}
.bb:hover::after,.bb:hover::before {color:yellow}
.bb,.bb::before,.bb::after {position:absolute;top:0;bottom:0;left:0;right:0}
.bb::before,.bb::after {
  content: '';z-index: -1;margin: -5%;box-shadow: inset 0 0 0 3px;
  animation: clipMe 8s linear infinite;
  -webkit-animation: clipMe 8s linear infinite;
  -moz-animation: clipMe 8s linear infinite}

@keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}

@-webkit-keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}

@-moz-keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}
</style>
<div class="bb"></div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Border Bergerak Di Sisi Gambar
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 =

30 komentar

  1. Lngsung praktek ah .... hehehe
    biasa pling klo gagal, ntr lapran lgi sama neng devy ...

    BalasHapus
    Balasan
    1. PURE CSS only mas Fiu, pasti gak bakalan gagal dech, sudah Devy coba pada peramban lainnya juga kok, pasti berhasil.

      Hapus
    2. YG TULISAN INI /* ganti dengan URL-gambar anda */ di isi dengan link gambar juga gak ?

      Hapus
    3. benar sekali mas, ganti teks itu dengan link-gambar

      Hapus
    4. gambar muncul tapi ada di posisi atas .. padahl kode sy letakan paling bawah ..
      dan gk ada efek gerak nya ...hehehe :-?

      Hapus
    5. gambar muncul tapi ada di posisi atas .. padahl kode sy letakan paling bawah ..
      dan gk ada efek gerak nya ...hehehe :-?

      Hapus
  2. .Jadi terlihat lebih menarik ya mbak gambarnya dengan diiringi oleh border yang bergerak pada sisinya.
    .Cakep.Cakep. :)

    BalasHapus
    Balasan
    1. biasanya sih begitu mas, bila ada sesuatu yang bergerak maka pengunjung atau pembaca lebih tertarik untuk melihatnya. apalagi kalau hal itu langsung termuat dalam posting seperti gambar, hmm...lumayan cakeplah.

      tapi yang cakep gambarnya atau mas Fiu neh,,..?? hehe..!!

      Hapus
    2. Yg pasti sih klo yg cantik itu neng devy ... hehehe

      Hapus
    3. Yg pasti sih klo yg cantik itu neng devy ... hehehe

      Hapus
  3. Langsung coba aah, nice info :D

    BalasHapus
  4. jadi kelihatan aminasi ya :))

    BalasHapus
  5. Bertambah lagi ilmu saya, terima kasih buat tutorialnya mbak :d

    BalasHapus
  6. kalo kodenya dipake ke halaman web statis bisa nggak mbak . , (bukan blog) . .??
    biasalah tugas kampus, bikin web statis .. masih bingung gtu desain css nya ..??

    BalasHapus
    Balasan
    1. semua halaman yang bisa membaca teks kode menjadi sebuah perintah efek, tutorial ini bisa ditampilkan.

      Hapus
  7. wajib di coba nih mas tipsnya membut border bergeraknya

    BalasHapus
  8. bisa belajar lebih banyak html disini nih mas, mohon bimbingannya ya

    BalasHapus
  9. wah keren nih bordernya jadi bergerak gerak, nanti saya coba terapin deh ke blog saya

    BalasHapus
  10. Sugoi mba hasilnya. btw bikin berat blog ga pasang ini?

    BalasHapus
  11. kalo warna border yang pinggirnya di ganti bisa ya mas

    BalasHapus
    Balasan
    1. border saya buat dengan warna green pekat, lalu berubah warna saat HOVER dengan yellow (kuning).
      jika ingin diganti warnanya, lihat pada kode ini:

      .bb {
      ....
      ....
      color:#69ca62; //silahkan ubah dengan warna lain
      }

      Hapus
    2. Neng devy yg cantik kok dipanggil mas yah .. hehehe
      Emg ada kumisnya gtu ampe dipanggil mas ...hejehe

      Hapus
  12. kalau pakai begini berarti gambarnya harus diupload dulu ya Devy ke hosting atau media lainnya karena yang dimasukkan url gambar

    BalasHapus
    Balasan
    1. sama seperti kita menyisipkan gambar dalam postingan pak, harus diupload dulu bukan..?

      Hapus
  13. selalu ada hal baru dalam desain disini, semoga bisa bermanfaat buat yang suka mendesain blog :)
    terimakasih mba devy..

    BalasHapus
  14. saya buka demo show lewat ucbrowser pada ponsel saya, kok gambarnya ngambang (sticky) ditengah ya mba..jadi penasaran mau coba lewat pc

    BalasHapus
  15. gambar image terlihat lebih fresh gan, patut dicoba ini trik nya

    BalasHapus
  16. menarik tuts-nya. kapan-kapan bisa dicoba, nih..

    BalasHapus
  17. terima kasih tutorialnya ya.. untuk nambah wawasan blog nih :)

    BalasHapus

  • 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