Membuat lipatan atau lengkungan dengan CSS3 Border Radius

Trick ini hanya pengenmbangan dari Cara membuat border radius dengan dengan box shadow. Oke dari pada lama - lama langsung saja simak trick berikut :

Pertama - tama pilih bagian mana yang akan di buat efek ini misalkan kamu ingin membuatnya pada

.post, kemudian masukan script css ini :

border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999;

Note:Yang diwarnai yaitu antara bottom dengan 100px berhubungan dimana 100px merupakan nilai dari bottom dan pada left memiliki nilai 20px, silahkan rubah nilai tersebut sesuai dengan keinginan kalian. Dan untuk warna kuning merupakan nilai dari shadow, dan hijau merupakan warna dari shadow box diatas

Berikut beberapa contoh script lipatan dengan CSS3 Border Radius

border-top-left-radius: 100px 20px;box-shadow: -10px -5px 15px #999;

border-top-right-radius: 20px 20px;border-bottom-left-radius: 20px 20px;

border-bottom-right-radius: 100px 100px;

border-top-left-radius: 20px 20px;border-top-right-radius: 20px 20px;border-bottom-right-radius: 100px 100px;border-bottom-left-radius: 100px 100px;

Sobat tinggal utak-atik sedikit untuk hasil yang sobat inginkan, silahkan isi kotak komentar apabila ada yang di tanyakan ^_^

TAMBAHAN ( Dengan Transisi )

Bagaimana jika hasil barusan kita gabungkan dengan efek transisi silahkan lihat contoh dibawah ini :

Tambahkan script CSS3 transisi, bila sobat belum mengerti. Terlebih dahulu pelajari di Bab IX : Belajar CSS3 Bagian 3 ( Transisi )

#lipatan {background-color: #fff;display: block;margin:auto;height: 97px;width: 400px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #ccc;padding:5px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s}

Tambahkan selection :hover untuk bentuk ketika disorot, jika sobat belum mengerti silahkan pelajari terlebih dahulu di : Bab IV : Belajar CSS bagian 3 ( Link | hover )

#lipatan:hover {border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}