CSS3 #15 Градиенты (Gradients)
#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZread: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Пікірлер: 47
Просто и доступно! Спасибо!
@YauhenKavalchuk
3 жыл бұрын
Пожалуйста
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
Жыл бұрын
👍
Спасибо за урок!
@YauhenKavalchuk
3 жыл бұрын
Пожалуйста
Женя спасибо тебе!
@YauhenKavalchuk
3 жыл бұрын
Пожалуйста)
Спасибо👏👏👏
@YauhenKavalchuk
3 жыл бұрын
Пожалуйста
Хороший урок
@YauhenKavalchuk
7 ай бұрын
Спасибо
Круто) А по mask-image тоже можно урок?) Для мобильников хочу сделать затемнение по бокам для хлебных крошек, чтобы видно было, что их можно скроллить. В инете нашёл только для правого края mask-image: linear-gradient(to right, white 90%, transparent). Подскажите плз, а как можно сделать одновременно и для левого? Если писать через запятую градиенты сначала to left и потом to right, то перестаёт работать :(
@YauhenKavalchuk
Жыл бұрын
Данный курс уже завершён и доснимать его не планирую. Возможно в будущем обновлю и дополню отдельным новым курсом
👍👍👍
@YauhenKavalchuk
Жыл бұрын
👍
Добрый день! Можно ли скрыт элемент css и открыть её после события onclick на button в js. Например поле с характеристиками товара или что-то подобное.
@ridl27
3 жыл бұрын
все что хочешь можно. вешай и убирай классы при клике.
@YauhenKavalchuk
3 жыл бұрын
Конечно можно
@malytv1170
3 жыл бұрын
@@YauhenKavalchuk Сможете сделат подобное видео? На ютубе нет подобного видео. Но многим это интерестно.
А почему если применить линейный градиент к html или к body появляются горизонтальные полосы в которых и формируется градиент, а не на весь экран ?
@YauhenKavalchuk
3 жыл бұрын
Примените градиент только на body и растяните его на 100vh
Почему в конце у вас стал резким ,можно градиент сделать более плавным как вы сделали в начале?или это не работает?
@YauhenKavalchuk
Жыл бұрын
В видео я показал все возможности и работу
Привет всем! Делаю градиент клетка с полями, как школьная тетрадь. У меня возникли трудности. Можно сделать как то, чтобы background-size не применялся к одному из слоев linear-gradient.
@YauhenKavalchuk
Жыл бұрын
Без кода трудно понять какой у вас подход(. Но если всё сделано в одном градиенте перечислением, то нет
@luchiksolnca6039
Жыл бұрын
@@YauhenKavalchuk спасибо за ответ, я нашел решение использовав :before и border-right
Не понимаю почему так происходит: background-image: linear-gradient(to left, transparent 51%, blue 49%); background-image: linear-gradient(to left, transparent 50%, blue 50%); background-image: linear-gradient(to left, transparent 49%, blue 51%); Почему после 50% градиент становится плавным, а до резким. Как сохранить резкий переход после 50%?
@user-ev4vh8cm2x
Жыл бұрын
Тоже туго понимаю, но попробуй задай допустим одинаковый процент двум цветам, допустим red 20% blue 20% и синему цвету поднимай процент 21% и тд.. получается от резкого плавный переход от этой точки.
@AiMaster69
Жыл бұрын
@@user-ev4vh8cm2x Осталось понять причем тут red, если мне нужен градиент из двух цветов, где один из них полностью прозрачен.
У меня возникает проблема. Когда я делаю линейный гиадиент сверху вниз, то у меня фон полностью пропадает или становится градиентом на короткие дистанции, т.е на сайте градиент не один, а много коротких😢
@YauhenKavalchuk
9 ай бұрын
Не видя кода и результата трудно чем-то помочь(
@nelavas4651
9 ай бұрын
@@YauhenKavalchuk я уже нашёл решение. Вместо: background:linear-gradient(..,..,..); написать: background:linear-gradient(..,..,..) fixed;
@YauhenKavalchuk
9 ай бұрын
👍
Мне 10 лет а занимаюсь уже где-то 2 месяца прошел полный курс по HTML5 теперь CSS. Уже создавал сайт по типу кинокрада
@YauhenKavalchuk
2 жыл бұрын
👍
@deterkot
Жыл бұрын
хорош
Что делать если градиент повторяется?
@YauhenKavalchuk
2 жыл бұрын
Пересмотрите урок, там подробно описана вся работа с градиентами. В том числе и ответ на ваш вопрос
@user-nc2xw1zb3y
2 жыл бұрын
@@YauhenKavalchuk я пытался выставить background-repeat: no-repeat, но градиент полностью пропадал.
4:30 сложновато для понимания с непривычки.
@YauhenKavalchuk
Жыл бұрын
Пару раз потренируетесь на практике и всё будет ок)
про проценты не совсем понятно
@YauhenKavalchuk
2 жыл бұрын
Процент - это процент фигуры, на которую вы добавляете градиент, который будет заполнен одним цветом
прошу прощения - код не зачеркнут , но на экране нет градиента
@YauhenKavalchuk
Жыл бұрын
Понятия не имеет в чём может быть проблема
@GANDON229
3 ай бұрын
тоже