Градиент для текста на CSS

Рет қаралды 16,119

5 жыл бұрын

В этом видео разберемся как добавить градиент для текста на вашем сайте используя чистый CSS. В этом нам помогут linear-gradient, background-clip, text-fill-color.
// Материалы урока =================
Основы HTML и CSS: brainscloud.ru/landing/html-css
Файлы урока: files.brainscloud.ru/file/gra...
webgradients.com/
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #css3

Пікірлер: 56

@BrainsCloud 5 жыл бұрын

Как дела? Как видео?)

@monsta332 5 жыл бұрын

заебись. четко. в натуре класс.

@yurijol7814 5 жыл бұрын

Познавательно. Интересно будут похожие видео о малоизвестных css свойствах

@BrainsCloud 5 жыл бұрын

@@murshi2343 Думал об этом, возможно в ближайшем будущем создам

@user-ly9uz1fc9q 5 жыл бұрын

Спасибо, классное видео

@TheLazarev88 5 жыл бұрын

Спасибо за видео, полезно. Я тут столкнулся с задачей где нужно сверстать фильтр диапазона двойным ползунком, интересно было бы как это правильно сделалть.

@Dedinside05 5 жыл бұрын

Побольше таких , коротеньких видео-шпаргалок, очень помогают, прошу вас больше таких! Спасибо)

@BrainsCloud 5 жыл бұрын

Как получается ) я рад что вам нравится!

@oleksiiprykhodko517 Жыл бұрын

Это лучшее решение, которое я видел. Молодец!

@user-ln8fs4ik1v 10 ай бұрын

Можно и span использовать, можно и display:inline-block, удивляюсь комментаторам, программирование является творческой профессией - можно использовать разные подходы для решений одной задачи) Тут уже дело индивидуальных предпочтений человека. Прекрасный урок и очень полезный, мало кто знает про такую, так сказать, фишку) Единственное добавлю, может кому будет полезно, вместо -webkit-text-fill-colo можно прописать color: transparent. И проще, и эффект тот же)

@gtfo_evo 5 жыл бұрын

Блин, твои уроки это просто находка для меня. Спасибо что делаешь это!

@user-nz9ct5jx9c 5 жыл бұрын

Спасибо,Дмитрий.Нужный урок! Ждем новых видео!

@user-cc1tx7sz5p 4 жыл бұрын

Отличное видео, все по делу! Кто ясно мыслит - то ясно излагает)

@sheix9736 3 жыл бұрын

Супер! Многие люди в своих видеоуроках не обращают внимания на такие мелочи. Им кажется, что это и Ежу понятно, но на самом деле все куда запутаннее, чем они себе представляют. Для новичков особенно важны такие моменты. Молодец, все разжевал и по полочкам разложил!

@Alexey_Gri 5 жыл бұрын

Интересное свойство, спасибо, смотрим )

@boom6024 4 жыл бұрын

Спасибо большое! Помогло разобраться

@art-avetyan 5 жыл бұрын

Спасибо! Как всегда все четко и по делу.

@BrainsCloud 5 жыл бұрын

Пожалуйста!

@PieceOfInternet 3 жыл бұрын

Спасибо, было очень полезно) Как раз столкнулся с этой проблемой и ломал голову как ее решить)

@user-ur3jd5jd5l 5 жыл бұрын

Очень интересно . Само -по себе..

@user-kl8kb3dj5m 2 жыл бұрын

Спасибо большое выручил)

@nullnothing4397 5 жыл бұрын

Очень годно, Спасибо)

@alistenkurut 3 жыл бұрын

вооуу ты лучший. Спасибо огромное.

@007MrNiko 4 жыл бұрын

Thank you so much 😊 Keep it up 👍

@user-eo4rp8fd8n 3 жыл бұрын

Привет, спасибо за урок)

@todrgor 2 жыл бұрын

Спасибо!)

@AnatoliySharov 5 жыл бұрын

Месяца 3-4 назад долго искал как это сделать так и не нашел. Спасибо за видео!

@BrainsCloud 5 жыл бұрын

Пожалуйста!

@todrgor 3 жыл бұрын

спасибо тебе большое)))))))))))))))

@szxxi 4 жыл бұрын

Круто

@MrArtemisGod Жыл бұрын

ДАААААА ЭТО ОНО

@sergeiverenikin3275 5 жыл бұрын

для H1 можно было указать свойство display: inline-block и обойтись без span.

@nikulans 3 жыл бұрын

Подскажите, как менять цвет текста на градиент? Дело в том, что когда убираю курсор, на мгновение у текста появляется фон

@vladkoroliuk4237 4 жыл бұрын

Подскажите как анимировать градиент

@reginayashina4465 4 жыл бұрын

Здравствуйте! Спасибо за видео. Подскажите, четкую тень такому тексту добавить как-нибудь возможно?

@BrainsCloud 4 жыл бұрын

Используйте text-shadow

@reginayashina4465 4 жыл бұрын

@@BrainsCloud , при использовании text-shadow тень перекрывает фон, с помощью которого сделан градиент и, так как буквы прозрачные,они становятся грязно-серого (цвета тени) цвета.

@BrainsCloud 4 жыл бұрын

@@reginayashina4465 ну тогда значит никак

@user-jc5ck5ph5t 5 жыл бұрын

Дмитрий, Вы не хотите переделать курс по html css как у Вас был курс "сайтотворец", где сначала разбирался синтаксис и свойства, а потом Вы верстали макет. Так вот, теперь чоы курс был сначала с макетом на флоатах, а потом на гридах?

@BrainsCloud 5 жыл бұрын

Все может быть, спасибо за фидбек!

@carolbounce49 4 жыл бұрын

Видео класс, за него большое спасибо. Но у меня появился вопрос (на самом деле, он мучает меня давно), а что такое webkit? Для чего он указывается перед свойством?

@BrainsCloud 4 жыл бұрын

префикс для браузера chrome/safari. Указывается для некоторых свойств для поддержки более старых версий браузеров

@carolbounce49 4 жыл бұрын

Спасибо. Я пыталась найти ответ в интернете, но там все было как-то непонятно.

@kirillusenko 3 жыл бұрын

@@carolbounce49 скачай приложение sololearn, очень хорошее приложение, куча языков, всё понятно, даётся база знаний

@relaxas3401 5 жыл бұрын

Можешь ответить, сколько зарабатываешь?

@user-yd5kr3nz1m 5 жыл бұрын

Привет расскажи пожалуйста где можно взять свой 1 заказ по созданию сайта?

@user-wm4xh4ho2t 5 жыл бұрын

иди на КВОРК, там конкуренция бешеная и цены мизерные, но 1 из 10 заказчик который заплатит адекватно. Напиши мне в ВК, помогу (БЕСПЛАТНО/БЕЗВОЗМЕЗДНО). ID leon9208

@FRAGILE304 3 жыл бұрын

Так почему span то именно?

@reiser8369 5 жыл бұрын

Мне кажется, ибо не проверял еще, но можно было не брать в span а задать диву display: inline-block

@BrainsCloud 5 жыл бұрын

А если нужно чтобы заголовок был блочным? Суть то урока не в этом, ситуации разные то бывают. Суть показать как делать, а что в вашем случае использовать block, inline-block для заголовка, дело уже вторичное.