CSS анимация ссылок при наведении для HTML меню с Halloween стилем

В этом #shorts видео мы добавим CSS анимацию для ссылок в наше Halloween меню, при наведении мышью - hover, а так же при фокусе с помощью клавиатуры
Смотрите больше материалов, с примерами которые можно скопировать на сайте obweb.dev/

[@avbykovsky]

Подобные анимации надо делать не через margin, а через transform:translate. И браузер вам скажет спасибо

[@nimarchik]

Так не будут сдвигаться другие объекты)

[@wolffox8983]

Всё, сдаюсь, под натиском столь полезных и качественных видео сажусь делать свой первый сайт)

[@obwebdev]

Ничего себе! Значит это успех с моей стороны :) Обязательно пиши если появятся любые вопросы.

[@rexdraconis1703]

Вот вот, я пишу небольшой проектик, и уже думаю как эту штуку в него влипить) Очень уж красиво смотрится

[@prostata3010]

Я только стал на путь познания, но рад впитывать такие видео) спасибо за контент

[@user-om8vt1oj8p]

Крааааайне нехорошая практика. Конкретно этот пример за счет after-а работать будет, но использовать margin по hover-у - это практически всегда плохо. Уж лучше задать элементу обертку и играться с ней через padding-и. А то можно словить принеприятнейший эффект при наведении на самый край элемента. Он будет с очень большой скоростью подрагивать туда-сюда, поскольку по ховеру начинает смещаться, тут же из под курсора убегает, начинает двигаться обратно, снова под курсор попадает ну и т.д. А еще лучше ни внешнюю, ни внутреннюю геометрию элемента не трогать, а просто двигать содержимое через transform.

[@PhotoMixer]

Да, сейчас все просто стало (конечно не через margin это стоит делать) Вот помню в 2011 нужно было кучу js использовать, а ещё я очень любил ActionScript для создания красивых сайтов. Многие офигевали от того что можно было на flash сделать. Ностальгия 😢😢😢

[@ORIPlay]

Аж олдскулы свело 😢

[@albo8911]

Спасибо! Анимация норм при этом кода почти нет. 😊

[@Varanovski]

Все круто только нюанс, для новичков как я, которые только начинают свой путь, покажи весь код в стилях с самого верха. Контент огонь...

[@Goodbish]

При анимировании margin рендер идёт целой страницы. При анимировании допустим transform, рендер будет лишь того блока, который будет меняться. Не в обиду, но советую хотя бы дать на просмотр опытному разработчику, прежде чем выкладывать. А то показывать новичкам примеры без хорошего кода лишь усложнит им путь

[@obwebdev]

Спасибо. Не думаю что стоит обижаться на совет по ревью кода. Особенно когда комментарий вполне уместный.

[@rubenstir3673]

Спасибо А можешь сделать видео про смену на темную сторону?

[@obwebdev]

на чистом HTML/CSS/JS это конечно не очень весело. но возможно. думаю смогу записать. добавлю в очередь :)

[@Iwalkaroundtheworld]

Продолжайте

[@kosvu]

Как называется шрифт который у тебя в vs code подскажи пожалуйста

[@oku911]

00:02

[@bush_master4994]

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

[@gzoomercom]

Думаю это VS Code

[@gzoomercom]

Visual Studio Code

[@jonsnght9183]

А почему знак больше появляется только при наведении если ему не задан hover?

[@obwebdev]

потому что знак > это элемент ::before и в видео видно что по умолчанию у него цвет прозрачный. и так как у самой ссылки (к которой привязан этот ::before) на ховер добавляется тень красного цвета, она добавляется и к этому псевдо-элементу. как то так. hover это добавление стилей при наведении мыши

[@oku911]

0:2

[@user-xc7rn3ep5o]

Можешь пожалуйста скинуть код css

[@ThePirateHistory]

Margin серьёзно?не хотябы падинг, просто margin

[@obwebdev]

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

[@user-eh2bv4ev9l]

Это написанно на python?

[@bape155]

Нет, какой пайтон, тут только html и css

[@vladimircreator]

Какой смысл этого видео?

[@RomaxSinergy]

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

[@user-po1ez6ke6m]

Опа, узнал что то новое! Кстати как называется меню три полоски? Типо нажимаешь на три полоски и у тебя меню разворачивается, хотел бы научится делать его, незнаю точного названия

[@obwebdev]

Burger menu. на канале есть шортс, хотя там код конечно не самый лучший kzbin.info2WM6SDXpqGk?feature=share

[@user-po1ez6ke6m]

@@obwebdev можно сделать так же с aside? И прописать transition чтобы всё плавно было

[@Kviliti]

Бургер меню.