А вот тут меня даже порадовало, что я выстрелил наугад) Сегодня как раз в своём проекте игрался с цветом менюшки и поставил background-color) Мелочь, но приятно) Про градиенты - так вроде ничего трудного нет? Или это просто автор так хорошо всё объясняет?)) Спасибо за очередной прекрасный урок! CSS становится более понятен, чем больше погружаешься в него. А впереди еще будет много нового на курсе, о чём ранее никто не рассказывал. Уже жду, когда доберусь до новых тем)
Привет Саша, спасибо за твой труд Для тех кто не в курсе: если вы указываете несколько изображении через запятую, то если требуется отдельно задать какое-то свойство для фона, например: background-size, то параметры для каждого фона перечисляются через запятую. .example { background-image: url("../img/pineapple.png"), url("../img/cat.jpg"); background-size: 300px, 100% auto; } Надеюсь кому-то это поможет сам частенько читаю комменты под твоими видео так как там можно найти что-то интересное и познавательное🙂
Отличный урок! теперь уже пора переходить к более сложным темам? :)) Пример: 1. Позиционирование _ absolute/ static/ relative/Fixed что то там еще про sticky и Z-индекс добавить. Практика прижатые подвал и шапка )) 2. Обтекание текста - Флоат (устарело наверное совсем) 3. Flex/ Grid 4. Наследование (каскады) это часто встречается "родительский элемент" но тут есть вложенные элементы, вес при исполнении, SCSS (отступы) 5. Переменные и Миксины - зачем это нужно и как это ускоряет вёрстку. Тут как мне кажется уже можно говорить про компоненты (как в react.js) как разбить свойства CSS на логические блоки и их вкладывать в общий style.css через @@@ импорты. 6. SVG 7 Анимации. Вот еще сколько впереди ))))) Будет такое? )))
Привет! Спасибо. Да, почти все эти темы будут, контент-план и на этот курс в частности давно расписан, но производить больше двух уроков в неделю не выходит :) 1. Позиционирование - как раз одна из тем следующей недели. 2. Флоат в 2023-м не нужен, весьма ситуативное свойство. 3. Флексы с гридами будут, куда ж без них. 4. Про каскад и наследование была информация в первом уроке этого курса. SCSS - совсем иная тема, с чистым CSS пока мешать не хочу. 5. Про средства автоматизации будет много видосов. Есть крутая идея по автоматизации верстки для новичков через инструменты из мира React'а. 6. С SVG в 90% взаимодействие на уровне «выгрузить из макета иконку, поместить в разметку, чтобы потом покрасить». Глубоко копать новичкам не нужно :) Но на будущее - да, более детальный разбор SVG планируется. 7. Анимации - будут в конце курса.
Thank you for the lesson! А подскажите как лучше всего будет задавать фоновое изображение, и почему? Через background image в css или через тег img в html?
Фоновое изображение на то и фоновое и устанавливать его нужно через CSS свойство background. Но в любом случае всё зависит от ситуации: - фоновые картинки в баннере зачастую удобнее делать через background - изображения товаров в карточках товаров через тег - иконки через тег - какие-то украшательства на фоне, типа линий, фигур и т.п. тоже через background
@@AleksanderLamkov просто не раз видел, что задают фон через тег img в HTML ссылаясь на то, что потом её потом будут изменять , и когда картинка указана в HTML это сделать легче.
@colodatwin3102 в этом есть смысл, если разрабатывается не SPA и бэкендер, занимающийся сайтом, не знает CSS. Можно ведь поменять фоновое изображение через атрибут style в HTML и указание background-image.
Если бэкендер корректно «натянул» верстку на CMS, то на уровне админки сайта контент-менеджер заполняет поле загрузки картинки и затем CMS автоматически подставит url картинки в style="background-image: url(…)" любому элементу.
Привет! Спасибо за урок. У меня есть проблема с тем, чтобы уменьшить яркость фонового изображения и, при этом, не затронуть яркость иных элементов контейнера. Код выглядит так: .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. Как я могу исправить это?
Привет! Спасибо за комментарий :) Объясняю решение: 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: … }
Привет Могу ли я не учить css, а просто изучать js после html? Сейчас активно учу js и совсем нет желания учить css. По немногу прохожу твой курс, но с неохотностью (твой курс классный, но я просто не хочу учить css) Это нормально?
@@AleksanderLamkov А если ситуация наооборот верстка пошла бодро и затянула, а вот изучение JS стало пыткой. Какие могут быть решения исправить ситуацию? Может все дело в отсутствии алгоритмического мышления? Или какой у Вас был опыт обучения JS? Заранее спасибо за ответ!
Надо научиться связывать JS и верстку, тогда попрёт. Кайф начинается, когда видишь синергию технологий. Алгоритмическое мышление - это навык, который нарабатывается самостоятельно, когда выполняешь типичные задачки фронтендера: открыть меню по клику на кнопку, подвинуть слайд при свайпе, провалидировать введенные пользователем данные в форму и так далее. Решение всех этих задачек - тоже «алгоритм».
Сколько же труда вы вкладываете в свои видео! Обалдеть!
Прекрасный день начинается с просмотров твоих видео
А вот тут меня даже порадовало, что я выстрелил наугад) Сегодня как раз в своём проекте игрался с цветом менюшки и поставил background-color) Мелочь, но приятно)
Про градиенты - так вроде ничего трудного нет? Или это просто автор так хорошо всё объясняет?))
Спасибо за очередной прекрасный урок! CSS становится более понятен, чем больше погружаешься в него. А впереди еще будет много нового на курсе, о чём ранее никто не рассказывал. Уже жду, когда доберусь до новых тем)
Привет Саша, спасибо за твой труд
Для тех кто не в курсе: если вы указываете несколько изображении через запятую, то если требуется отдельно задать какое-то свойство для фона, например: background-size, то параметры для каждого фона перечисляются через запятую.
.example {
background-image:
url("../img/pineapple.png"),
url("../img/cat.jpg");
background-size:
300px,
100% auto;
}
Надеюсь кому-то это поможет сам частенько читаю комменты под твоими видео так как там можно найти что-то интересное и познавательное🙂
Спасибо за полезную информацию! :)
Спасибо за видео, с фонами бывает путаница, особенно когда они состоят из нескольких фото и градиентов 😬
Отличный урок!
теперь уже пора переходить к более сложным темам? :))
Пример:
1. Позиционирование _ absolute/ static/ relative/Fixed
что то там еще про sticky и Z-индекс добавить. Практика прижатые подвал и шапка ))
2. Обтекание текста - Флоат (устарело наверное совсем)
3. Flex/ Grid
4. Наследование (каскады) это часто встречается "родительский элемент" но тут есть вложенные элементы, вес при исполнении, SCSS (отступы)
5. Переменные и Миксины - зачем это нужно и как это ускоряет вёрстку. Тут как мне кажется уже можно говорить про компоненты (как в react.js) как разбить свойства CSS на логические блоки и их вкладывать в общий style.css через @@@ импорты.
6. SVG
7 Анимации.
Вот еще сколько впереди )))))
Будет такое? )))
Привет! Спасибо. Да, почти все эти темы будут, контент-план и на этот курс в частности давно расписан, но производить больше двух уроков в неделю не выходит :)
1. Позиционирование - как раз одна из тем следующей недели.
2. Флоат в 2023-м не нужен, весьма ситуативное свойство.
3. Флексы с гридами будут, куда ж без них.
4. Про каскад и наследование была информация в первом уроке этого курса. SCSS - совсем иная тема, с чистым CSS пока мешать не хочу.
5. Про средства автоматизации будет много видосов. Есть крутая идея по автоматизации верстки для новичков через инструменты из мира React'а.
6. С SVG в 90% взаимодействие на уровне «выгрузить из макета иконку, поместить в разметку, чтобы потом покрасить». Глубоко копать новичкам не нужно :) Но на будущее - да, более детальный разбор SVG планируется.
7. Анимации - будут в конце курса.
спасибо за видео.
Лайк
Спасибо
Thank you for the lesson! А подскажите как лучше всего будет задавать фоновое изображение, и почему? Через background image в css или через тег img в html?
Фоновое изображение на то и фоновое и устанавливать его нужно через CSS свойство background.
Но в любом случае всё зависит от ситуации:
- фоновые картинки в баннере зачастую удобнее делать через background
- изображения товаров в карточках товаров через тег
- иконки через тег
- какие-то украшательства на фоне, типа линий, фигур и т.п. тоже через background
@@AleksanderLamkov просто не раз видел, что задают фон через тег img в HTML ссылаясь на то, что потом её потом будут изменять , и когда картинка указана в HTML это сделать легче.
@colodatwin3102 в этом есть смысл, если разрабатывается не SPA и бэкендер, занимающийся сайтом, не знает CSS. Можно ведь поменять фоновое изображение через атрибут style в HTML и указание background-image.
А если клиент через CMS хочет поменять изображение?
Если бэкендер корректно «натянул» верстку на CMS, то на уровне админки сайта контент-менеджер заполняет поле загрузки картинки и затем CMS автоматически подставит url картинки в style="background-image: url(…)" любому элементу.
Привет! Спасибо за урок. У меня есть проблема с тем, чтобы уменьшить яркость фонового изображения и, при этом, не затронуть яркость иных элементов контейнера. Код выглядит так:
.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. Как я могу исправить это?
Привет! Спасибо за комментарий :)
Объясняю решение:
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: …
}
@@AleksanderLamkov Благодарю! Завтра попробую. Спасибо за информативные уроки так же!
Всем привет. Почему у меня не включается linear-gradient ? тестирую через яндекс браузер
Привет! Нужно смотреть в DevTools. Выдели элемент и проанализируй вкладку Styles. Если синтаксис написал неправильный, то свойство будет перечеркнуто.
Благодарю, получилось)))@@AleksanderLamkov
Привет
Могу ли я не учить css, а просто изучать js после html?
Сейчас активно учу js и совсем нет желания учить css. По немногу прохожу твой курс, но с неохотностью (твой курс классный, но я просто не хочу учить css)
Это нормально?
Привет! Если только хочешь быть бэкендером. Во фронтенде без CSS никуда.
@@AleksanderLamkov Понял, спасибо
@@AleksanderLamkov А если ситуация наооборот верстка пошла бодро и затянула, а вот изучение JS стало пыткой. Какие могут быть решения исправить ситуацию? Может все дело в отсутствии алгоритмического мышления? Или какой у Вас был опыт обучения JS? Заранее спасибо за ответ!
Надо научиться связывать JS и верстку, тогда попрёт. Кайф начинается, когда видишь синергию технологий.
Алгоритмическое мышление - это навык, который нарабатывается самостоятельно, когда выполняешь типичные задачки фронтендера: открыть меню по клику на кнопку, подвинуть слайд при свайпе, провалидировать введенные пользователем данные в форму и так далее. Решение всех этих задачек - тоже «алгоритм».
бл*** как отступы эти сраные автоматические убрать если ни padding: 0;
margin: 0; не помогают задаю их для боди
У body из отступов есть только margin. Вообще, у всех элементов можно их обнулить через селектор-звездочка:
* {
…
}