Градиент для текста на CSS
HTML-код
- Опубликовано: 11 окт 2024
- В этом видео разберемся как добавить градиент для текста на вашем сайте используя чистый CSS. В этом нам помогут linear-gradient, background-clip, text-fill-color.
// Материалы урока =================
Основы HTML и CSS: brainscloud.ru...
Файлы урока: files.brainscl...
webgradients.com/
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #html #css #css3
Как дела? Как видео?)
заебись. четко. в натуре класс.
Познавательно. Интересно будут похожие видео о малоизвестных css свойствах
@@murshi2343 Думал об этом, возможно в ближайшем будущем создам
Спасибо, классное видео
Спасибо за видео, полезно. Я тут столкнулся с задачей где нужно сверстать фильтр диапазона двойным ползунком, интересно было бы как это правильно сделалть.
Побольше таких , коротеньких видео-шпаргалок, очень помогают, прошу вас больше таких! Спасибо)
Как получается ) я рад что вам нравится!
Можно и span использовать, можно и display:inline-block, удивляюсь комментаторам, программирование является творческой профессией - можно использовать разные подходы для решений одной задачи) Тут уже дело индивидуальных предпочтений человека. Прекрасный урок и очень полезный, мало кто знает про такую, так сказать, фишку) Единственное добавлю, может кому будет полезно, вместо -webkit-text-fill-colo можно прописать color: transparent. И проще, и эффект тот же)
Это лучшее решение, которое я видел. Молодец!
Супер! Многие люди в своих видеоуроках не обращают внимания на такие мелочи. Им кажется, что это и Ежу понятно, но на самом деле все куда запутаннее, чем они себе представляют. Для новичков особенно важны такие моменты. Молодец, все разжевал и по полочкам разложил!
Блин, твои уроки это просто находка для меня. Спасибо что делаешь это!
Вот спасибо тебе. Надо аддон Заголовок было поставить и там можно и градиенты вставлять на текст. Я понял когда смотрел про тень!!! За сервис спасибо тоже
Месяца 3-4 назад долго искал как это сделать так и не нашел.
Спасибо за видео!
Пожалуйста!
Отличное видео, все по делу! Кто ясно мыслит - то ясно излагает)
Спасибо, было очень полезно)
Как раз столкнулся с этой проблемой и ломал голову как ее решить)
Спасибо! Как всегда все четко и по делу.
Пожалуйста!
Спасибо,Дмитрий.Нужный урок! Ждем новых видео!
Спасибо большое выручил)
вооуу ты лучший. Спасибо огромное.
Очень интересно . Само -по себе..
Спасибо большое! Помогло разобраться
Спасибо!)
Интересное свойство, спасибо, смотрим )
спасибо тебе большое)))))))))))))))
Круто
Привет, спасибо за урок)
Thank you so much 😊 Keep it up 👍
для H1 можно было указать свойство display: inline-block и обойтись без span.
ДАААААА ЭТО ОНО
Очень годно, Спасибо)
Подскажите, как менять цвет текста на градиент? Дело в том, что когда убираю курсор, на мгновение у текста появляется фон
Дмитрий, Вы не хотите переделать курс по html css как у Вас был курс "сайтотворец", где сначала разбирался синтаксис и свойства, а потом Вы верстали макет. Так вот, теперь чоы курс был сначала с макетом на флоатах, а потом на гридах?
Все может быть, спасибо за фидбек!
Мне кажется, ибо не проверял еще, но можно было не брать в span а задать диву display: inline-block
А если нужно чтобы заголовок был блочным? Суть то урока не в этом, ситуации разные то бывают. Суть показать как делать, а что в вашем случае использовать block, inline-block для заголовка, дело уже вторичное.
Видео класс, за него большое спасибо. Но у меня появился вопрос (на самом деле, он мучает меня давно), а что такое webkit? Для чего он указывается перед свойством?
префикс для браузера chrome/safari. Указывается для некоторых свойств для поддержки более старых версий браузеров
Спасибо. Я пыталась найти ответ в интернете, но там все было как-то непонятно.
@@carolbounce49 скачай приложение sololearn, очень хорошее приложение, куча языков, всё понятно, даётся база знаний
Привет. Что у тебя за Мак?
Старая прошечка
Здравствуйте! Спасибо за видео. Подскажите, четкую тень такому тексту добавить как-нибудь возможно?
Используйте text-shadow
@@BrainsCloud , при использовании text-shadow тень перекрывает фон, с помощью которого сделан градиент и, так как буквы прозрачные,они становятся грязно-серого (цвета тени) цвета.
@@reginayashina4465 ну тогда значит никак
Подскажите как анимировать градиент
Так почему span то именно?
Привет расскажи пожалуйста где можно взять свой 1 заказ по созданию сайта?
иди на КВОРК, там конкуренция бешеная и цены мизерные, но 1 из 10 заказчик который заплатит адекватно. Напиши мне в ВК, помогу (БЕСПЛАТНО/БЕЗВОЗМЕЗДНО). ID leon9208
Можешь ответить, сколько зарабатываешь?
Эм, мне на почту пришло это в чем прикол.НА ПОЧТУ КАРЛ
вот это поворот