• Twitter
  • Facebook
  • Instagram
  • Youtube
  • Email

Sunday, 12 February 2012

Css 3 Membuat Kotak Miring Postingan

CSS 3 memang sangatlah unik dan mengesankan, banyak yang sangat terkesan dengan kehebatan CSS 3. Untuk tutorial kali ini kita akan mencoba membuat kotak miring yang berada didalam postingan ataupun bisa di isi gambar, terserah sama kreatifitas kalian masing-masing.

Jika kalian masih bingung dengan judul diatas anda bisa melihat demonya seperti di bawah ini.

Lihat DEMO

Kurang lebih seperti itu demonya, mungkin anda akan sudah tahu untuk membuatnya.
Berikut ini Script CSS 3, silahkan anda coba pada postingan anda dengan masuk html.

.miring {
   z-index: 1;
   position: relative;
   padding: 3px;
   width: 400px; /*atur lebar kotaknya*/
   height: 400px;/*atur tinggi kotaknya*/
   -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -moz-transform: rotate(-15deg);
   -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -webkit-transform: rotate(-15deg);
   -webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;
}
.miring:hover {
   z-index: 2;
   position: relative;
   -moz-transform: rotate(0deg);
   -moz-transform: scale(1.25);
   -webkit-transform: rotate(0deg);
   -webkit-transform:  scale(1.25);

Silahkan anda coba dan kembangkan untuk memaksimalkan kode CSS 3 diatas. Untuk lebar dan tinggi silahkan anda ganti kode berwarna merah.

0 comments:

Post a Comment

Terimakasih Atas Komentar Anda, Salam JOSS dari HMPS TI UNIKAMA

Kontak

Lebih Dekat Dengan Kami


Alamat Kami

Jalan S. Supriadi no. 48 Malang

Telepon

0852-3433-2676 (Ahmad Muhajir)

Website

www.hmpsti.com