Mendesain Gambar Menggunakan Skew Efek

Mendesain Gambar Menggunakan Skew Efek - Banyak pola gambar yang sering saya jumpai pada artikel blog sahabat lain yang menampilkan beragam style/gaya pada tampilan hover gambar, dari efek FADE IN, FADE OUT, atau mendesain gambar menggunakan efek ROTASI dan lain sebagainya, dan CSS/XML Code yang diberikan juga sangat beragam dan panjang. Terlepas dari semua itu, Penampilan pada blog memang sangat penting sehingga banyak cara yang harus dikejar untuk menarik pengunjung sebanyak mungkin agar betah berlama-lama diblog kita, tentunya dengan menyuguhkan sesuatu yang menarik untuk mereka dengan Mendesain Gambar Menggunakan Skew Efek.

Skew efek merupakan seni untuk mengubah tampilan gambar menjadi miring kekanan/kiri dalam satu titik fokus, singkatnya saya tidak mengubah bentuk default gambarnya, disini saya hanya menggunakan kode hover untuk memanggil efeknya yang bilamana kursor mouse melewati gambar tersebut, maka efek skew pada gambar akan bekerja. Seperti yang sudah pernah saya share sebelumnya tentang Link Hover Pada gambar, maka saat gambar tersentuh akan mengarah pada teks yang ada disamping gambar, dan bila diklik akan menuju URL halaman yang anda tentukan. Detailnya anda boleh lihat pada link SAHABAT BLOGGER 77/file CSS Code efek for Gallery Gambar.

Setiap gambar memiliki pola, maka pola ini yang kita edit dan ganti, contoh X011gift-6L7VM1dk/Uv5dNAZ031I/AAAAAAAAABc/WIG3wVV51as/s1600/934656_4947000AB275522_218000653_n+%25281%2529, kode ini untuk menampilkan gambar, ini saya ambil dari album google picasa, cukup kita tambahkan kode tag untuk membungkus pola ini, lalu kita kirimkan kembali ke spell-check, untuk menentukan/mengetahui apakah ada kode yang error, tunggu beberapa saat maka kita akan mendapatkan kiriman kode baru dari spell-check yang sudah dihapus dan diperbaharui secara otomatis kode-kode yang error, sehingga kodenya akan menjadi sperti ini:

U
R
L

X0-6L7VM1dk/Uv5dNAZ031I/AAAAAAAAABc/WIG3wVV51as/s1600/934656_494799377275358_218000653_n+%25281%2529

Coba perhatikan kode gambar diatas, sekilas tidak ada perubahan, namun ada beberapa kode yang dihapus dan diganti, teks Merah pada kode yang saya kirim, tidak lagi ada pada kode perbaikan oleh spell-check, nah..! saatnya mendesain gambar ini dengan pola kode yang aman tanpa virus menggunakan CSS Code

Untuk memanggil efek skew-nya saya menggunakan kode CSS berikut

C
S
S

C
O
D
E

.demo6 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo6:hover {
  -webkit-transform:skew(30deg,20deg);
  -moz-transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg);
  -o-transform:skew(30deg,20deg);
  transform:skew(30deg,20deg);
}

Kode berikut untuk menentukan gambar mana yang akan anda beri efek skew untuk gambar postingan anda

H
T
M
L

<div class="separator" style="clear: both; text-align: center;">
<img class="demo6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQzmDe30J6np0-OcOZBN51OcxyRu-3t-eCrRwo58kM02Q__3C1nmnnWZtmnTrmjkVb8UHKn7h2d66yV9wfy4RWZ-m8CIKM_wJSTemXevWNpEnJ4PVb4kQohXNJCK91YyB-y7f-TYU5Iuz/s1600/934656_494799377275358_218000653_n+%25281%2529.jpg" /></div>

Dengan penerapan kode CSS diatas, apakah sudah dapat bekerja untuk memberi efek skew pada gambar.? Untuk hasilnya silahkan LETAKKAN PANAH KURSOR MOUSE anda pada gambar dibawah ini, sebelum melakukannya ada baiknya ucapkan dahulu " Bismillahi rohmani Rohim " hehe..!! Selamat Mencoba