Bagaimanakah Saya Boleh Mencipta Warna Warna CSS Seperti Fungsi `darken()` Sass Hanya Menggunakan Pembolehubah CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Warna Warna CSS Seperti Fungsi `darken()` Sass Hanya Menggunakan Pembolehubah CSS?

Mary-Kate Olsen

Lepaskan： 2024-12-13 03:31:09

asal

420 orang telah melayarinya

How Can I Create CSS Color Shades Like Sass's `darken()` Function Using Only CSS Variables?

Mencipta Warna Warna dengan Pembolehubah CSS: Mensimulasikan Fungsi Sass Darken()

Pernyataan Masalah:

Mencipta rona warna dinamik untuk tuding, fokus dan keadaan aktif menggunakan pembolehubah CSS dengan cara yang serupa dengan Sass fungsi darken().

Penyelesaian:

Spesifikasi Modul Warna CSS Tahap 4 memperkenalkan "sintaks warna relatif," yang membolehkan manipulasi warna menggunakan operasi aritmetik. Ini membolehkan penciptaan rona warna seperti berikut:

:root {
  --color-primary: #f00; /* any format you want here */
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

Salin selepas log masuk

Dalam kod ini:

var(--color-primary) ialah warna asal.
--warna-utama-lebih gelap adalah 5% lebih gelap daripada --warna-utama.
--warna-utama-gelap adalah 10% lebih gelap daripada --warna-utama.

Dengan melaraskan peratusan dalam ungkapan calc(), anda boleh menjana pelbagai warna warna asas. Pendekatan ini menyediakan fungsi yang serupa dengan fungsi darken() Sass, tetapi menggunakan sintaks CSS semata-mata.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Warna Warna CSS Seperti Fungsi `darken()` Sass Hanya Menggunakan Pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!