Тёмный

Верстаем прозрачный текст на любом фоне HTML, CSS, React, TypeScript, Vite 

Елена Литвинова — Искусство Веб-разработки 🛸
Просмотров 4,4 тыс.
50% 1

В текущем видео, мы изучим как создать такой, просто изумительный эффект! Красоту невероятную.
P.S. На обложке не мар**уанна, мы с дизайнером обложки проверили!
❤️ ❤️ ❤️ Крутой дизайнер, который предоставил макет / abduly_haidary
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский RU-vid: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
Ссылки используемые в уроке:
😌 Ссылка на git репозиторий github.com/liveldi/forest_layout
😌 mix-blend-mode свойство developer.mozilla.org/en-US/d...
😌 Статья на CSS tricks css-tricks.com/almanac/proper...
😌 Свойство background-clip developer.mozilla.org/en-US/d...
00:00 Введение.
03:17 Устанавливаем и запускаем проект.
06:00 Avif VS JPG
07:20 Разбираем вёрстку проекта.
10:20 mix-blend-mode.
12:40 прозрачный текста на любом фоне. background-clip.
15:40 сдвоенный белый текст.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

Опубликовано:

 

29 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 32   
@user-xe4pq3ef5p
@user-xe4pq3ef5p Год назад
Так обрадовалась, увидев, что у вас новое видео! Супер красивое решение, спасибо! p.s. отлично выглядите, прямо светитесь!
@webelart
@webelart Год назад
Полина, спасибо большое! Мне очень приятно!! 🌺
@igorproshyn9380
@igorproshyn9380 Год назад
Рад что вы вернулись, очень жду ваших роликов так как сразу видно что вы профессионал!!!.
@IT-Svyatoslav
@IT-Svyatoslav Год назад
Супер 👍🏼! Благодарю Елена) Пожалуйста, почаще радуй своим контентом и улыбкой 😊
@webelart
@webelart Год назад
❤❤❤
@hairy_nose
@hairy_nose Год назад
Заюзала, заиспользовала 😂 надеемся это все реализуют нативно и просто. Спасибо за материал!
@webelart
@webelart Год назад
Не то слово! 😁
@k-ivan
@k-ivan Год назад
Елена, большое спасибо за видео! Спасибо, что делитесь разборами реализации нестандартных штук.
@webelart
@webelart Год назад
Спасибо, что смотрите! Рада, что контент нравится! ❤
@user-sc9cn3os6w
@user-sc9cn3os6w 11 месяцев назад
Вай вай вай, спасибо вам огромное, давно искал подробного урока))
@webelart
@webelart 11 месяцев назад
* давно искал подобный урок.
@user-yt2ds5ew5k
@user-yt2ds5ew5k Год назад
Елена привет! А можете сделать короткое видео как развернуть зборку проекта как у вас: react, ts, vite, с обяснением конфигурации что использується.
@3agoskin
@3agoskin Год назад
Спасибо за ваши видео!
@webelart
@webelart Год назад
❤❤❤
@SVLeShiy
@SVLeShiy 10 месяцев назад
Спасибо за видео. Свойство mix-blend-mode очень помогло сделать прозрачный текст у кнопки при наведении. Два дня пытался решить как )
@alexbr696
@alexbr696 Год назад
дождались
@webelart
@webelart Год назад
2 месяца! 👩🏼‍💻
@gregdmitriev2784
@gregdmitriev2784 Год назад
Прикольно, красиво 👍👍 "P.S. На обложке не мар**уанна, мы с дизайнером обложки проверили!" - а я-то надеялся ! 😄😄 Весной фукал на проекты с TS. Теперь топлю за TS )) Лена, жги ! ))
@webelart
@webelart Год назад
Спасибо! 😄 Жгём!!! 🚀
@danilputro8458
@danilputro8458 8 месяцев назад
Выглядите очень хорошо)))
@webelart
@webelart 5 месяцев назад
Спасибо! ❤️
@jamjam3337
@jamjam3337 Год назад
👏👍
@houston_np
@houston_np Год назад
Про avif даже не знал. Везде webp в основном. Везде поддерживается. squoosh гугловский оч здорово помогает в оптимизации картинок, помимо модуля сайтик есть у них. Можешь рассказать, почему avif?
@TipAnswer
@TipAnswer 10 месяцев назад
Где можно глянуть твое выступление на holy?
@Shir-Na-Shir
@Shir-Na-Shir Год назад
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
@dsm2153
@dsm2153 11 месяцев назад
Обновите пожалуйста SSL сертификаты на своем сайте. Смотрела пример через девтулз и сайт перестал работать, пишет про небезопасное соединение и не открывает ни одну из ваших ссылок
@webelart
@webelart 11 месяцев назад
Готово :) Спасибо, что напомнили.
@biLLie_wiLLie
@biLLie_wiLLie Год назад
С кроссбраузерностью нет проблем?
@webelart
@webelart Год назад
Если вы используете Internet Explorer, то возможно есть. Однако в прошлом я использовала маски, когда он был популярен, думаю даже для него можно решить. Я проверила safari, firefox и chrome. Отображается отлично :)
@ArtDen100
@ArtDen100 Год назад
"Мой основной язык - React". Как сильно мало я знаю о языках программирования, как выяснилось. После этой фразы я понял, что нифига я не знаю о фронтенде
@webelart
@webelart Год назад
Будьте внимательны. Реакт не является языком, это библиотека. Я там даже приписку сделала, чтобы не вводить в заблуждение. Но на реакте я разрабатываю с 2016 года, поэтому довольно долго. До этого либо чистый JS либо jQuery как навязка на события.
@user-fd5le5bx9j
@user-fd5le5bx9j 9 месяцев назад
Спасибо, заюш_)
Далее
Самый новый HTML!
13:30
Просмотров 94 тыс.
I Flooded my LEGO CITY...
18:37
Просмотров 15 млн
Новый CSS и HTML!
37:44
Просмотров 148 тыс.