Sabtu, 06 Juli 2013

Cara Memiringkan Ojek Di Template

Hallo Pengunjung Setia Dedi Sinaga . Kali ini saya akan share trick blogger dari 
monster-shared yaitu "CARA MEMIRINGKAN OBJEK DI TEMPLATE"

langsung aja




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

kalo ada yang belum dimengerti atau ada yang belum diatanyakan, langsung aja koment dibawah
 
 
gimana langsung di coba sekarang..
 

gimana tertarik bukan untuk mengikuti tutor di atas langsung aja .. kalo ada yang belum dimengerti atau ada yang belum diatanyakan, langsung aja koment dibawah

 
sumber : monster-shared
Backlinks Please Thanks
URL
Code For Forum
HTML Code
Comments
2 Comments

2 komentar:

Terima kasih sudah berkomentar

 

Copyright © 2013 maintance | Original Template By. Dedi Sinaga | Template Design By : # | Template ReDesign By : # | Some Right Is Reserved