TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Расскажи про особенности свойства color

color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).

p {
color: red;
}


🟠Какие значения принимает `color`?
CSS позволяет задавать цвета несколькими способами

🟠Особенности работы `color`
Наследование
color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).
body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}


currentColor — скрытое золото
Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.
button {
color: red;
border: 2px solid currentColor; /* Использует color */
}


transparent — особый цвет
p {
color: transparent;
}


Когда rgba() или hsla() лучше
p {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}


color и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}


color в ::selection и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color
::selection {
background: blue;
color: white;
}

input::placeholder {
color: gray;
}


Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про особенности свойства color

color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).
p {
color: red;
}


🟠Какие значения принимает `color`?
CSS позволяет задавать цвета несколькими способами

🟠Особенности работы `color`
Наследование
color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).
body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}


currentColor — скрытое золото
Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.
button {
color: red;
border: 2px solid currentColor; /* Использует color */
}


transparent — особый цвет
p {
color: transparent;
}


Когда rgba() или hsla() лучше
p {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}


color и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}


color в ::selection и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color
::selection {
background: blue;
color: white;
}

input::placeholder {
color: gray;
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)