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

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

Всем привет! Сегодня я подготовил для вас очередной пост по верстке, а именно то, каким образом у меня реализовано меню на блоге, и как сделана подсветка ссылок. В этом, конечно, нет ничего трудного, и если у вас установлен 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. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

  • Андрюха, большой респект тебе за статью. Как только появится свободное окошко обязательно применю подчеркивания на блоге.

    Нравится мне твой блог, все так вроде и просто, и при этом очень красиво и со стилем. Реально классный шаблон!

    • Масалкин Андрей

      Да не за что:) Если, что интересует еще, пиши. А шаблон мне тоже нравится:) Долго его делал, хотелось чтобы был минимализм и при этом стильно.

      • Прекрасно получилось сочетание минимализма и дороговизны. Не зря старался...

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

    • Айк

      Отличная статья спасибо, добавил в закладки.

      Виталий классный блог, тоже добавил в закладки)

      • Спасибо АЙК!

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

        Зато применил transition в стиле главной менюшки, получилось реально прикольно! Еще раз спасибо за статью...только я не понял, а под какой ключевик она заточена?

        • Масалкин Андрей

          Ни под какой:) У меня есть статьи которые под ключи не затачиваются:)

  • Марина

    Добрый вечер. Подскажите пожалуйста, как поменять цвет подчеркивания. Не могу найти, какой элемент отвечает за подчеркивание в моем случае hellers.ru/home-modern/

    • Марина

      Извините, разобралась

      • Масалкин Андрей

        Ну и отлично! :)

x

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

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

Сообщение