Создание эффектного меню без использования JavaScript


Сегодня рассмотрим как создать красивое меню на чистом css.

Сразу пример


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

Красивое меню рассмотрим на примере, представленным здесь.

Меню на самом деле красивое и реализовано оно на чистом css. Давайте рассмотрим какие свойства прописывал создатель и что получилось.

Там представлено 7 типов меню. Но у них у всех есть одна общая черта — расплывчатый текст, который при наведении становится чётким. Это было реализовано с помощью свойства

  • color: transparent; color — устанавливает цвет шрифта, параметр - transparent делает его прозрачным.

А размытость придаёт свойство:

  • text-shadow: 0px 0px 5px #fff;- тень текста. Третий параметр (со значением 5px) устанавливает радиус размытия, четвёртый параметр — устанавливает цвет.

При наведении курсором на одну из ссылок, которая находится в блоке с классом bmenu (по документации разработчика) у всех ссылок меняется цвет на чёрный. А ссылке, на которую навели, добавляется параметр padding-left: 10px, добавляющий отступ от левого края внутри блока. В свойстве text-shadow меняется радиус на 1px.

Плавность при наведении на другие ссылки достигается за счёт свойства с параметрами transition: all 0.3s ease-in-out;

  • transition - свойство, устанавливающее эффект перехода между двумя состояниями объекта.
  • Первый параметр (all) - устанавливаем стилевое свойство, которое будет использоваться для создания эффекта перехода, в нашем случае указано что все свойства будут отслеживаться
  • Второй параметр (0.3s) - устанавливается продолжительность анимации от старта и до завершения. Задаётся в секундах.
  • Третий параметр (ease-in-out) - устанавливаем, насколько быстро должно меняться значение стилевого свойства для которого указан эффект перехода. Ease-in-out - анимация начинается и заканчивается медленно.
  • У transition ещё есть четвёртый параметр, не используемый в нашем примере. Это параметр transition-delay — устанавливает «задержку» перед выполнением анимации.

С параметром transition:

без параметра transition:

Данное меню реализовал на своём сайте. Просто скачав архив залил в папку css demo.css и style1.css (номер 1 означает какой пример меню выбрал).
Скачать архив моего примера.

Вот за счёт таких свойств, может сделать красивое меню без использования js. В данном примере рассмотрели только 3 свойства, а их у css очень, очень много. Экспериментируйте).

Данный пост подготовлен автором @zheev.

Заглавное фото взято с сайта с примерами tympanus.net


Comments 4


Меню выглядело бы красивее если бы фоновой картинкой вы использовали что-то посимпатичней чем скриншот рабочего стола ))

17.11.2017 09:39
0

К сожалению, чувство вкуса "пропил")))))

17.11.2017 14:19
0

Вы получили 17.29 % голосов от @Booster. Работает на @Coinbank

You have received 17.29 % vote from @Booster. Powered by @Coinbank

17.11.2017 18:04
0