CSS фичи #16 Неоновые кнопки CSS | Neon button CSS effect

[@zoyavorobei3737]

Как всегда интересный урок. Спасибо Вам, Артем. Ждем еще больше css-фич.

[@excelente9842]

В разрабатываемый магазин добавил) Круто смотрится. Спасибо

[@andem25]

По-больше бы таких уроков: с толком и расстановкой!

[@bakhodirsherimov826]

Огромное спасибо! Все очень хорошо объяснил. 👀

[@viktorshatalov1920]

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

[@РусланКормаков-и1я]

Донбасс

[@terner_arthur]

Классная CSS фича !!! href= "maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" В описание нет, загуглил и в комменты кинул, вдруг кому пригодиться . p.s.Спасибо за твой контент Артём .

[@isadkoenmklsopsl]

Фича очень крутая. Продолжай это делать

[@feyeriya2796]

дорагабагата))))))))))))))))))) обожаю ваш канал, царский лайк и подписка без разговоров

[@ВладиславБоровик-з3ш]

11:50 Здесь можно было использовать свойство text-shadow: #color;

[@denchola]

Спасибо большое! очень познавательно и понятно

[@awenn2015]

Странно, но после просмотра одного видео про препроцессоры теперь везде вижу этот подход, вместо копирки модно замутить миксин с параметрами для каждой иконки ))

[@sevashpun]

Спасибо за ролик! :)

[@АртемКа-в3к8й]

для игровых сайтов подойдёт. прикольная тема

[@viktorshatalov1920]

для всех сайтов,не только игровые

[@АртемКа-в3к8й]

@@Dedinside05 Где продаются игры, либо какие-то игровые приколюхи, типо руль, PS и т.д.

[@ВладимирГолубев-ш6ы]

как всегда огонь!

[@ОлегАлбаут]

Сами иконки тоже можно было на text-shadow) Кстати, не помню, на него transition тоже работает?

[@marysoshnikova7364]

Спасибо за урок! Интересно и полезно)

[@АнтонБутенко-э2р]

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

[@john.d0e]

FA стали нереально тяжёлыми! Кроме того, все царские иконки доступны лишь в Pro версии, поэтому стараюсь их вообще не юзать SVG или генерить свой фонт при помощи одного известного сервиса. И вес сайта и уникальность пиктограм при этом на высоте. ;)

[@ikorjefocur]

FA представляется простым набором файлов, в сети можно найти слитую прошку и спокойно юзать.

[@john.d0e]

@@ikorjefocur а смысл?? )

[@ЕвгенийСтрельников-е6э]

не получилось перекрасить иконки соц сетей, пробовал и через fill, так как это svg, безрезультатно

[@МаксимСамедов-ц2н]

Классно. Думаю, надо было прописать тень для ".whatsapp:hover i::after". Еще можно так: поставив на весь li тень, залить i таким же цветом, а на after повесить тень по цвету общего фона (при желании можно и цвет текста сменить). Должно получиться свечение от обводки с обеих сторон (на видео она только снаружи), но я это еще не тестировал, так что ничего не обещаю.

[@МаксимСамедов-ц2н]

Прошу прощения за двойной коммент, плохой интернет или неполадки с планшетом.

[@aleexYar]

Чтобы сделать тень от обводки с двух сторон как вы говорите, достаточно для обводки в box-shadow через запятую подписать ещё одну тень, но добавить inner, таким образом добавится внутренняя тень (свечение)

[@kostrik6278]

@@aleexYar inset*

[@aleexYar]

@@kostrik6278 вы правы, правы моя ошибка

[@AlexPoluyanov]

Ссылка из видео: maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css Код: codepen.io/akakiy1880/pen/LwPMKE?editors=1100

[@Альвар-с6р]

Красивая фича. Сделайте, пожалуйста, видео как получить плавное появление объектов при скролле страницы вниз.

[@alexles5003]

Прекрасный эффект

[@mon1star215]

Круто, но в чём приколь, как ты подключал css?

[@artemijeka]

Спасибо!

[@Plan_B]

Божественно

[@andrewvlasuk362]

Да, текст через text-shadow задаем и будет красиво )))

[@FamilyB-u4s]

объясните кто не будь. зачем в такой ситуации использовать список? а не span к примеру?

[@Aleksei-r4r]

Потому что семантически данный фрагмент это список ссылок, с иконками внутри. Артем к сожалению не стал оборачивать то что внутри тегов в ссылки, для лучшей семантики. (Хотя для примера это не столь важно)

[@olegz.4229]

А где скачать код этого урока ?

[@sultanalibekov9767]

Круто, че то в комментах все идеальные верстальщики, которые сразу все как надо делают

[@Shest_s_bugra]

А ссылку на codepen?

[@Demien_Thorn]

Бомбезнейший эффект! Автору большое спасибо! Только я не очень понял, зачем каждому элементу списка присваивать класс social__item, когда вместо этого можно было просто через .social li задать параметры.

[@Glo_Academy]

Я это сделал из-за специфичности. Я стараюсь не задавать стили через селектор тегов, использую для этого отдельные классы.

[@GrigoRASH6000volt]

День добрый, а где ссылка то?

[@ladyafize5689]

Спасибо!:)

[@rstvit8539]

Ну вообще-то можно было text-shadow на 11:50

[@лалкабурька]

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

[@vanyatoxic]

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

[@АзимАлиев-т7н]

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

[@Glo_Academy]

Занимаюсь с 2014 года

[@staticcheese8608]

Артем, спасибо за интересную фичу. Подскажите, не могу разобраться со св-вом color для ссылок(), т.е. ситуация следующая: Структура html у меня точно такая же за исключением того, что иконки, вложены во внутрь тега : Но когда происходит событие :hover (для тега ) все св-ва срабатывают, рамка иконки окрашивается в нужный цвет, но цвет самой иконки не изменяется. Пробовал установить для св-во color: inherit, но это не помогает. Могли бы вы подсказать как быть в такой ситуации? Как сделать так чтобы наследовал свой цвет от родительского элемента?

[@staticcheese8608]

Вопрос закрыт. Сделал приоритет селектора потяжелее, .sociallinks-list a { color: inherit; } св-во color: inherit; сработало, теперь оно подхватывает цвет от родителя на событие :hover !

[@nikifanmac]

Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд)часто вижу такой блок, и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи, думаю это интересно не только мне) ну или кто- нибудь в комментариях ответьте, как это реализовать, и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)

[@ЭржанБайгазиев-ц9ш]

а где ссылка на иконки?

[@opimand]

По богатому )

[@JavaScriptcher]

хорошо, а где ссылка на подключение?

[@Ангелина-я3к]

Все ооочеень круто, особенно для меня, спасибо огромное, но объясните как шрифт поставить или где посмотреть, я вообще не поняла

[@reedtz1]

р у ч к а м и

[@milaoll6682]

Логотип канала раньше был намного лучше и по цветам и пос стилю. Кст, Академия Верстки у меня ассоциируется с прежним логотипом

[@Glo_Academy]

Спустя время все привыкнут. А так, «раньше было лучше» всегда 🤷‍♂️

[@agilkerimov]

спасибо

[@ВасилийИванов-г6е]

Здравствуйте, а как сделать под иконками ссылки на эти сайты?

[@vanyatoxic]

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

[@it_is_ti]

10:46 свечение слабже

[@user.ilovemira]

Скинь ссылку

[@СергейМорозов-е6в]

где ссылка на исходники ????????????

[@arturzhitkovich5629]

А в чем фича?

[@alexgame3626]

Викей?)

[@firegamer9549]

где блин ссылка

[@kriaken1728]

Устал, сижу уже часа 4 редачу сайт. Решил сделать передышку и зашёл в ютуб => рекомендации => это видео.....снова в редактор делать красивые кнопочки....ужас какой-то...

[@vadimsokolovsky4940]

shadowbox по сути и все...

[@Glo_Academy]

Наоборот box-shadow :)

[@vadimsokolovsky4940]

@@Glo_Academy Точно)

[@mikhailkormilitsyn7974]

@@vadimsokolovsky4940 фича очень простая, но если бы я её посмотрел месяца 4 назад, я бы сказал "ого, нифига себе, как круто". Тут ведь новичков много, им очень даже понравится.

[@АнтонБутенко-э2р]

Ну так долго рассказывать о box-shadow нужно уметь)

[@АнтонБутенко-э2р]

Но как идея - норм

[@OlegKshlkv]

15 минут рассказывают о тенях, не зная ещё и особенностей типа элементов. Автор box-shadow к текстовому элементу пытался применить... Sorax, прости, мы все пролюбили...

[@МаксимТишков-п8ы]

суть не в том, что он текстовый, а в том, что строчный, а не блочный. Хотя может ты это и имел в виду

[@imnofear555]

Такое чувство будто ты никогда не ошибаешься?

[@OlegKshlkv]

​@@МаксимТишков-п8ы именно текст, inline, block, inline-block и flex с тенью ведут себя одинаково. Тень для, так называемой, «обертки задается», а для текстового элемента text-shadow, чем и является font-awesome)

[@OlegKshlkv]

@@imnofear555 ошибаюсь, но если бы я что-то делал на аудиторию в 75 000 человек - явно бы перепроверял информацию, да и странно, что человек путается в основах-основ и при этом обучает других людей. Может я слишком категоричен, и можно списать на то, что разволновался, забыл, запутался.

[@imnofear555]

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

[@krestopravtv8192]

Добрый день. Подскажите как в самом начале код пишется в одну строку а потом разворачивается у привычный вид?

[@XopoLLIee_NMR]

где ссылка на подключение, ало?