В этой статье речь пойдет об эффекте размытия пунктов меню. В частности, мы будем изменять тени текста и применять переходы при наведении курсора мыши. Основная идея здесь заключается в размытие всех пунктов меню, за исключением лишь того, на котором будет курсор мыши.
Рассмотренный пример будет работать только на современных браузерах. К сожалению IE не поддерживает до сих пор многие категории css3 свойств.
Для начала рассмотрим структуру нашего меню. Это будет обычный список:
<ul class="bmenu"> <li><a href="#">О нас</a></li> <li><a href="#">Галерея</a></li> <li><a href="#">Веб дизайн</a></li> <li><a href="#">Проекты</a></li> <li><a href="#">Контакты</a></li> </ul>
добавим стили:
.bmenu{ padding: 0px; margin: 0 0 10px 0; position: relative; } .bmenu li{ font-size: 50px; display: block; }
теперь применим эффекты, а именно, будем использовать только белый цвет для текстовых теней и самого текста и немного размоем пункты:
.bmenu li a{ color: transparent; display: block; text-transform: uppercase; text-shadow: 0px 0px 4px #fff; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
а при наведении курсора усиливаем размытие, а текущий элемент сделаем более четким и сдвинем немного в сторону:
.bmenu:hover li a{ text-shadow: 0px 0px 6px #fff; } .bmenu li a:hover{ color: #fff; text-shadow: 0px 0px 1px #fff; padding-left: 10px; }
Вот и все. Надеюсь Вам понравилось =)