HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS
warna RGB HEX HSL
Latar Belakang CSS
Warna latar belakang Gambar latar belakang Pengulangan Latar Belakang Lampiran Latar Belakang Singkatan Latar Belakang
Batas CSS
perbatasan Lebar Perbatasan Warna Perbatasan Sisi Perbatasan Singkatan Perbatasan Perbatasan Bulat
Margin CSS
Margin Margin Collapse
Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Teks CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikon CSS Tautan CSS Daftar CSS Tabel CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float
Float Clear Float Examples
CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS
Navbar Vertical Navbar Horizontal Navbar
Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS
Linear Gradients Radial Gradients Conic Gradients
Bayangan CSS
Shadow Effects Box Shadow
Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Warna CSS

❮ Sebelumnya Berikutnya ❯

CSS mendukung 140+ nama warna, nilai HEX, nilai RGB , nilai RGBA, nilai HSL, nilai HSLA, dan opacity.

Warna RGBA

Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran alfa - yang menentukan opasitas untuk warna.

Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha). Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0.4);
rgba (255, 0, 0, 0.6);
rgba (255, 0, 0, 0.8);

Contoh berikut mendefinisikan warna RGBA yang berbeda:

Contoh

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Warna HSL

HSL adalah singkatan dari Hue, Saturation dan Lightness.

Nilai warna HSL ditentukan dengan: hsl(hue, saturation, lightness).

  1. Hue adalah derajat pada roda warna (dari 0 hingga 360):
    • 0 (atau 360) berwarna merah
    • 120 berwarna hijau
    • 240 berwarna biru
  2. Saturasi adalah nilai persentase: 100% adalah warna penuh.
  3. Ringan juga merupakan persentase; 0% gelap (hitam) dan 100% putih.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Contoh berikut mendefinisikan warna HSL yang berbeda:

Contoh

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Warna HSLA

Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alfa - yang menentukan opasitas untuk warna.

Nilai warna HSLA ditentukan dengan: hsla(hue, saturation, lightness, alpha), di mana parameter alpha mendefinisikan opacity. Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).

hsla (0, 100%, 30%, 0.3);
hsla (0, 100%, 50%, 0.3);
hsla (0, 100%, 70%, 0.3);
hsla (0, 100%, 90%, 0.3);

Contoh berikut mendefinisikan warna HSLA yang berbeda:

Contoh

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Kegelapan

Properti CSS opacitymenyetel opacity untuk seluruh elemen (warna latar belakang dan teks akan buram/transparan).

Nilai opacityproperti harus berupa angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Perhatikan bahwa teks di atas juga akan menjadi transparan/buram!

Contoh berikut menunjukkan elemen yang berbeda dengan opacity:

Contoh

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

Uji Diri Anda Dengan Latihan

Olahraga:

Masukkan nilai warna RGBA untuk warna latar belakang merah penuh dari elemen <h1>, tanpa transparansi.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Sebelumnya Berikutnya ❯