Install Web App

CSS

Mengenal CSS Shapes: Membuat Bentuk-Bentuk Kreatif di Halaman Web

profil-penulis

Nuzul Karomah

14 Maret 2024

CSS Shapes adalah teknik dalam CSS yang memungkinkan untuk memberikan tata letak yang lebih dinamis dan menarik pada elemen-elemen HTML dengan memanfaatkan bentuk-bentuk non-standar, seperti lingkaran, elips, poligon, atau bentuk-bentuk kustom.

1. CSS Shape Ellipse

img {
clip-path: circle(50%);
height: 100px; 
width: 100px;
}

Script di atas adalah aturan CSS yang diterapkan pada elemen gambar (<img>) dalam hal tampilan dan tata letak. Berikut adalah penjelasan singkat tentang setiap bagian dari aturan tersebut:

  1. img: Ini adalah selector CSS yang menargetkan semua elemen gambar (<img>) di halaman web.

  2. style.cas: Bagian ini mungkin adalah kesalahan penulisan, karena itu tidak valid dalam sintaks CSS. Saya akan mengabaikan bagian ini untuk penjelasan selanjutnya.

  3. clip-path: circle(50%);: Ini adalah properti CSS yang digunakan untuk memotong gambar ke dalam bentuk lingkaran. Dalam kasus ini, lingkaran tersebut akan memiliki radius setengah dari lebar atau tinggi elemen gambar, karena nilai persentase 50% digunakan. Oleh karena itu, gambar akan terpotong menjadi lingkaran dengan pusat di tengah.

  4. height: 100px; width: 100px;: Properti ini menetapkan tinggi dan lebar elemen gambar menjadi 100 piksel. Ini akan mengatur dimensi gambar menjadi persegi dengan sisi 100 piksel.

2. CSS Shape Triangle

img {
clip-path: polygon(50% 0%, 0% 100% 100% 100%);
}

Script di atas adalah aturan CSS yang diterapkan pada elemen gambar (<img>) di dalam hal tampilan dan tata letak. Berikut adalah penjelasan singkat tentang setiap bagian dari aturan tersebut:

  1. img: Ini adalah selector CSS yang menargetkan semua elemen gambar (<img>) di halaman web.

  2. clip-path: polygon(50% 0%, 0% 100%, 100% 100%);: Ini adalah properti CSS yang digunakan untuk memotong gambar menjadi bentuk poligon kustom. Dalam hal ini, poligon memiliki tiga titik sudut yang didefinisikan oleh koordinat relatif terhadap lebar dan tinggi elemen gambar.

    • Titik pertama (50% 0%): Titik ini berada di tengah atas elemen gambar, karena 50% dari lebar (horizontal) dan 0% dari tinggi (vertikal).
    • Titik kedua (0% 100%): Titik ini berada di sudut kiri bawah elemen gambar, karena 0% dari lebar (horizontal) dan 100% dari tinggi (vertikal).
    • Titik ketiga (100% 100%): Titik ini berada di sudut kanan bawah elemen gambar, karena 100% dari lebar (horizontal) dan 100% dari tinggi (vertikal).

Dengan menggunakan titik-titik ini, gambar akan terpotong menjadi sebuah poligon dengan garis lurus dari titik pertama ke titik kedua, lalu ke titik ketiga, membentuk segitiga.

3. CSS Shape Star

img {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Script di atas adalah aturan CSS yang diterapkan pada elemen gambar (<img>) dalam hal tampilan dan tata letak. Ini menggunakan properti clip-path untuk memotong gambar menjadi bentuk poligon kustom yang kompleks.

Berikut adalah penjelasan untuk setiap bagian dari aturan CSS tersebut:

  1. img: Ini adalah selector CSS yang menargetkan semua elemen gambar (<img>) di halaman web.

  2. clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);: Properti ini menentukan bentuk poligon kustom yang digunakan untuk memotong elemen gambar. Poligon ini memiliki sepuluh titik sudut yang didefinisikan oleh koordinat relatif terhadap lebar dan tinggi elemen gambar.

    • Setiap pasangan nilai dalam polygon() menentukan koordinat X (horizontal) dan Y (vertikal) dari titik sudut poligon.
    • Titik-titik ini membentuk poligon yang melingkar di sekitar gambar.

Dengan menggunakan poligon ini, gambar akan terpotong menjadi bentuk poligon yang kompleks, sesuai dengan titik-titik sudut yang telah ditentukan.

Artikel Lainnya Dengan Kategori Terkait :


1. 1 Menit Langsung Paham GAP Property CSS

2. 3 Trik Pada CSS

3. 4 Layout CSS Modern

4. 5 Tata Letak Modern di CSS

5. 5 Website Generator CSS

6. ALIGN ITEMS

7. ALIGN-SELF

8. Beberapa Cara Untuk Memusatkan Item Menggunakan CSS

9. Beberapa Contoh Gaya Powerfull Snippet

10. Beberapa Variasi Style CSS Button

11. Belajar CSS #01 | Apa Itu CSS?

12. Belajar CSS #02 | Inline CSS

13. Belajar CSS #03 | Internal CSS

14. Belajar CSS #04 | External CSS

15. Belajar CSS #05 | Syntax CSS

16. Belajar CSS #06 | Belajar lebih banyak cara menggunakan CSS Selector

17. Belajar CSS #07 | Pseudo-class

18. Belajar CSS #08 | Definisi Box Model

19. Belajar CSS #09 | Perhitungan Ukuran Lebar dan Tinggi Box Model

20. Belajar CSS #10 | box-sizing: border-box

21. Belajar CSS #11 | Display block

22. Belajar CSS #12 | Belajar display-inline

23. Belajar CSS #13 | Belajar Display Inline Block

24. Belajar CSS #14 | Position-static

25. Belajar CSS #15 | Position-relative

26. Belajar CSS #16 | position absolute

27. Belajar CSS #17 | position fixed

28. Belajar CSS #18 | Position Sticky

29. Belajar CSS #19 | Web Responsif - Viewport

30. Belajar CSS #20 | Menggunakan presentase untuk menentukan nilai lebar

31. Belajar CSS #21 | Properti Max width 100%

32. Belajar CSS #22 | Satuan "VW" Viewport Width

33. Belajar CSS #23 | Media query

34. Belajar CSS #24 | Belajar display-inline

35. Belajar CSS #25 | Display-none

36. Belajar Membuat Fitur Interaktif Efek Flipping Card Menggunakan CSS

37. Belajar Mengenal Neon Text Pada CSS

38. Buat Desain Web Responsif CSS

39. Cara Membuat Badges Dengan HTML & CSS

40. Cara Membuat Balon Obrolan dengan CSS

41. Cara Membuat Efek Teks Berisi Gambar Pakai CSS

42. Cara Membuat Pemisah Antar Elemen di CSS

43. Cara Membuat Underline Tabs CSS

44. Cara Mengatur Proporsi Sebuah Teks di CSS

45. Contoh Penggunaan Grid Shorthand Area

46. CSS Media Queries

47. CSS MODERN LAYOUT

48. CSS Positioning

49. CSS SHORTHAND

50. Explorasi CSS Pulse Loader: Cara Efektif Membuat Animasi Form dengan CSS

51. Faded Background in CSS

52. GAP IN CSS FLEXBOX

53. Gaya Kartu Retro dalam Desain Web dengan CSS

54. Hover Effect Menggunakan CSS

55. How to Make Border Radius in CSS

56. How to make Card-Profile

57. Implementasi Aminasi Label Menggunakan CSSS

58. Implementasi Aspect - ratio CSS

59. Implementasi Jam Analog Sederhana

60. Input HTML Yang Perlu Diketahui

61. Insert Properti dalam CSS: Kunci Mengatur Jarak dalam Elemen HTML

62. Kembangkan Tampilanmu: 10 Trik Keren dengan CSS Filter 😎

63. Macam-Macam Properti Di CSS

64. Mask Text With Image In CSS

65. Memahami Anatomi CSS: Gaya yang Tepat untuk Elemen HTML

66. Memahami Efek Vignette dalam Desain Grafis dan Implementasinya dalam Kode HTML/CSS

67. Memahami Konsep Stretch Background dalam Desain Web : Membuat Gambar Latar Belakang Sesuai dengan Ukuran Elemen

68. Memahami Persingkatan CSS untuk Font: Penggunaan Singkat yang Efisien

69. Memahami Responsivitas Web dengan CSS :hover

70. Membuat Bentuk Organik yang Unik Menggunkan Simple Blob Shape

71. Membuat Button Menggunakan Tag Button

72. Membuat Latar Belakang "Faded" yang Elegan dengan CSS

73. Membuat Layout Yang Responsif Dengan CSS

74. Membuat Tampilan yang lebih Teratur menggunakan Elemen Opgroup dalam Select HTML

75. Membuat Tata Letak Secara Vertikal dan Horizontal dengan CSS Grid

76. Membuat Teks Lebih Menarik dengan CSS: Menggunakan Properti text-decoration

77. Mempelajari Border Pada CSS dan Trik Penulisan Singkat

78. Mempelajari Button Menggunakan Tag Button

79. Mempelajari Filter Blur Pada CSS

80. Mempelajari Penggunaan Margin dalam CSS

81. Mempelajari Selector :active Pada CSS

82. Mempercantik Pengalaman Pengguna dengan Efek Hover Menggunakan Selector CSS :has()

83. Mengatasi Teks Panjang dengan Efek Elipsis Long Text

84. Mengenal 3 Trik Pemusatan div

85. Mengenal CSS Clip-Path: Memotong Elemen dengan Berbagai Bentuk

86. Mengenal CSS Shapes: Membuat Bentuk-Bentuk Kreatif di Halaman Web

87. Mengenal Efek Kaca Glassmorphism Pada CSS

88. Mengenal Flex Wrap Pada CSS

89. Mengenal Flexbox - Flex Direction CSS

90. Mengenal Macam-macam Border Pada CSS

91. Mengenal Nilai Selector :nth-child() dalam CSS

92. Mengenal Properti CSS accent-color dan Penggunaannya

93. Mengenal Sematik Pada HTML

94. Menggunakan :is() untuk Menyederhanakan Selektor yang Rumit dalam CSS

95. Menggunakan Pseudo-Class :is() untuk Menjadikan Tombol Lebih Interaktif

96. Mengoptimalkan Tampilan Halaman Web dengan Media Query Orientation

97. Perbedaan Antara 'box-shadow' dan 'drop-shadow' dalam CSS untuk Efek Bayangan🌟

98. Perbedaan Antara content-box dan border-box dalam CSS:

99. Perbedaan Box Shadow vs Drop Shadow

100. Properti Justify-Content dalam CSS Flexbox

101. Pseudo-Class :has() dalam CSS

102. Responsive Button

103. Retro Card In CSS

104. Sebuah Trik Script Singkat Menggunakan CSS

105. Snippet

106. Stlanted Section

107. Syntax Baru Rentang Media Query pada CSS

108. TABULAR NUMBERS

109. Tampilan Modern dan Fungsional: Memahami Keunggulan Blur Sticky Navbar dalam Desain Situs Web

110. Tips Dasar CSS Yang Perlu Diketahui

111. Tips untuk Menggunakan Border Radius dalam Desain 🌟

112. Unveiling Hidden CSS Tricks

113. Zoom on hover

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya