Легкие CSS эффекты для любого сайта или блога

Главная » Верстка » Легкие CSS эффекты для любого сайта или блога
Самолетная 614022 Россия, Пермь +79630195620
Верстка
CSS, дизайн, новичкам
1771

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

Плавное подчеркивание ссылок в меню.

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

подчеркивание при наведении

Подчеркивание при наведении

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

Сперва давайте создадим каркас в виде HTML тегов.

Как можете заметить, внутри тега <a> кроме анкора ссылки вложен пустой контейнер в виде <span>. Именно этот элемент является нашей подчеркивающей линией.

Теперь осталось только применить CSS для нашего меню. Здесь основным свойством является transition — оно отвечает за эффект между двумя состояниями объекта. У нас их какраз два. Это начальное, когда отображается меню. И состояние, когда мы наводим курсор на элемент меню: hover.

По условиям элемент span имеет длину в 10 пикселей. В конечном итоге линия должна занимать 100% ширины меню. Указываем эти условия в CSS файле. Ну и применяем свойство transition.

 

Подсветка ссылок в тексте.

Со ссылками все намного проще, не нужно никаких добавочных элементов. Просто в CSS прописать свойства для двух состояний у ссылки. Идея в том, что ссылкам нужно указать цвет у background’а, и плавно его изменить. В этот раз опять будем использовать свойство transition.

А вот те значения, которые вы можете подставить и изменить анимацию.

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Вот таким легким способом вы можете сделать свой блог или сайт более живым.

Черкни и ты пару строк

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

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

Спасибо что прочли эту статью до конца, надеюсь та информация что была изучена вами, оказалась для вас полезной. Если в ходе изучения возникли вопросы, то смело задавайте их в комментариях, я обязательно на них отвечу!

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение