Bagaimana Menggunakan CSS Shapes Dalam Desain Web

Prinsip layout-kolom dan baris, sudut dan garis-yang kita gunakan untuk membangun website saat ini sebagian besar dipengaruhi oleh warisan cetak mereka. Dan walaupun penerapan grid pada web semakin membaik dan lebih terpoles, layout web secara umum masih tampak canggung dibandingkan media cetak, khususnya tentang alur konten.

Majalah dan koran selalu menikmati cara elegan untuk menyusun layout konten, seperti membungkus teks, atau di dalam bentuk non persegi.

Mari menjelajah bagaimana CSS Shapes Module akan memberikan kita kebebasan yang sama ini pada web.

Intro Singkat Tentang CSS Shapes

CSS Shapes memudahkan desainer web untuk membuat layout yang lebih abstrak dan geometris, melebihi segiempat dan persegi sederhana. Spesifikasi menyediakan kita dengan CSS properties baru yang mencakup shape-outside dan shape-margin. Dukungan browser cukup beralasan, walaupun properties ini sekarang hanya tersedia di Chrome, Opera, dan Safari, dengan prefix -webkit-, karenanya -webkit-shape-outside.

Property shape-outside akan menyebabkan konten sebaris membungkus dengan area sekitar (luar) diikuti dengan elemen curve, bukan model box. Pada awalnya ada juga shape-inside untuk membungkus konten di dalam elemen; teks dalam elemen bundar akan dicetak dalam bentuk lingkaran juga. Bagaimana pun juga, penerapan ini telah ditunda untuk CSS Shapes Level 2.

Property shape-margin mengatur margin di sekitar bentuk apapun yang menggunakan shape-outside.

Mari lihat beberapa contoh.

Membuat Sebuah Bentuk

Cara termudah untuk mengetahui bahwa CSS Shapes berfungsi adalah mungkin dengan membuat sebuah lingkaran. Jadi, berikut div (lingkaran kita), dengan beberapa paragraf bersamanya.

1

<div class="circle"></div>

2

<p>Lorem ipsum…</p>

3

<p>Lorem ipsum…</p>

4

<p>Lorem ipsum…</p>

Berikut beberapa hal-hal dasar styling, termasuk width dan height lingkaran kita, border-radius untuk membentuk elemen, dan sebuah float sehingga paragraf terbungkus di sekitar elemen.

1

.circle { 

2

    width: 250px;

3

    height: 250px;

4

    background-color: #40a977;

5

    border-radius: 50%;

6

    float: left;

7

}

Seperti yang dapat kita harapkan, paragraf sekarang terbungkus di sekitar elemen. Bagaimana pun juga, karena property border-radius tidak menjelaskan bentuk elemen actual, pembungkusan paragraf tidak membentuk lingkaran.

Jika kita memeriksa elemen melalui DevTools browser kita, kita akan menemukan elemen yang, nyatanya, masih berapa kotak. Jadi, walaupun div memiliki tampilan lingkaran, border-radius tidak melakukan apa-apa terhadap bentuk aktual elemen.

Agar paragraf kita mematuhi bentuk lingkaran, kita perlu mengubah bentuk elemen aktual melalui property shape-outside; dalam hal ini, kita akan menambahkan satu dengan fungsi circle() lolos sebagai nilai.

1

.circle {

2

    width: 250px;

3

    height: 250px;

4

    background-color: #40a977;

5

    border-radius: 50%;

6

    float: left;

7

    -webkit-shape-outside: circle();

8

    shape-outside: circle();

9

}

Paragraf kita sekarang membungkus rapi di sekitar keliling lingkaran.

Sebagai tambahan, jika kita sekarang menginspeksi elemen melalui DevTools, kita akan melihat bahwa elemen dirender secara sesuai ke dalam lingkaran.

Dengan beberapa margin, lihat bagaimana itu mungkin memperbagus layout sederhana:

Kustomisasi Lingkaran

Fungsi circle() mengambil beberapa nilai dalam menentukan radius dan pusat koordinat secara berturut-turut: circle(r at x y). Secara default, nilai radius diturunkan dari ukuran elemen; jika elemen lebarnya 300px, sebagai contoh, radius akan menjadi 150px (radius merupakan separuh diameter lingkaran).

Sama halnya, koordinat x dan y diukur relatif terhadap ukuran elemen, dan secara default diatur pada 50% 50%; tepat di pusat elemen.

Dua nilai ini akan berguna ketika kamu ingin mengubah ukuran bentuk, sembari mempertahankan ukuran elemen aktual, atau memindahkan bentuk sembari menjaga posisi elemen. Dalam contoh di bawah, kita akan mengurangi radius lingkaran hingga 60px dan menentukan koordinat pusat ke 30% 70%, yang akan memindahkan lingkaran ke kiri bawah kotak elemen.

Layak untuk diperhatikan bahwa ketika memodifikasi lingkaran baik koordinat pusat dan radius harus didefinisikan secara eksplisit; dengan menambahkan hanya satu dari mereka yang tidak valid.

1

circle( 60px at 30% 70% )  // correct.

2

circle( 60px )  // invalid.

3

circle( at 30% 70% )  // invalid.

Shape Box Model

CSS Shapes mewarisi prinsip box model yang sama dengan elemen, namun menerapkan di luar ruang lingkup elemen itu sendiri. Ini membuat kita secara terpisah menentukan elemen, katakan, ke border-box sembari mengatur bentuk ke padding-box. Untuk mengubah shape box model, tambahkan satu kata kunci box model, content-box, margin-box, border-box, atau padding-box setelah fungsi.

1

.circle {

2

  width: 250px;

3

  height: 250px;

4

  background-color: #40a977;

5

  border-radius: 50%;

6

  float: left;

7

  padding: 10px;

8

  border: 20px solid #ccc;

9

  margin: 30px;

10

  -webkit-shape-outside: circle() padding-box;

11

    shape-outside: circle() padding-box;

12

}

Box-model default pada shape ditentukan ke margin-box. Dan dalam contoh di bawah, kita menggantinya ke padding-box untuk memberitahu browser untuk tidak mencantumkan margin elemen ketika menentukan ukuran atau span shape. Sekarang kita seharusnya menemukan paragraf melewati tepi, dan secara langsung menyentuh padding elemen.

I sangat merekomendasikan untuk memeriksa course gratis kami tentang Hal-hal Dasar CSS Box Model untuk lebih lanjut tentang bagaimana box-model berkerja secara detail.

Membuat Lebih Banyak Bentuk

Spesifikasi CSS Shapes hadir dengan beberapa bentuk fungsi bentuk:

• ellipse(): Seperti sesuai namanya, fungsi ini akan membuat sebuah bentuk elips. Kita dapat mengkonfigurasi radius elips dan juga menggerakkan koordinat pusat bentuk. Namun tidak seperti fungsi circle(), fungsi ellipse() menerapkan dua pengukuran radius, horizontal dan vertikal, karenanya ellipse( 100px 180px at 10% 20% ).
• polygon(): Fungsi ini membuat kita dapat membuat bentuk yang lebih kompleks seperti segitiga, hexagon, juga bentuk non geometris. Menggunakan polygon tidak semudah membuat lingkaran, namun tool Path to Polygon Converter membuatnya lebih intuitif.

Kesimpulan

Dalam tutorial ini, kita melihat ke dalam aplikasi dasar CSS Shapes; kita membuat sebuah bentuk, menyesuaikan ukuran, posisi, dan box model. Pada waktu penulisan ini, beberapa aspek CSS Shapes tetap sangat kasar di sekitar tepinya, yang mungkin mengapa kita belum melihatnya digunakan secara luas.

• Seperti yang disebutkan sebelumnya dalam tutorial ini, properti CSS Shapes shape-inside, yang mengijinkan kita membungkus dan membentuk konten di dalam sebuah elemen, telah ditunda.
• Spesifikasi CSS Shapes menyediakan properti terpisah bernama shape-box untuk mendefinisikan shape box-model, walaupun itu saat ini tampak tidak dapat diterapkan pada browser manapun.
• Safari memerlukan prefix -webkit-, menyoroti bahwa fitur ini masih dalam percobaan.

Meskipun begitu, terlepas dari progress lambat dan perbedaan antara browser saat ini, saya mengharapkan CSS Shapes! Setelah browser besar memilih itu saya tidak dapat menunggu untuk melihat layout web yang sangat kreatif!