Bermain Dengan CSS Shapes

Aku yakin banyak dari kalian tidak menyadari bahwa kita dapat menciptakan ilusi bentuk dengan menggunakan 100% CSS. Dengan memanfaatkan properti border dengan cara kreatif, kita dapat membuat bentuk poligon yang menarik. Dalam screencast minggu ini, kita akan mencari cara untuk membuat gelembung pidato tanpa beralih ke gambar latar belakang.

Kebanyakan dari kita, sekarang, familiar dengan menggunakan "- moz - border-radius" dan "- webkit - border-radius" properti untuk membuat sudut bulat - atau bahkan sebuah lingkaran - tetapi ada teknik lain untuk membuat bentuk yang lebih rumit.

Pidato-gelembung tradisional

blockquote#one {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

#one .arrow {
 width: 0; 
 height: 0;
 line-height: 0;
 border-top: 30px solid #e3e3e3;
 border-left: 60px solid white;
 border-right: 10px solid white;
 position: absolute;
 bottom: -30px;
 right: 30px;
}

Perhatikan bagaimana properti "bottom" bertimbal balik dengan properti "border-top".

Alternatif

blockquote#two {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

blockquote#two .arrow {
 width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #e3e3e3;
border-left: none;
border-right: 30px solid white;
position: absolute;
bottom: 60%;
right: -30px;
}

Yang lainnya

blockquote#three {
 width: 450px;
 background: #e3e3e3;
 padding: 25px;
 position: relative;
}

#three .arrow {
 width: 0;
 height: 0;
 line-height: 0;
 border-bottom: 25px solid #e3e3e3;
 border-right: 50px solid white;
 position: absolute;
 top: -24px;
 left: 20px;
}

Catatan menarik

Aku mengetik paragraf ini beberapa menit sebelum memposting tutorial. Saya belajar sesuatu malam ini. Apa kalian tahu bahwa, jika kalian ingin dokumen kalian untuk di validasi, kalian tidak boleh menempatkan teks langsung ke dalam blockquote? Ini harus di masukkan dalam elemen orangtua/parent - seperti Tag <p>. Selain itu, validator tidak menyukai kalau saya menggunakan tag span di dalam blockquote. Hal ini memungkinkan untuk beberapa elemen, tapi sayangnya tidak dengan span! Oh baik; bukan masalah besar. Kalian Hanya perlu menggantinya dengan elemen yang berbeda. Itu tidak membuat perbedaan.

Cukup bagus

Aku benar-benar bersemangat untuk melihat bagaimana kalian telah menerapkan trik unik ini ke dalam proyek kalian sendiri. Kirim kami link untuk contoh, melalui komentar. Terima kasih untuk menonton. Minggu depan, berencana untuk belajar sesuatu yang lebih maju. ... Aku hanya perlu mencari tahu apa! Sampai kemudian.

• Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.