16.2.14
21
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/AVvXsEiD1sK-VUdftZOFiqg_kMcNU1-9j4rtEcEWUB0fgdOKwdTXJ30-RL_cHfj9t6Mx9N0Gk6yMvMKsvnIv_9VFNnDj4nyvuiVRpmS6kqZZqAElP8QPuZm2UX2YNithlP0fBCFDD5-67smUE5Oz/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

Image Profile

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mendesain Gambar Menggunakan Skew Efek
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 >>
= TERIMA KASIH =

21 komentar

  1. itu Wajahnya @Devy Indriyani
    Cantik sekali, saya mau dijadikan pacarnya ... Hehehehee

    BalasHapus
    Balasan
    1. masih cinta sama produk lokal kang,gak suka sama orang asing,palagi india,,hehe

      Hapus
    2. saya ngak suka orang india
      saya ngak suka orang china
      saya ngak suka orang papua
      saya suka KAMU ... Hehehehee

      Visit : www.surindersurisahni.blogspot.com

      Hapus
  2. behhh, cantik fotonya dan efeknya keren mbak

    BalasHapus
    Balasan
    1. yia bos, cantik juga yia, hehehe........

      Hapus
    2. efeknya aja attuh kagak usah diajak adminnya..hehe

      Hapus
  3. kalau pakai cara ini takunya namba berat loading blogg,

    komentar yang diatas malah bahas Fotonya.. :D hahahahahah

    BalasHapus
    Balasan
    1. abis cantik e bos
      hehehe
      jadi foto itu mngalihkan duniaku
      hehehe
      kayak lagu ja ya

      Hapus
    2. upload gambarnya dari picasa mas biar gak berat loadnya

      Hapus
    3. iya neh lain kali pasang fotonya bagus foto lain aja, asal pasang foto sendiri jadi bahan gombalan teruss..hehe

      Hapus
    4. wah banyak saingannya nih .. Hehehee

      Visit : www.surindersurisahni.blogspot.com

      Hapus
    5. hahaha, itu bukan gombalan mbak
      tapi kenyataan
      hahaha


      http://mas-onqi.blogspot.com/

      Hapus
  4. Beneran cantik, misal ada sayembara untuk dapatin kamu
    saya rela MENDAFTAR , meski nyawa jadi taruhan ... Heheheee

    Visit : www.surindersurisahni.blogspot.com

    BalasHapus
  5. kreatif lho klo posting gambarnya di edit-edit gini. Editan gambar saya br sebatas pake Potoscape #Kasihan

    BalasHapus
    Balasan
    1. hanya sedikit sentuhan CSS mbak, justru pake Potoscape saya belum pernah coba, ntar mau coba dech gabungin editing CSS dengan potoscape,kali aja dapat efek lebih keren lagi,heheh

      Hapus
  6. hhmm... tanpa efekpun saya tetep suka. suka yang alami dan original..kkwkwkw ngaco..

    komen sukses.. follow G+ sukses, follow blog sukses.
    kunjungan balik ya mbak broo
    http://zon-go.blogspot.com/2014/02/menghilangkan-banner-otentikasi-saat-login-bitvise.html

    BalasHapus
  7. kerenzzz mba artikelnya..... sangat bermanfaat...

    hahaha q jdi ngakak lihat coment"y.......... lucu" nie canda'y sahabatblogger77

    BalasHapus
  8. hhehe.. buseet.. efeknya lucu

    Devy memang cantik..!

    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