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

[@slamedesign]

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

[@TradingRF]

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

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

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

[@svitboomer8840]

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

[@Ivanfwit]

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

[@mouri_san]

спасибо за видео.

[@kirillkononov5094]

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

[@AleksanderLamkov]

Привет! Спасибо. Да, почти все эти темы будут, контент-план и на этот курс в частности давно расписан, но производить больше двух уроков в неделю не выходит :) 1. Позиционирование - как раз одна из тем следующей недели. 2. Флоат в 2023-м не нужен, весьма ситуативное свойство. 3. Флексы с гридами будут, куда ж без них. 4. Про каскад и наследование была информация в первом уроке этого курса. SCSS - совсем иная тема, с чистым CSS пока мешать не хочу. 5. Про средства автоматизации будет много видосов. Есть крутая идея по автоматизации верстки для новичков через инструменты из мира React'а. 6. С SVG в 90% взаимодействие на уровне «выгрузить из макета иконку, поместить в разметку, чтобы потом покрасить». Глубоко копать новичкам не нужно :) Но на будущее - да, более детальный разбор SVG планируется. 7. Анимации - будут в конце курса.

[@smotritelyoutube]

Лайк

[@TeomunMete]

Спасибо

[@SabrZhaslanuly]

Привет Саша, спасибо за твой труд Для тех кто не в курсе: если вы указываете несколько изображении через запятую, то если требуется отдельно задать какое-то свойство для фона, например: background-size, то параметры для каждого фона перечисляются через запятую. .example { background-image: url("../img/pineapple.png"), url("../img/cat.jpg"); background-size: 300px, 100% auto; } Надеюсь кому-то это поможет сам частенько читаю комменты под твоими видео так как там можно найти что-то интересное и познавательное🙂

[@AleksanderLamkov]

Спасибо за полезную информацию! :)

[@colodatwin3102]

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

[@AleksanderLamkov]

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

[@colodatwin3102]

@@AleksanderLamkov просто не раз видел, что задают фон через тег img в HTML ссылаясь на то, что потом её потом будут изменять , и когда картинка указана в HTML это сделать легче.

[@AleksanderLamkov]

@colodatwin3102 в этом есть смысл, если разрабатывается не SPA и бэкендер, занимающийся сайтом, не знает CSS. Можно ведь поменять фоновое изображение через атрибут style в HTML и указание background-image.

[@colodatwin3102]

А если клиент через CMS хочет поменять изображение?

[@AleksanderLamkov]

Если бэкендер корректно «натянул» верстку на CMS, то на уровне админки сайта контент-менеджер заполняет поле загрузки картинки и затем CMS автоматически подставит url картинки в style="background-image: url(…)" любому элементу.

[@doomedmundane]

Привет! Спасибо за урок. У меня есть проблема с тем, чтобы уменьшить яркость фонового изображения и, при этом, не затронуть яркость иных элементов контейнера. Код выглядит так: .first-title { color: rgb(255, 255, 255); border: 2px solid rgb(252, 252, 252); border-radius: 20px; } header { text-align: center; background-image: url(joy-division-167444.jpg); filter:brightness(0.5); padding: 20px; border-radius: 20px; } first-title находится в пределах header. Как я могу исправить это?

[@AleksanderLamkov]

Привет! Спасибо за комментарий :) Объясняю решение: 1. Добавь внутрь header дополнительную обертку (то есть оберни всё содержимое в доп. элемент), типа так: … 2. Добавь для header стили: header { position: relative; } 3. Добавь для header-inner стили: .header-inner { position: relative; z-index: 1; } 4. Через CSS сделай для header псевдоэлемент before и перенеси свои свойства background-image и filter туда, сам before растяни через абсолютное позиционирование на максимум. Примерно так: header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: … filter: … }

[@doomedmundane]

@@AleksanderLamkov Благодарю! Завтра попробую. Спасибо за информативные уроки так же!

[@SabyrzhanZhaslanuly-qq]

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

[@AleksanderLamkov]

Привет! Если только хочешь быть бэкендером. Во фронтенде без CSS никуда.

[@SabyrzhanZhaslanuly-qq]

@@AleksanderLamkov Понял, спасибо

[@Kluchnyk_Alexander]

@@AleksanderLamkov А если ситуация наооборот верстка пошла бодро и затянула, а вот изучение JS стало пыткой. Какие могут быть решения исправить ситуацию? Может все дело в отсутствии алгоритмического мышления? Или какой у Вас был опыт обучения JS? Заранее спасибо за ответ!

[@AleksanderLamkov]

Надо научиться связывать JS и верстку, тогда попрёт. Кайф начинается, когда видишь синергию технологий. Алгоритмическое мышление - это навык, который нарабатывается самостоятельно, когда выполняешь типичные задачки фронтендера: открыть меню по клику на кнопку, подвинуть слайд при свайпе, провалидировать введенные пользователем данные в форму и так далее. Решение всех этих задачек - тоже «алгоритм».

[@ИлососПро]

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

[@AleksanderLamkov]

Привет! Нужно смотреть в DevTools. Выдели элемент и проанализируй вкладку Styles. Если синтаксис написал неправильный, то свойство будет перечеркнуто.

[@ИлососПро]

Благодарю, получилось)))@@AleksanderLamkov

[@Sasijoopute]

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

[@AleksanderLamkov]

У body из отступов есть только margin. Вообще, у всех элементов можно их обнулить через селектор-звездочка: * { … }