Css untuk membuat bayangan refleksi ini terbilang cukup simple dan sederhana tidak seperti css untuk efek efek lainnya .
Efek Pantul Pada Gambar
Pada dasarnya Css untuk membuat bayangan efek refleksi hanya membutuhkan pengkodean seperti dibawah ini
-webkit-box-reflect:
Pemantulan bayangan tidak hanya ke bawah saja , bisa ke atas , samping , kanan atau kiri . Coba perhatikan Css nya dibawah ini
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
Kode tersebut merupakan kode untuk membuat efek cermin dengan bayangan atas, bawah, kiri dan kanan, sebagai contoh perhatikan efek cermin dibawah ini :
Untuk menghasilkan efek bayangan seperti gambar diatas kita hanya menggunakan
-webkit-box-reflect: right 10px;
.Note:
right; bertujuan untuk menghasilkan bayangan berada di sebelah kanan dan 10px adalah jarak bayangan dan gambar asli . Anda bisa mengubahnya sesuai dengan kebutuhan anda sendiri .
Pada contoh gambar diatas yang terjadi adalah gambar memantul sempurna , disini kita bisa memainkan pantulannya agar tampak seperti pantulan gambar di lantai kaca . Kita bisa membuat gambar hanya memantul separuh misalnya .
Disini kita gunakan efek Css nya seperti dibawah ini
-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));
Efek ini bisa kita terapkan semisal apda logo gambar dengan memberi Css seprti dibawah ini pada template
.header img {
-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));
css... lainnya ...
}
Silahkan dikreasikan sendiri kemana arah bayangan pada gambar tersebut dengan menggunakan keterangan rigth,left,above atau below seperti pada Css diatas .
Efek Pantul Pada Text
Selain dari gambar , kita juga bisa membuat efek Reflect ini pada text . Tentu dengan Css yang sama
Go Blogination
Semoga Informasi Cara Membuat Css Reflect ini bermanfaat untuk kita semua .
1 comments:
oakley sunglasses
mlb jerseys
jordans
moncler nederland
burberry scarf
basketball shoes
uggs outlet
ugg sale
ugg outlet
ugg outlet 70% off
201711.10chenjinyan
Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih