CSS фичи #12 ➤ Эффект при наведении с рамкой | Hover effect border
HTML-код
- Опубликовано: 28 авг 2018
- Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
RUclips-канал LoftBlog / @loftblog
Хотите выучить новую фичу?
Сегодня мы сделаем фичу при наведении на картинку. Так называемый hover effect. Смотрите видео и приступайте к практике! Исходники тут: codepen.io/Aislam23/pen/LJZRvP
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг 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
Большое спасибо! С нетерпением жду новые фичи! Один из лучших каналов!
Best of the Best Playlist про CSS!! Каждый видос МЕГАполезен, каждая фича уникальна! Благодарен!)
Очень полезный контент, без воды, все четко и по делу. Ждем новых видео!
Прекрасно, как и всегда. Спасибо, что стараетесь несмотря на снижение интереса у аудитории.
Доступное объяснение, приятный голос и отличная дикция!Очень интересно и познавательно! Люди, лайкайте активнее,))!уж очень хочется дождаться серию видео про js-фичи
очень нравятся подобные ролики с фичами. надеюсь будет ещё много)
Артем, однозначно лайк, спасибо за труды!!!)
Спасибо, Артем! Очень годно, долго не мог понять, как реализовать появление "рамок" из центра...
Добрый день, может Вы сможете продолжить этот курс! Вы же кайфуете)))
А мы благодарны!
Артем как всегда на высоте.
JS фичи очень надо) лайк однозначно
Все очень круто, как всегда!
Давайте поддержим Артема бурными лайками и овациями! Он ведь для нас старается, не даёт нам деградировать :)
Прикольная фитча, как и всегда :)
Опа, js фичи, будет интересно)
Спасибо большое. Отличные ролики!
Ураа! Жду ещё фичей.
Спасибо,Артём!Скорее бы JavaScript фичи!Поддерживаю!!!=)
Тёма, красавчик однозначно!
Прикольно получилось)
Спасибо за фичу)
крутой плейлист,давай еще!
Коммент в поддержку рубрики)
всё очень круто спасибо большой
спасибо!!! очень помгло ваше видео!!!!
Отлично!Спасибо большое!
Легенда
JS фичи будет круто!
Glo Academy: Спасибо, клёво объясняешь, но флексы надо глубже копать) у figure стоит display: flex; после ты пишешь justify-content: center; align-items: center; вместо этих 2х команд, figcaption достаточно написать margin: auto; (лучшие практики)
спаааасибо огрооомное помогаете новичкам даже таким рукапопам как я
Спасибо большое!
Пушка-ракета)))))
Вообще тема с фичами 👍
Супер, продолжай
Ты пушка братан
Дяяяяякую) дуже допомогло!!!
пасибо очень интереснно
Ооо класс js фичи
Бро, ты лучший!!!
Жду фичи по джаваскрипту!!!
Эээ! Я бы лайкнул 10 раз! Но не могу! Уроки 🔥👍
Спасибо!)
Шик
Дождался
Здравствуйте Артем! Просмотрел очень много видео уроков, какие то хорошие какие то не очень, но о твоих уроках отзывы исключительно хорошие. Многие уроки хорошо поставлены, и так сказать до молочка разжеваны, все что пробовал сделать по вашему примеру из уроков получалось с первого раза. Оценка по десяти бальной шкале 10/10. Большое спасибо за подобные уроки. Но я немного расстроен что последнее время появляется мало уроков, по CSS и JS. Надеюсь вы продолжите записывать и дальше подобные уроки!
Сейчас появилось больше свободного времени. Скоро выпущу несколько видео из серии CSS фичи и JavaScript фичи
@@Glo_Academy Жду с нетерпением!
Неистовый лайк!
Артем, сделай пожалуйста обзор и как правильно встроить Гуглмапс.
А вот как например при наведении на кнопку внутри неё с какой нибудь кляксы(круга, четырехугольника) разрастается другой цвет кнопки, го урок?
Щас бы новые css фичи)))
Привет. Спасибо за видео. А не поздно еще вопрос задать?
Если прописать элемент:before, элемент :after получится не повторяться, используя каскадность задать нужные стили повторно. Или в случае с этими классами это не сработает?
покажите пожалуйста как сделать анимационную новогоднюю рамку на всю страницу из картинки gif а также как просто на странице по углам разместить какие либо украшения сделанные в виде уголка а также как отрозить объект по горизонтали и по вертикали. Спасибо.
Бля прикольно! Автоматический лайк!
Здравствуйте! А как сделать чтобы например слово описание было как ссылка? Сделать слово описание ссылкой, я сделал, но только вот она не работает. Не подскажите, как сделать так, что бы ссылка заработала. За ранее благодарю!
Когда новые уроки будут, уже третье ноября???
Я вот все думал, ну как, как сделать навбар прям дико красивым, по итогу сделал с этим эффектом) красотища - неописуемая
правда я это дело немножко урезал(до нижней линии), но получилось, мне кажется, очень красиво - prntscr.com/o2vsjn
на бекграунде видео)
так что спасибо бро! очень полезная тема)
@@nightdog007 можно было поставить транзишен и бордер-боттом)))))
Здравствуйте. Я новичок в этом деле, решил попробовать. После просмотра вашего видеоролика я сделал нечто подобное, но столкнулся с такой проблемой. Я хотел поместить ссылку вместо описания, ну или сделать кнопку по типу "подробнее", но сама ссылка отказывается работать. Не кликабельна так скажем. Могли бы вы прояснить в чём может быть дело?
Помогите, почему , пытаясь назначить атрибут ссылки для заголовка или описания ничего не происходить? Цветом как ссылка, но не активная
Доброго времени суток. Ситуация следующая, перед ссылкой поставил изображение через псевдо элемент Before. Чтобы при наведении курсора на ссылку менялась картинка. Хочу так же сделать, как у вас, чтобы при наведении всплывала рамка. Но вот проблема, часть рамки с псевдо элементом after работает исправно, а прописав настройки для рамки с псевдо элементом before получаю искажение самого окна с ссылкой, поскольку данная область уже задана под изображение. Пробовал заключать данную ссылку и изображение в отдельный тег figure, как у вас и задавать рамку этому тегу. Рамка работает корректно, но вытекает следующая проблема, область тега как будто перекрывает предыдущий тег ссылкой и ссылка становится не кликабельной.
А как можно было бы сократить запись с помощью SASS?
А как вместить в h2 ссылку ? ОНа вроде и помечается фиолетовым как ссылка, но при этом не переходится.
Что делать если я это делают над списком (li) но при этом закрывается ссылка и я не могу по ней перейти
как добавить это на сайт?
Давай прелоадер!!!!!!!
Когда новые фичи ?
10% подписчиков просмотрели видео и 10% из них ещё и лайкнули.
Мне, что-то незаходит лофтблог(((
Артем, покажи как сделать так, чтобы этот квадратик как бы "вдавливался" на 10-15px при нажатии, как плитки в меню пуск в windows 8 и 10
через jquery поменять ширину с высотой и фон сделать темнее, а после того, как отпустишь кнопку откатить всё до начального состояния
Зачем так извращаться? JS не должен менять стили так то, он должен только переключать классы. А делается это просто.
Вариант 1: для .container ставим transform-style: preserve-3d;
perspective: 200px; для figure:active ставим transform: translateZ(-1px);
background-color: #ec407a;
Вариант 2: для figure:active ставим width: 280px;
height: 280px;
background-color: #ec407a;
В обоих случаях появляются маленькие баги, но избавиться от них не составит труда, если голова на месте. Я показал лишь пример как получается такая фигня.
зы: во втором варианте что бы элементы не сьезжали надо всего лишь figure обернуть еще одной оберткой)))
А зачем так извращаться? Просто ставим для кнопки .button:focus { scale: 0.7 }
А как сделать так чтобы после клика с двумя переворотами карточка разворачивалась обратной стороной поверх контента?
@@vladislavstepanov7591 ну можно и так, только все таки актив а не фокус) я в любом случае просто написал первое решение которое мне в голову пришло, ну и плюс во втором моем варианте можно четко контролировать размер, а не в процентах делать))
Figure читается через г
короче лысый забил на этот плейлист, ладно отпуск, подписался ради этого раздела, действительно свежо и нестандартно, но похоже закончилось, отписываюсь, может продолжение css выпадет в предложу, посмотрю..
Артем, надоело то что ты обозначаешь псевдоэлементы через :. В CSS3 псевдоэлементы обозначаются через ::
Если надоело, прочитай стандарт w3c yadi.sk/i/u3C5o6B-3ah5Ui
www.w3.org/wiki/CSS/Selectors#Pseudo-elements
Продолжай CSs фичи и GitHub.
Читал, что ты используешь VS Code, хотелось бы про него отдельные уроки, фичи, плагины, т.к довольно скупая информация про этот редактор в интернете, особенно для веб разработки!
Спасибо за уроки на канале!