Selamat Datang

Cara Mudah Mengunakan CSS Shapes | Masa Depan Layout Web

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(), dan polygon().

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.

CSS-Shapes

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 extensions CSS 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 bernama shapes.

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.

css shape poligon

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”.

css shape transform

transform

Lingkaran dan Elips hanya dapat mode transform untuk merubah ukuran skala dan memindahkan, tapi tidak dapat melakukan rotasi

css shape convert

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.

css shapes clip

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:

Semoga informasi ini bisa menumbuhkan inspirasi untuk anda yang sedang menggeluti dunia web desain khusus nya CSS3





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

7 thoughts on “Cara Mudah Mengunakan CSS Shapes | Masa Depan Layout Web

  1. iskael says:

    satu kata, keren (y)
    boleh nih dicoba

  2. Mantap….
    perlu di coba boss..

  3. GIZIPP says:

    Wahkeren sekali…

    *berbinar*

  4. Riko says:

    Wah!! Baru sadar kalau fitur ini sudah bisa diterapkan di web, semoga kedepannya timbul fitur-fitur css yang lebih memudahkan web designer

    Terimakasih & Tuhan Yesus Memberkati.

  5. Amri says:

    Keren gan, tutoralnya di lengkapi dengan visualisasinya.

  6. luciser says:

    wah, mantabs nin toolsnya mas. bisa buat layout yang aneh.
    thanks kang

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development