MegaWeb.su как создать свой сайт через html

Несколько примеров горизонтальной навигации с градиентной заливкой, никаких картинок только CSS

Эффект мутного текста на CSS3 в горизонтальной навигации

Иногда пользователи задают вопросы - как реализовать мутный текст без применения картинок и скриптов.
Да очень просто, с помощью CSS3 свойств: тень text-shadow и полупрозрачного цвета rgba.

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Стильная CSS3 горизонтальная выпадающая навигация в стиле web 2.0
Представляю вашему вниманию замечательный пример реализации горизонтального выпадающего меню чисто на css.
Эффект плавного выпадания меню реализован при помощи css3 свойств transition и opacity, градиентная заливка ссылок категорий реализована css3 свойством gradient, тень текста свойством text-shadow никаких картинок нет, всё только на css.

CSS3 увеличение картинки при наведении горизонтальная css3 навигация из иконок
Всегда и по сей день было и есть стильно модно и эффектно использовать на сайте плавное увеличение картинки при наведении.
Раньше это можно было реализовать только с помощью яваскрипта, но теперь это можно сделать очень легко и просто с помощью CSS3 и свойства transition(CSS Transition позволяет назначать изменения свойств CSS плавно и в течение некоторого времени, такая css3 анимация). Подробнее можно посмотреть тут Обзор основных CSS3 свойств
Рассмотрим два примера горизонтальной навигации из иконок которые будут плавно увеличиваться при наведении курсора мыши.
В первом примере блок с иконками навигации не растягивается - увеличивающаяся иконка располагается поверх блока.
Второй пример - простое увеличение картинки с растягиванием блока с иконками.

Пример простого горизонтального CSS3 слайдер меню
Менюшка очень простая, это скорее не меню а демонстрация простейшего css3 слайдера.
В это простое меню вошли css3 свойства transition - css3 анимация, border-radius - скругление углов, box-shadow - тень, rgba - цвет и прозрачность одним свойством. Все эти свойства уже поддерживаются всеми современными браузерами, правда пока через хаки, но поддерживаются.
Меню реализовано маркированным списком вложенным в DIV, код меню валидный DTD XHTML 1.0 Strict

Замечательный пример круглого CSS3 меню
Меню реализовано простым маркированным списком с плавающими элементами списка, в основе реализации точный расчёт размеров всех картинок таким образом чтобы картинки находились строго на своих местах без применения координатного позиционирования, картинки смещаются просто отступами сверху или снизу и таким образом располагаются вокруг основной картинки восьмиконечной звезды. Очень интересная реализация, это не просто круглое меню, а замечательный пример точного математического расчёта в CSS.

Как сделать горизонтальное lava lamp меню на jQuery 1.6.1
Новый скрипт меню, использующий понравившийся многим lava lamp эффект, это пожалуй самая простая и удобная реализация lava lamp эффекта.

Скрипт меню работает совместно с библиотекой jQuery 1.6.1, меню реализовано простым маркированным списком и корректно работает во всех современных браузерах, код меню валидный DTD XHTML 1.0 Strict

Компактное выезжающее горизонтальное выпадающее CSS3 меню
Стильный пример CSS3 анимации свойства transition, меню реализовано в виде одной кнопки, при наведении на кнопку - вправо плавно выезжает остальная часть меню с категориями, при наведении на категорию - плавно вниз выпадает меню подкатегорий, всё просто и эффектно.