CSS фичи #16 Неоновые кнопки CSS | Neon button CSS effect
Рет қаралды 28,313
5 жыл бұрынПродолжаем рубрику CSS фичи, сегодня делаем светящиеся неоновые кнопки на чистом CSS без использования JavaScript.
KZfaq-канал Алексея Бычкова / @alexeybychkov_
Фрилансер с 15-летним стажем, делает крутые уроки на простом человеческом языке. Подпишитесь 👆
Подпишитесь на мой канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Telegram-канал "Лысый из браузера":
tele.click/baldfrombrowser
Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academy
Заказать рекламу на канале: vk.me/aislam23 или t.me/aislam23
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork
@zoyavorobei3737 5 жыл бұрын
Как всегда интересный урок. Спасибо Вам, Артем. Ждем еще больше css-фич.
@andem25 4 жыл бұрын
По-больше бы таких уроков: с толком и расстановкой!
@excelente9842 5 жыл бұрын
В разрабатываемый магазин добавил) Круто смотрится. Спасибо
@user-cb9jk1xf1s 5 жыл бұрын
как всегда огонь!
@marysoshnikova7364 5 жыл бұрын
Спасибо за урок! Интересно и полезно)
@feyeriya2796 4 жыл бұрын
дорагабагата))))))))))))))))))) обожаю ваш канал, царский лайк и подписка без разговоров
@bakhodirsherimov826 2 жыл бұрын
Огромное спасибо! Все очень хорошо объяснил. 👀
@arthurterner3348 5 жыл бұрын
Классная CSS фича !!! href= "maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" В описание нет, загуглил и в комменты кинул, вдруг кому пригодиться . p.s.Спасибо за твой контент Артём .
@denchola Жыл бұрын
Спасибо большое! очень познавательно и понятно
@sevashpun 2 жыл бұрын
Спасибо за ролик! :)
@user-ri4mv6mj8s 5 жыл бұрын
11:50 Здесь можно было использовать свойство text-shadow: #color;
@Plan_B 5 жыл бұрын
Божественно
@ladyafize5689 5 жыл бұрын
Спасибо!:)
@viktorshatalov1920 5 жыл бұрын
спасибо!!!!ооочень крутая получиоась у меня фича.!!!не удаляй только с канала,а то не которые вещи смотрел у тебя,а через время не могу найти.Спасибо за все.
@user-xw1uy9jo1p 3 жыл бұрын
Донбасс
@artemijeka 4 жыл бұрын
Спасибо!
@xwhiskasx1 5 жыл бұрын
По богатому )
@alexles5003 5 жыл бұрын
Прекрасный эффект
@user-ll3qg1xm5b 5 жыл бұрын
Сами иконки тоже можно было на text-shadow) Кстати, не помню, на него transition тоже работает?
@agilkerimov 4 жыл бұрын
спасибо
@isadkoenmklsopsl 5 жыл бұрын
Фича очень крутая. Продолжай это делать
@awenn2015 3 жыл бұрын
Странно, но после просмотра одного видео про препроцессоры теперь везде вижу этот подход, вместо копирки модно замутить миксин с параметрами для каждой иконки ))
@user-wf4np1ne2c 5 жыл бұрын
для игровых сайтов подойдёт. прикольная тема
@viktorshatalov1920 5 жыл бұрын
для всех сайтов,не только игровые
@user-wf4np1ne2c 5 жыл бұрын
@@Dedinside05 Где продаются игры, либо какие-то игровые приколюхи, типо руль, PS и т.д.
@user-qy2zj7cj5w 5 жыл бұрын
Красивая фича. Сделайте, пожалуйста, видео как получить плавное появление объектов при скролле страницы вниз.
@user-zd9sr2ov4m 5 жыл бұрын
В следующий раз лучше рассмотреть что-то потяжелее, к примеру: текст, который находится на двух блоках, на первом его часть белая, на втором черная.
@staticcheese8608 4 жыл бұрын
Артем, спасибо за интересную фичу. Подскажите, не могу разобраться со св-вом color для ссылок(), т.е. ситуация следующая: Структура html у меня точно такая же за исключением того, что иконки, вложены во внутрь тега : Но когда происходит событие :hover (для тега ) все св-ва срабатывают, рамка иконки окрашивается в нужный цвет, но цвет самой иконки не изменяется. Пробовал установить для св-во color: inherit, но это не помогает. Могли бы вы подсказать как быть в такой ситуации? Как сделать так чтобы наследовал свой цвет от родительского элемента?
@staticcheese8608 4 жыл бұрын
Вопрос закрыт. Сделал приоритет селектора потяжелее, .sociallinks-list a { color: inherit; } св-во color: inherit; сработало, теперь оно подхватывает цвет от родителя на событие :hover !
@andrewvlasuk362 5 жыл бұрын
Да, текст через text-shadow задаем и будет красиво )))
@john.d0e 5 жыл бұрын
FA стали нереально тяжёлыми! Кроме того, все царские иконки доступны лишь в Pro версии, поэтому стараюсь их вообще не юзать SVG или генерить свой фонт при помощи одного известного сервиса. И вес сайта и уникальность пиктограм при этом на высоте. ;)
@ikorjefocur 5 жыл бұрын
FA представляется простым набором файлов, в сети можно найти слитую прошку и спокойно юзать.
@john.d0e 5 жыл бұрын
@@ikorjefocur а смысл?? )
@user-mq8eq3by6z 5 жыл бұрын
Классно. Думаю, надо было прописать тень для ".whatsapp:hover i::after". Еще можно так: поставив на весь li тень, залить i таким же цветом, а на after повесить тень по цвету общего фона (при желании можно и цвет текста сменить). Должно получиться свечение от обводки с обеих сторон (на видео она только снаружи), но я это еще не тестировал, так что ничего не обещаю.
@user-mq8eq3by6z 5 жыл бұрын
Прошу прощения за двойной коммент, плохой интернет или неполадки с планшетом.
@aleexYar 5 жыл бұрын
Чтобы сделать тень от обводки с двух сторон как вы говорите, достаточно для обводки в box-shadow через запятую подписать ещё одну тень, но добавить inner, таким образом добавится внутренняя тень (свечение)
@kostrik6278 5 жыл бұрын
@@aleexYar inset*
@aleexYar 5 жыл бұрын
@@kostrik6278 вы правы, правы моя ошибка
@krestopravtv8192 2 жыл бұрын
Добрый день. Подскажите как в самом начале код пишется в одну строку а потом разворачивается у привычный вид?
@AlexPoluyanov 5 жыл бұрын
Ссылка из видео: maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css Код: codepen.io/akakiy1880/pen/LwPMKE?editors=1100
@olegz.4229 5 жыл бұрын
А где скачать код этого урока ?
@it_is_ti 5 жыл бұрын
10:46 свечение слабже
@GrigoRASH6000volt 5 жыл бұрын
День добрый, а где ссылка то?
@Prockrypto 2 жыл бұрын
тут точно только сss и html? а то у меня линии воопше нет
@nikifanmac 5 жыл бұрын
Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд)часто вижу такой блок, и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи, думаю это интересно не только мне) ну или кто- нибудь в комментариях ответьте, как это реализовать, и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)
@alexgame3626 5 жыл бұрын
Викей?)
@user-ct1jh8bo7n 2 жыл бұрын
не получилось перекрасить иконки соц сетей, пробовал и через fill, так как это svg, безрезультатно
@user-gf5do5jk4m 4 жыл бұрын
Вот ответь мне пожалуйста,я занимаюсь программированием уже как месяц,но много чего не могу понять и от этого мотивация пропадает как то.Вот ты сколько уже занимаешься этим?
@Glo_Academy 4 жыл бұрын
Занимаюсь с 2014 года
@rstvit8539 3 жыл бұрын
Ну вообще-то можно было text-shadow на 11:50
@user-vd6eg5ke7i 5 жыл бұрын
объясните кто не будь. зачем в такой ситуации использовать список? а не span к примеру?
@user-vq1xx2fw9g 5 жыл бұрын
Потому что семантически данный фрагмент это список ссылок, с иконками внутри. Артем к сожалению не стал оборачивать то что внутри тегов в ссылки, для лучшей семантики. (Хотя для примера это не столь важно)
@mon1star215 Жыл бұрын
Круто, но в чём приколь, как ты подключал css?
@sultanalibekov9767 5 жыл бұрын
Круто, че то в комментах все идеальные верстальщики, которые сразу все как надо делают
@user.ilovemira 5 жыл бұрын
Скинь ссылку
@user-gh2bm1sv4h 4 жыл бұрын
Привет,очень хорошое видео,могли бы вы сделать урок как к этим кнопкам подключить ссылки,не могу разобраться,спасибо.
@vanyatoxic 4 жыл бұрын
просто в тег вставляешь тег а затем в него же иконку выглядит так:
@JavaScriptcher 3 жыл бұрын
хорошо, а где ссылка на подключение?
@Shest_s_bugra Жыл бұрын
А ссылку на codepen?
@user-zw9fh7hq4x 3 жыл бұрын
Все ооочеень круто, особенно для меня, спасибо огромное, но объясните как шрифт поставить или где посмотреть, я вообще не поняла
@reedtz1 2 жыл бұрын
р у ч к а м и
@user-gc1kh3vu1n Жыл бұрын
а где ссылка на иконки?
@Demien_Thorn 2 жыл бұрын
Бомбезнейший эффект! Автору большое спасибо! Только я не очень понял, зачем каждому элементу списка присваивать класс social__item, когда вместо этого можно было просто через .social li задать параметры.
@Glo_Academy 2 жыл бұрын
Я это сделал из-за специфичности. Я стараюсь не задавать стили через селектор тегов, использую для этого отдельные классы.
@user-qn7xe8wj5g 4 жыл бұрын
Здравствуйте, а как сделать под иконками ссылки на эти сайты?
@vanyatoxic 4 жыл бұрын
просто в тег вставляешь тег а затем в него же иконку выглядит так:
@user-vr5xi3me1x 5 жыл бұрын
где ссылка на исходники ????????????
@arturzhitkovich5629 5 жыл бұрын
А в чем фича?
@milaoll6682 4 жыл бұрын
Логотип канала раньше был намного лучше и по цветам и пос стилю. Кст, Академия Верстки у меня ассоциируется с прежним логотипом
@Glo_Academy 4 жыл бұрын
Спустя время все привыкнут. А так, «раньше было лучше» всегда 🤷♂️
@firegamer9549 4 жыл бұрын
где блин ссылка
@vadimsokolovsky4940 5 жыл бұрын
shadowbox по сути и все...
@Glo_Academy 5 жыл бұрын
Наоборот box-shadow :)
@vadimsokolovsky4940 5 жыл бұрын
@@Glo_Academy Точно)
@mikhailkormilitsyn7974 5 жыл бұрын
@@vadimsokolovsky4940 фича очень простая, но если бы я её посмотрел месяца 4 назад, я бы сказал "ого, нифига себе, как круто". Тут ведь новичков много, им очень даже понравится.
@kriaken1728 3 жыл бұрын
Устал, сижу уже часа 4 редачу сайт. Решил сделать передышку и зашёл в ютуб => рекомендации => это видео.....снова в редактор делать красивые кнопочки....ужас какой-то...
@OlegKshlkv 5 жыл бұрын
15 минут рассказывают о тенях, не зная ещё и особенностей типа элементов. Автор box-shadow к текстовому элементу пытался применить... Sorax, прости, мы все пролюбили...
@user-by4ds6vr8o 5 жыл бұрын
суть не в том, что он текстовый, а в том, что строчный, а не блочный. Хотя может ты это и имел в виду
@imnofear555 5 жыл бұрын
Такое чувство будто ты никогда не ошибаешься?
@OlegKshlkv 5 жыл бұрын
@@user-by4ds6vr8o именно текст, inline, block, inline-block и flex с тенью ведут себя одинаково. Тень для, так называемой, «обертки задается», а для текстового элемента text-shadow, чем и является font-awesome)
@OlegKshlkv 5 жыл бұрын
@@imnofear555 ошибаюсь, но если бы я что-то делал на аудиторию в 75 000 человек - явно бы перепроверял информацию, да и странно, что человек путается в основах-основ и при этом обучает других людей. Может я слишком категоричен, и можно списать на то, что разволновался, забыл, запутался.
@imnofear555 5 жыл бұрын
@@OlegKshlkv я многое взял с его уроков, а все остальное сам. Как для новичков отличный канал, материал простой и лёгкий. Тут главное было показать как это можно сделать, все остальное нужно самому думать, искать, учить...
@user-zd9sr2ov4m 5 жыл бұрын
Ну так долго рассказывать о box-shadow нужно уметь)
@user-zd9sr2ov4m 5 жыл бұрын
Но как идея - норм
@XopoLLIee_NMR 10 ай бұрын
где ссылка на подключение, ало?
Glo Academy
Рет қаралды 48 М.
Dharni
Рет қаралды 151 МЛН
𝐧𝐞𝐫𝐝𝐢𝐳𝐚𝐲-𝐜𝐨𝐝𝐞
Рет қаралды 13 М.
Фрілансер по життю
Рет қаралды 369 М.
Миша Ларченко
Рет қаралды 45 М.