Никто не знает, что CSS так может

Подписаться 102 тыс.

Просмотров 68 тыс.

50% 1

✅ Регистрируйся на интенсив - frontendblok.com/intensives/s...
⚡️ За 5 уроков:
- Попробуешь на практике сделать
свой первый сайт на HTML и CSS
- Узнаешь больше о работе веб-разработчика
- Поймешь, где искать первые
заказы новичку в 2022 году
Демо - codepen.io/anna_blok/pen/MWXmNrm
Шрифт - fonts.google.com/specimen/Rub...
Поддержка свойств CSS:
caniuse.com/?search=text-stroke
caniuse.com/?search=text-shadow
Таймкоды:
00:00 Вступление
00:23 Про бесплатный интенсив
01:23 Начало стилизации
03:56 Тень для текста
06:25 Обводка для текста
08:21 Прозрачный текст
09:34 Итог
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

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

28 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 221

@annblok_webdev Год назад

А какие варианты решений были у Вас в голове, до того, как приступили к практике? Можете скинуть свои варианты через codepen.

@podpalmoi Год назад

Даёш бесплатный курс по React! :)

@phitrow Год назад

есть шрифты в виде контура.

@annblok_webdev Год назад

@@phitrow Фон у них прозрачный? Какие шрифты знаете?

@phitrow Год назад

@@annblok_webdev поиск: контурные шрифты.

@olegplahotniy7307 Год назад

@@annblok_webdev Элементарно, Ватсон, скопировать текст в after, сделать его абсолютно спозиционированным, размыть фильтром blur.

@user-um5bb9ce3d Год назад

Интересно увидеть человека, которому это пригодится в реальных коммерческих проектах после 2008 года))

@ediccartman7252 Год назад

После появления реакта и библиотек css ? Ну фиг знает, некоторые может и свои библиотеки пишут.

@user-um5bb9ce3d Год назад

@@ediccartman7252 я не о том. Верстка никуда не делась и не денется, хоть 10000 библиотек придумай. Я об убогости эффекта 🤨

@LexK98 Год назад

@@user-um5bb9ce3d ты просто не работал в дизайн-студиях видимо :D нас там и не такое заставляли делать)

@user-um5bb9ce3d Год назад

@@LexK98 конечно, мои 14 лет опыта в сфере UI/UX ничего не стоят, по сравнению с сельскими дизайн-студиями 😁

@LexK98 Год назад

@@user-um5bb9ce3d вообще-то топ-20(или уже даже 19) дизайн- студия россии по рейтингу рунета, но я там уже год не работаю, поэтому да, они сельские, ну их нафиг 😀

@user-oe1fg2on7x Год назад

Благодарю, Анна:) Удивительно! Подписался:) Успехов!!!

@zarinais555 Год назад

Только начала изучать frontend, ваше видео очень кстати! Спасибо!

@sergkaskalov3983 Год назад

Молодец, Аня! Спасибо! Вы очень хороший учитель!

@annblok_webdev Год назад

🥰

@323ser Год назад

Огромное вам спасибо! Очень интересно.

@D_Stolyarova Год назад

спасибо за ролик! информативно

@user-xr7lj2gn6z Год назад

топ топ топ, очень круто!!! спасибо, Анна💜

@annblok_webdev Год назад

🥰

@vinewood-man Год назад

Очень круто, респект Анна.

@GGSoft2009 Год назад

Спасибо Анна. Очень полезно

@annblok_webdev Год назад

🥰

@markavilin5020 Год назад

Мне понравилось как вы всё это объясняете, очень информативно 👍

@scott860racing Год назад

Реально круто ))) и цвета прям душу греют😅

@user-el5sx4yx6x Год назад

Спасибо. Всё подробно, понятно и кратко! (Кратко и ёмко) Работаете мышкой, лишнее не пишете, не углубляетесь, не растягиваете. Лайк, подписка и колокольчик!

@annblok_webdev Год назад

🥰

@user-rb3sw3ku6t 11 месяцев назад

Спасибо за ценный урок )

@Sasha9433 Год назад

Спасибо, взял на заметку !

@annblok_webdev Год назад

🤩👍

@firstMuravei Год назад

Заканчивается 2022 год, пора перестать вообще упоминать о существовании таких браузеров как ie до 10 версии. Это тоже самое, как вспоминать о существовании Нетскейпа. За урок спасибо.

@dieselpower1252 Год назад

Благодарю за лайфхак! Лайк поставил и добавил в закладки)

@fildbreaker8125 Год назад

Это видео появилось в рекомендациях. Немного изучив канал, решил подписаться. Нравиться подача информации:)

@annblok_webdev Год назад

Рада видеть! 👋🔥

@sviatbondar1721 Год назад

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

@steekmen5158 Год назад

Один только голос чего стоит, очень приятно слушать и следовать учениям! :)

@0ladiya 10 месяцев назад

Смотрел когда-то это видео. Хотел снова посмотреть, но через поиск не получилось найти, ибо название не стандартное. Хорошо, что оно у меня в плейлисте было сохранено.

@lommmaster Год назад

Если в body вы указали темный фон, вы обязательно должны там же указать светлый цвет. Это должно работать на автомате.

@tercon8870 Год назад

Круто, спасиб)

@byiDag Год назад

понравилось и вы и видео супер прям в глазах рябит буквами

@intro_true Год назад

Эмейзинг!♡♡♡ Очень крутой эффект !

@konstantinhagelgans3837 Год назад

Кайф! Спасибо

@PACEMAKER76 Год назад

Полезное видео!

@annblok_webdev Год назад

🤩

@sergeifrolov8310 Год назад

Аня ты молодец! разработка наш друг!

@Waischess Год назад

Согласен! Девушка - молодец.

@mishamisha1850 Год назад

Очень хорошая подача материала.

@annblok_webdev Год назад

😇

@renaldos1779 Год назад

Спасибо Аня, подскажи пожалуйста класс что бы текст появлялся при наведении на картинку? Спасибо.

@renaldos1779 Год назад

@@prominsk Спасибо

@user-nj9yu4dd8p Год назад

Спасибо!

@slushaem Год назад

мне нравится маленькие естественные тени делать у объёктов через box-shadow, у box-shadow вроде 4 координаты 4 цифра это толщина тени. Мне нравятся градиенты с прозрачностью тоже красивые вещи можно делать или применять где-то затемнение объекта с градиентной прозрачностью.

@slushaem Год назад

@@prominsk Ну например такое - когда надо на картинку повесить градиент с прозрачностью с эффектом затемнения... background: linear-gradient(to top, #00000000 0%, #000000 100%, #000000d4 100%);

@MrMegaFirestarter Год назад

Интересно, а можно баловаться с текст-строук как в SVG - сделать анимацию, чтоб вокруг букв бегали точки или короткие линии ?

@egoregorov6094 Год назад

спасибо, выглядит очень круто, для лендосов идеально

@danil_cswtf2816 Год назад

Блин.... Это выглядит шикарно)))

@user-mj1qo4sl7r Год назад

Благодарю.

@globalmerts Год назад

Видимо надо свой мозг взбодрить новыми знаниями равными 0 в этой и других темах). Спасибо, пойду на интенсив.

@i_cooler Год назад

Красота

@slushaem Год назад

мне кажется скоро в трендах моды будет - это горизонтальная прокрутка скролом без кнопочек (ну это очень удобно в моём понимании - чем дополнительные кнопки для этого делать в дизайне и программировать их на прокрутку).

@ibanes3680 Год назад

А можно было сделать просто блюр для тени (без сдвигов и без использования второй тени)? Тогда бы и "свечение" было равномерным (не было бы провалов слева снизу и справа сверху).

@dimankan Год назад

Кайфово;)

@eRas14 Год назад

спасибо

@godforger Год назад

для ие, пнг хорошо подойдёт))

@user-nx9rg2fo3h Год назад

ля как круто рассказываешь!)

@victorivanov1254 Год назад

Можно с помощью анимации CSS, добавить на некоторые буквы мигание и будет эффект неоновой вывески.

@nevil_ras Год назад

И как же

@karasu3831 Год назад

@@nevil_ras самый простой и топорный вариант, каждую букву обернуть в тег, и через nth-child обратится к нужным буквам и повесить анимацию.

@user-jt3pj3rn9s Год назад

@@karasu3831 а що, анімувати властивість -webkit-text-fill-color за допомогою @keyframes не можна?

@user-jt3pj3rn9s Год назад

ой, властівість -webkit-text-stroke

@karasu3831 Год назад

@@user-jt3pj3rn9s Ну, попробуй...

@trewerguli1727 Год назад

можно записать текст побуквенно в спаны и на каждый спан повесить анимацию со своим временем

@ultraduck100 Год назад

красивенько

@clark7413 Год назад

1:37 ну вот мы и получили ответ, размер имеет значение.

@abdul-malikibragimov9562 Год назад

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

@user-pr7pw6sp3u Год назад

Спасибо

@user-pw7le1dx6z Год назад

Ань Спасибо Вам☺️👍 про text-stroke не слышал даже, в каждом Вашем видео которое смотрю, нахожу для себя много нового! Эффект шикарный! Оценил как истинный любитель неоновых, визуальных красивостей! Спасибо Большое, Продолжайте, У Вас Отлично Получается!

@annblok_webdev Год назад

Специально стараюсь находить что-то новое 😇🙌

@Pamp101 Год назад

Я бэкэнд разраб, но мне в этом видео нравится автор!))

@webmaster5250 Год назад

7:44 нету такого понятия в CSS как расширение у свойства. Это называется вендорный префикс.

@meosaganami5472 Год назад

просто никто не знал, что CSS так может

@Number-iu5wr Год назад

Супер 💋

@bloggerfox Год назад

Никто не знает, что CSS так может? Самоуверенное заявление

@qi6int Год назад

Не выбрасывай text-shadow, из него можно сделать... Резюме для обучающихся что-то делать: загуглите text-shadow css Это как если бы сейчас в стандарте html был тэг блинк, не понятно зачем рассказывать про текст шэдоу, который нужен настолько редко, что я даже не помню когда в продакшене его использовал, либо когда его использовал кто-то из моей команды.

@Alexandr__Shevchenko Год назад

Интересно можно ли реализовать переливающиеся цвета таким образом?

@obivanishche Год назад

да, нужно добавить всего два свойства: background: linear-gradient(свойства градиента) и -webkit-background-clip: text; и вы получите градиентный текст

@user-cm1om1oo3p Год назад

Анна, спасибо тебе огромнейшее. Взял бы у тебя курсы, но работаю в Ишиме на заводе. ЗП всего 13 тысяч рублей. Учусь по твоим роликам, надеюсь жизнь измениться.

@annblok_webdev Год назад

У нас есть возможность оформить беспроцентную рассрочку на любой период вплоть до 12 месяцев. Можете пообщаться с нашим менеджером на эту тему, он всё подробно объяснит и сделает расчёты. Написать можно в виджет чата на сайте frontendblok.com

@annblok_webdev Год назад

@@user-yz7kw2oe4s такой информации полно на канале и в открытых источниках, а копить можно и при минимальной зарплате, по себе знаю, так что противоречий никаких нет

@vvv7220 Год назад

За 13 тыс на заводе? Кем ? Уборщиком помещений? У нас дворники 18 получают

@user-ds5pn2vi4x Год назад

Ахереть, как можно жить на 13 тысяч, блин это жёстко

@vvv7220 Год назад

@@user-ds5pn2vi4x врет он. Я на Авито зашёл. В их городе уборщик помещений на неполный рабочий день получает столько. Грузчик 27 тыс. Мойщик посуды 20 тыс. Кем он там работает за 13 тыс непонятно

@alexshel8578 Год назад

название ролика конечно убило))

@user-ct1oh7oj6v Год назад

Ну в принципе если хорошенько посмотреть в интернете, то можно что то найти наподобие

@tolikcooks9182 Год назад

Красивый эффект, жалко, конечно, что на коммерческом проекте никогда такое не понадобится)

@progerlife6690 Год назад

Прикольно - про text-stroke вообше не слышал) Можно еще сделать так: Добавить картинку через background-image, потом добавить свойства background-clip: text; color: transparent; Результат - наш текст будет закрашен нашей картинкой которую добавили через тег background-image.

@annblok_webdev Год назад

Или написать текст в любой графической программе, преобразовать в объекты, изъять фон, оставить контуры и сохранить как SVG

@progerlife6690 Год назад

@@annblok_webdev тоже вариант)способов масса)))

@annblok_webdev Год назад

@@progerlife6690 это точно 👍

@tonalmotions Год назад

@@annblok_webdevесли уже svg, то здесь появляется море возможностей анимации

@15bangbeats Год назад

CSS - CounterStrike Source

@user-gz1nx3ke3x Год назад

Про Эксплорер пора забыть.

@sergkaskalov3983 Год назад

Когда начало интенсива и в какое время он будет проходить?

@annblok_webdev Год назад

Интенсив доступен после регистрации сразу

@sergkaskalov3983 Год назад

@@annblok_webdev Спасибо, Аня!

@Evgeniy19856 Год назад

Всё хорошо, но надо сказать почему не будет работать без расширения -webkit

@slushaem Год назад

анимация объектов -- задержки на выполнения анимаций по временной кривой диаграмме, такие интересные вещи можно создавать.

@alenachuyankova Год назад

Wow!

@HelloHovo Год назад

Эксплорер возможно бабушки используют 😀Анна лайк от меня .

@annblok_webdev Год назад

IE может остался у тех, кто систему не переустанавливал. В новых всегда Edge ставится.

@Amun_Ra. Год назад

@@annblok_webdev прабабушки 🤣🤣🤣 или Анна Блок😁😁😁

@meyeraidini3453 Год назад

Anna Inline block or flex block?)))

@user-nu1gm7gb7v Год назад

Оболдеть, Ева Эльфи учит фронтэнду 😱

@eduard7667 Год назад

Тянка зачетная:)

@monolit-8346 Год назад

Если каждую букву обернуть в span, то можно будет задать отдельные эффекты или анимации.

@punknodead363 Год назад

Требую видос по flex)

@andrewracerpro Год назад

Я думал речь про Кс Сорс, ну ладно

@bryfixeguy2508 Год назад

Вы случайно не дублировали Ривер Сонг из Доктора Кто?)

@ibrahimoglu Год назад

👍

@user-tc5zl7pi2v Год назад

да действительно))) никто и никогда не знал)))) открыла вселенную для самой себя

@txtx5878 Год назад

Можно былобы ещё transition

@kamilzholdasov5133 Год назад

Думал видео про Countet Strike Source

@sergey.n1 Год назад

С подключением.

@user-ld3qd8tr4c Год назад

*Ааааа, уши мои СссЦССцСцСсЦс, юзайте de-esser, например от FabFilter!*

@PACEMAKER76 Год назад

Ох уж этот IE 😁

@harith15 Год назад

Ева Ельфи нормального человека

@phenya8431 Год назад

У нее голос так похож на озвучку подруги Доктора Кто! Которая Ривер Сонг

@user-ur6wk7bi8d Год назад

покажу видуху своей племяхе она интроверт, но по способностям программер или даже круче. художник. шрихт реально выглядит красиво. я бы в фотошопе такое мог бы наваять. для специальной темы за пару дней. а тут так легко. чувствую себя динозавром. вымирающим. может реально пора на свалку истории?

@annblok_webdev Год назад

Не обязательно идти на свалку, достаточно просто иногда поглядывать такие ролики 😅 В стилях еще много всего интересного

@hayrapetyansami Год назад

Я знал 🤪

@yoba_ Год назад

Как ты можешь это знать если это НИКТО не знает?🤔🤔

@user-bj5lb7kf1c Год назад

Анна Блок - Никто не знает, что CSS так может. Ребята вытворяющие подобное ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CG__N4SS1Fc.html ) - Да ладно.

@DjedaiDima Год назад

IE Forever!

@annblok_webdev Год назад

😁

@TheFryOS Год назад

Ну один человек то знает - это Анна.

@annblok_webdev Год назад

🤣

@user-nk7mt1rn2v Год назад

ева эльфи

@Mamkaeb45 Год назад

ААААААААААА ЖЕНЩИНА ПРОГРАММИСТ

@andreybelomyttsev Год назад

Прикольно получилось! 🎉 Но вот IE некоторые до с пор используют, от него пока отказаться не получится.

@annblok_webdev Год назад

Очень маленький процент и с каждом годом он будет всё меньше и меньше 🙌

@mit7871 Год назад

Что за бред) Всё проекты которые я вижу уже отказались от поддержки ие, да и странно это бы было, сами создали ие от него отказались уже давно

@BeBraveLikeUkraine900 Год назад

Анна div

@evgeniibatrakov4001 Год назад

Ни кто не знает, но со знаниями цсс ты уже не найдёшь работу)

@user-de7fo3rm5d Год назад

Ого, какая красивая и умная

@NeoCoding Год назад

Спасибо за видео, как обычно, но на кого рассчитаны эти тупые кликбэйты?? По-моему те кому интересно и так зайдут вас посмотреть. Желаю называть видео по-человечески: тема такая-то.. не бесите, пожалуйста))