membuat sudut melengkung dengan css3

Tutorial CSS3 Part 2 – Membuat Sudut Melengkung Dengan CSS3


Tutorial CSS3 Part 2 – Membuat Sudut Melengkung Dengan CSS3

Membuat Sudut Melengkung Dengan CSS3 – Dengan css3 sudah memungkinkan kita untuk membuat sudut melengkung pada sebuah element HTML. jadi tampilannya pun sudah lebih interaktif. untuk membuat sudut element menjadi melengkung dengan css3 ini kita bisa menggunakan perintah “border-radius”. mungkin kebanyakan dari kita sudah pernah menggunakan perintah border-radius ini untuk membuat efek melengkung pada sudut element. tapi belum mengetahui bahwa sebenarnya perintah border radius ini adalah perintah baru dari css3. karena jaman dulu para web developer hanya menggunakan table untuk membuat tampilan website. baca juga tentang Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS.

Langsung saja kita masuk ke tutorial cara membuat sudut melengkung dengan css3.

Membuat Sudut Melengkung Dengan CSS3

Untuk contoh nya buatlah sebuah file html dan sebuah file css. atau teman-teman bisa juga menyisipkan css nya langsung ke file html nya. baca tentang cara penulisan css. di sini kita akan membuat beberapa element html dengan bentuk kotak. dan nantinya akan kita terapkan perintah border-radius css3 ini untuk membuat sudut dari element nya melengkung.

index.html

style.css

dan jalankan

membuat sudut melengkung dengan css3

membuat sudut melengkung dengan css3

seperti yang teman-teman lihat pada syntax di atas. kita bisa menggunakan perintah border-radius untuk membuat lengkungan di sudut element html.

rumus penulisan perintah border radius ini adalah sebagai berikut. baca juga : Membuat Efek Hover Zoom Dengan CSS3.

pertama masukkan nilai untuk sudut kiri atas, yang kedua nilai sudut untuk kanan atas, ketiga nilai untuk sudut kanan bawah dan yang keempat nilai untuk sudut kiri bawah.

membuat sudut melengkung dengan css3

membuat sudut melengkung dengan css3

dan teman-teman bisa menggunakan nilai dalam bentuk persen (%) juga. contoh nya seperti membuat lingkaran yang bisa teman-teman lihat pada kotak 6 di atas. juga bisa hanya memberikan dua nilai value. jika menggunakan dua buah nilai value maka nilai yang pertama di baca nilai atas dan nilai kedua di baca nilai bawah. teman-teman juga bisa hanya memberikan satu nilai value. maka satu nilai value ini akan di gunakan untuk tiap sudut element.

See the Pen tutorial membuat sudut melengkung dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

sekian dulu tutorial Tutorial CSS3 Part 2 – Membuat Sudut Melengkung Dengan CSS3. semoga dapat bermanfaat.

Incoming search terms:

  • jilbab rounded shape




About the author
Diki Alfarabi Hadi

Bos in www.malasngoding.com. Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *