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
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:
BACA JUGA
Diary Notes Theme Sitemap ResponsiveJika 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>
.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
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 >>
Lngsung praktek ah .... hehehe
BalasHapusbiasa pling klo gagal, ntr lapran lgi sama neng devy ...
PURE CSS only mas Fiu, pasti gak bakalan gagal dech, sudah Devy coba pada peramban lainnya juga kok, pasti berhasil.
HapusYG TULISAN INI /* ganti dengan URL-gambar anda */ di isi dengan link gambar juga gak ?
Hapusbenar sekali mas, ganti teks itu dengan link-gambar
Hapusgambar muncul tapi ada di posisi atas .. padahl kode sy letakan paling bawah ..
Hapusdan gk ada efek gerak nya ...hehehe :-?
gambar muncul tapi ada di posisi atas .. padahl kode sy letakan paling bawah ..
Hapusdan gk ada efek gerak nya ...hehehe :-?
.Jadi terlihat lebih menarik ya mbak gambarnya dengan diiringi oleh border yang bergerak pada sisinya.
BalasHapus.Cakep.Cakep. :)
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.
Hapustapi yang cakep gambarnya atau mas Fiu neh,,..?? hehe..!!
Yg pasti sih klo yg cantik itu neng devy ... hehehe
HapusYg pasti sih klo yg cantik itu neng devy ... hehehe
HapusLangsung coba aah, nice info :D
BalasHapusjadi kelihatan aminasi ya :))
BalasHapusBertambah lagi ilmu saya, terima kasih buat tutorialnya mbak :d
BalasHapuskalo kodenya dipake ke halaman web statis bisa nggak mbak . , (bukan blog) . .??
BalasHapusbiasalah tugas kampus, bikin web statis .. masih bingung gtu desain css nya ..??
semua halaman yang bisa membaca teks kode menjadi sebuah perintah efek, tutorial ini bisa ditampilkan.
Hapuswajib di coba nih mas tipsnya membut border bergeraknya
BalasHapusbisa belajar lebih banyak html disini nih mas, mohon bimbingannya ya
BalasHapusunyu efeknya mbak...
BalasHapuswah keren nih bordernya jadi bergerak gerak, nanti saya coba terapin deh ke blog saya
BalasHapusSugoi mba hasilnya. btw bikin berat blog ga pasang ini?
BalasHapuskalo warna border yang pinggirnya di ganti bisa ya mas
BalasHapusborder saya buat dengan warna green pekat, lalu berubah warna saat HOVER dengan yellow (kuning).
Hapusjika ingin diganti warnanya, lihat pada kode ini:
.bb {
....
....
color:#69ca62; //silahkan ubah dengan warna lain
}
Neng devy yg cantik kok dipanggil mas yah .. hehehe
HapusEmg ada kumisnya gtu ampe dipanggil mas ...hejehe
kalau pakai begini berarti gambarnya harus diupload dulu ya Devy ke hosting atau media lainnya karena yang dimasukkan url gambar
BalasHapussama seperti kita menyisipkan gambar dalam postingan pak, harus diupload dulu bukan..?
Hapusselalu ada hal baru dalam desain disini, semoga bisa bermanfaat buat yang suka mendesain blog :)
BalasHapusterimakasih mba devy..
saya buka demo show lewat ucbrowser pada ponsel saya, kok gambarnya ngambang (sticky) ditengah ya mba..jadi penasaran mau coba lewat pc
BalasHapusgambar image terlihat lebih fresh gan, patut dicoba ini trik nya
BalasHapusmenarik tuts-nya. kapan-kapan bisa dicoba, nih..
BalasHapusterima kasih tutorialnya ya.. untuk nambah wawasan blog nih :)
BalasHapus