8. CSS фоновый цвет, изображение, градиент — свойство background, функция linear-gradient

✏️ Поговорим про фоновый цвет, фоновое изображение и градиенты. Обсудим свойство background и все его подсвойства, а так же рассмотрим работу с функцией linear-gradient.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:19​ | Свойство background
▶ 00:51​ | Свойство background-color
▶ 01:25​ | Свойство background-image
▶ 01:40​ | Несколько фоновых изображений
▶ 02:11​ | Свойство background-repeat
▶ 03:22​ | Свойства background-repeat-x и background-repeat-y
▶ 03:33​ | Свойство background-position
▶ 04:47​ | Свойство background-size
▶ 06:05​ | Где background-size cover не нужен
▶ 06:51​ | Свойство background-attachment
▶ 07:03​ | Свойство background-attachment fixed
▶ 07:19​ | Свойство background-attachment local
▶ 07:36​ | Свойство background-clip
▶ 07:45 | Свойство background-clip border-box
▶ 07:51​ | Свойство background-clip padding-box
▶ 07:57​ | Свойство background-clip content-box
▶ 08:05​ | Свойство background-clip text
▶ 08:44​ | Градиенты в CSS
▶ 09:03​ | Градиенты repeating
▶ 09:14​ | Градиент linear-gradient
▶ 09:46​ | Направление градиента
▶ 10:26​ | Направление градиента через turn
▶ 10:40​ | Направление градиента через ключевые слова
▶ 10:58​ | Точки перехода цвета в градиенте
▶ 11:47​ | Генераторы CSS-градиентов
▶ 12:01​ | Применение обобщенного свойства для задания цвета
▶ 12:38​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[svitboomer]

Прекрасный день начинается с просмотров твоих видео

[SabrZhaslanuly]

Привет Саша, спасибо за твой труд

Для тех кто не в курсе: если вы указываете несколько изображении через запятую, то если требуется отдельно задать какое-то свойство для фона, например: background-size, то параметры для каждого фона перечисляются через запятую.

.example {
background-image:
url("../img/pineapple.png"),
url("../img/cat.jpg");
background-size:
300px,
100% auto;
}

Надеюсь кому-то это поможет сам частенько читаю комменты под твоими видео так как там можно найти что-то интересное и познавательное🙂

[АлександрБекач]

А вот тут меня даже порадовало, что я выстрелил наугад) Сегодня как раз в своём проекте игрался с цветом менюшки и поставил background-color) Мелочь, но приятно)
Про градиенты - так вроде ничего трудного нет? Или это просто автор так хорошо всё объясняет?))
Спасибо за очередной прекрасный урок! CSS становится более понятен, чем больше погружаешься в него. А впереди еще будет много нового на курсе, о чём ранее никто не рассказывал. Уже жду, когда доберусь до новых тем)

[TradingRF]

Сколько же труда вы вкладываете в свои видео! Обалдеть!

[sweeqty]

Спасибо за твой труд, продолжай в том же духе :)

[slamedesign]

Как же я каждый видос ору с этих картинок с мемными котиками ^_^

[Ivanfwit]

Спасибо за видео, с фонами бывает путаница, особенно когда они состоят из нескольких фото и градиентов 😬

[colodatwin]

Thank you for the lesson! А подскажите как лучше всего будет задавать фоновое изображение, и почему? Через background image в css или через тег img в html?

[geloszotack]

Сделал я background-image: linear-gradient появляются полосы или при адаптиве он сбрасывается и начинает повторятся, как исправить это?

[doomedmundane]

Привет! Спасибо за урок. У меня есть проблема с тем, чтобы уменьшить яркость фонового изображения и, при этом, не затронуть яркость иных элементов контейнера. Код выглядит так:

.first-title {
color: rgb(255, 255, 255);
border: 2px solid rgb(252, 252, 252);
border-radius: 20px;
}

header {
text-align: center;
background-image:
filter:brightness(0.5);
padding: 20px;
border-radius: 20px;
}
first-title находится в пределах header. Как я могу исправить это?

[ИлососПро]

Всем привет. Почему у меня не включается linear-gradient ? тестирую через яндекс браузер

[kirillkononov]

Отличный урок!
теперь уже пора переходить к более сложным темам? :))
Пример:
1. Позиционирование _ absolute/ static/ relative/Fixed
что то там еще про sticky и Z-индекс добавить. Практика прижатые подвал и шапка ))
2. Обтекание текста - Флоат (устарело наверное совсем)
3. Flex/ Grid
4. Наследование (каскады) это часто встречается "родительский элемент" но тут есть вложенные элементы, вес при исполнении, SCSS (отступы)
5. Переменные и Миксины - зачем это нужно и как это ускоряет вёрстку. Тут как мне кажется уже можно говорить про компоненты (как в react.js) как разбить свойства CSS на логические блоки и их вкладывать в общий style.css через @@@ импорты.
6. SVG
7 Анимации.
Вот еще сколько впереди
Будет такое? )))

[SabyrzhanZhaslanuly-qq]

Привет

Могу ли я не учить css, а просто изучать js после html?
Сейчас активно учу js и совсем нет желания учить css. По немногу прохожу твой курс, но с неохотностью (твой курс классный, но я просто не хочу учить css)
Это нормально?

[Sasijoopute]

бл*** как отступы эти сраные автоматические убрать если ни padding: 0;
margin: 0; не помогают задаю их для боди