Cara Memiringkan Objek-Objek Template Di Blog

Unknown On Rabu, 03 Juli 2013

Cara Memiringkan Objek-Objek Template Di Blog
Selamat malam sob kali ini ane berbagi tehnik cara memiringkan Objek Di Blog yang ane dapet dari blog OM Khairil nama blog nya Monster Shared thx buat Om khairil sudah mao ngasih ilmu nya :)

langsung aja ne sob di simak yaa ..

Untuk membuat suatu objek miring sebenarnya sangat gampang tinggal menambahkan kode dibawah ini di dalam CSS objek tersebut.

;transform: skewX(*deg);

-webkit-transform: skewX(*deg);

-ms-transform: skewX(*deg);

-moz-transform: skewX(*deg);

-o-transform: skewX(*deg);

}

NB :

Ganti tanda (*) dangan angka tergantung seleramu berapa derajat.

Namun yang bikin susah yaitu jika sobat tidak dapat pakai kreatifitas, hmm oke akan kujelaskan teknik skew ini, untuk membuat objek miring terdapat berbagai banyak bentuk seperti yang di bawah ini dan pelajari caranya ...

Yang ini namanya SkewX jangan heran dengan katanya X itu maksudnya rotasi atau arah kemiringan objeknya. SkewX ini arahnya yaitu Horizontal ,seperti arah kiri atau kanan.seperti yang diatas untuk membuat ini tinggal menambahkan kode seperti dibawah ini di dalam CSS objek tersebut

;transform: skewX(*deg);

-webkit-transform: skewX(*deg);

-ms-transform: skewX(*deg);

-moz-transform: skewX(*deg);

-o-transform: skewX(*deg);

}

Jika anda ingin membuat objek miring berlawanan arah tinggal menambahkan (-) di belakang derajat gini skewX(-*deg);

Ini namanya skewY seperti halnya skewX namun arahnya bberbeda.arah skew ini Vertikal gerak atas bawah berbada dengan skewX geraknya kiri kanan dan untuk menggunakan ini tinggal menambahkan kode CSS di bawah ini kedalam CSS objek yang ingin di buat miring

;transform: skewY(*deg);

-webkit-transform: skewY(*deg);

-ms-transform: skewY(*deg);

-moz-transform: skewY(*deg);

-o-transform: skewY(*deg);

}

Agarlebihmudah membuat arah sebaliknya. Seperti diatas tadi tinggal menambahkan (-)dibelakang derajat.

;transform: skewY(-*deg);

-webkit-transform: skewY(-*deg);

-ms-transform: skewY(-*deg);

-moz-transform: skewY(-*deg);

-o-transform: skewY(-*deg);

}

Kode ini berlaku untuk semua objek di template seperti kata, border, dsb. Termasuk juga gambar seperti gambar berikut;

Sebelum memberikan efek Skew

Setelah memberikan efek skew

Dengan CSS ini kadang terlihat indah bila di kreasikan dengan beberapa objek lain

Sumber :: monster shared
SELAMAT MENCOBA Cara Memiringkan Objek-Objek Template Di Blog

Subscribe to Posts | Subscribe to Comments

Label

Komentar Terkini