Hadirnya CSS Shapes sebagai fitur baru dari CSS3 tentunya disambut baik oleh web designer di seluruh dunia. Hal ini karena CSS shapes dianggap salah satu masa depan dari layout web.
Dengan CSS Shapes kita bisa membuat layout website seperti majalah dan mengatur kontennya sesuka hati. CSS Shapes memungkinkan kita untuk membungkus konten sesuai dengan path yang ditentukan, kita bisa membuat teks yang mengikuti bentuk dari objek gambar yang ada.
Namun untuk mengaplikasikan CSS Shapes di halaman website saat ini tidak lah mudah, masih sangat sulit untuk membuatnya, terlalu banyak kode yang harus di ketik, dan ini tentunya masih membingungkan dan memakan waktu jika kita benar-benar ingin menerapkan nya. Sejauh ini belum ada tools yang benar-benar mudah untuk membuat CSS shape.
Kesulitan web designer untuk membuat layout menggunakan CSS Shapes ini menarik perhatian seorang web developer bernama Razvan Caliman untuk membuat sebuah CSS Shapes Editor untuk Chrome. Ini adalah sebuah ekstensi Developer Tools yang menyediakan editor interaktif untuk menentukan nilai properti dari shape, seperti
circle(), ellipse(), danpolygon().
Kita bisa melihat pada video diatas bagaimana mudah nya mengatur path. Editor interaktif ditempatkan diatas elemen yang dipilih. Tool ini menambahkan kontrol untuk mengatur, menggerakan, menentukan skala dan memutar bentuk. Secara visual kita bisa melihat kode langsung di generate dan bentuk layout pun terbentuk. Ini sungguh fantastis, membuat kita semakin mudah dalam bekerja dengan CSS Shapes, CSS Shapes menjadi lebih menyenangkan karena lebih mudah untuk bereksperimen dengan bentuk-bentuk yang diinginkan langsung di browser.
Contoh Layout dengan CSS Shapes
Contoh yang tutorial-webdesign.com buat bisa anda lihat disini, dan bisa didownload juga melalui github, untuk membukanya diharapkan menggunakan google chrome terbaru.
Cara Menggunakan.
Untuk memunculkan CSS Shapes Editor anda perlu menginstall extensionsCSS Shapes Editor for Chrome dari Chrome Web Store.
Cara menggunakan nya cukup mudah, buka google chrome anda, lalu buka developer tool yang bisa diakses melalui menu View -> Developer ->Developer Tools
Jika developer tool sudah muncul anda bisa membuka tab baru bernamashapes.
Untuk memulai anda bisa menyeleksi salah satu object yang ada di layout website, lalu klik icon plus(+) yang ada di tab shape, pilih apakah ingin membuat bentuk lingkaran, elips maupun poligon.
Anda bisa melihat gambar-gambar dibawah ini jika masih bingung dalam menggunakan nya.
Cara membuat objek dengan bentuk poligon
Untuk poligon, klik pada tepi editor interaktif untuk menambahkan simpul baru, tarik poin untuk menyesuaikan bentuk atau klik dua kali titik yang ada untuk menghapusnya.
poligon
Untuk beralih ke mode transform, klik “move” ikon pada toolbar editor interaktif, kemudian pindahkan, atur skala dan putar bentuk poligon.
Semua jenis unit CSS dapat digunakan dengan CSS Shapes. Secara default, CSS Shapes Editor menggunakan pixel, tetapi memahami unit lain juga. Kadang-kadang berguna untuk mengubah jenis unit dari koordinat bentuk, misalnya untuk membuatnya responsif. Anda bisa menahan tombol SHIFT dan menekan icon “pointer”.
transform
Lingkaran dan Elips hanya dapat mode transform untuk merubah ukuran skala dan memindahkan, tapi tidak dapat melakukan rotasi
convert
CSS Masking
clips-path ini menggunakan sintaks yang sama dengan CSS Shapes, sehingga memungkinkan untuk menggunakan kembali CSS Shapes Editor. Itu sebabnya nilai hasil penghitungan clip-path juga tersedia di sidebar.
clip
Extentions CSS Shapes Editor for Chrome dibuat menggunakan dasar interaksi dari library shape editor yang juga digunakan oleh CSS Shape Editor untuk ekstensi Brackets
Source lain:
- CSS Shapes 101
- Using CSS Shapes to Enhance Visual Storytelling
- CSS Shapes
- CSS Shapes Editor for Chrome
Semoga informasi ini bisa menumbuhkan inspirasi untuk anda yang sedang menggeluti dunia web desain khusus nya CSS3
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon