Стильное фантастическое меню шапка на CSS3

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню, CSS3    Дата: 18-03-2011, 17:03
Стильное фантастическое меню шапка на CSS3Волшебство CSS3 или Стильное фантастическое меню шапка на CSS3
Просто фантастический пример волшебства CSS3 анимации.
Для реализации такого стильного эффекта используется CSS3 свойство transition.
Шапка меню выполнено маркированным списком с разным уровнем вложенности. При наведении на категорию меню происходит эффектная плавная смена заднего фона, состоящего из трёх картинок, которые плавно собираются в один фон и сверху плавно приесжает меню подкатегорий. При убирании курсора происходит обратная анимация. Ещё раз хочу заметить, что это всё реализовано только на CSS, никакого javascript!
  • 100
     Просмотров: 7 537      Комментариев: 11   

Горизонтальное Lavalamp меню на CSS3

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 17-03-2011, 17:10
Горизонтальное Lavalamp меню на CSS3Стильное эффектное горизонтальное Lavalamp меню чисто на CSS3
Мне, как и многим очень нравится LavaLamp эффект в навигации, раньше такой эффект можно было реализовать только на javascript.
И вот теперь это стало возможным с применением только CSS. Для достижения эффекта используется CSS3 хак -webkit-animation и правило @-webkit-keyframes
Свойство -webkit-animation — сокращенный способ задать свойства анимации -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.
Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.
Данный хак поддерживается только браузерами на движке WebKit - это Safari 4.0 и выше, Chrome 3.0 и выше, меню корректно работает только в этих браузерах!!!(хотя Опера тоже что-то там пытается изобразить)
  • 100
     Просмотров: 4 330      Комментариев: 0   

Горизонтальная раздвижная CSS3 навигация

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 13-03-2011, 16:26
Горизонтальная раздвижная CSS3 навигацияГоризонтальное раздвижное CSS3 меню одна кнопка
Эффектный пример CSS3 навигации реализованный одной кнопкой.
При наведении на кнопку меню - навигация раздвигается в разные стороны по горизонтали благодаря новому свойству CSS3 анимации transition
Меню реализовано маркированным списком вложенным в DIV. Пример меню корректно работает только в современных браузерах последних версий, поддерживающих CSS3 свойство transition - Opera, Google Chrome, Safari, Mozilla Firefox(начиная с версии 4)
Код меню валидный DTD XHTML 1.0 Strict
  • 100
     Просмотров: 6 011      Комментариев: 0   

Простое горизонтальное выпадающее javascript меню

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню    Дата: 4-03-2011, 00:11
Простое горизонтальное выпадающее javascript менюПростое и стильное горизонтальное выпадающее javascript clickMenu
Древняя горизонтальная менюшка, свёрстана маркированным списком, выпадение реализовано на javascript.
Выпадает при клике по категории, закрывается так же при клике.
Чтоб меню заработало тегу body нужно дописать onload="ieFix('menu')" как в примере.
Меню корректно работает во всех браузерах, особенно должно понравиться любителям древних браузеров.
Код меню валидный DTD XHTML 1.0 Strict
  • 100
     Просмотров: 11 833      Комментариев: 0   

Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню, CSS3    Дата: 1-03-2011, 21:59
Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимацииСтильная универсальная CSS3 навигация для сайта
Это универсальное меню - замечательный пример CSS3 анимации. Раньше такого эффекта можно было добиться только с помощью скриптов, теперь это элементарно реализуется благодаря новым CSS3 свойствам.
В эту навигацию вошли такие CSS3 свойства как:
box-shadow - тень
border-radius - скругление углов
transition - CSS3 анимация (основа реализации навигации)
opacity - прозрачность
rgba - цвет + прозрачность одним свойством
  • 100
     Просмотров: 7 077      Комментариев: 9   

Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 1-03-2011, 21:31
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимацииСтильное горизонтальное меню навигации для сайта с применением CSS3 анимации
Свойство - transition в CSS3 слайдинг меню
Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации, всё очень просто и эффектно.
Я решил всё больше отдавать предпочтение новым свойствам CSS3, благо, приход этих новых свойств в жизнь веб мастера уже не за горами. Браузеры Google Chrome и Safari последних версий уже понимают новые CSS3 свойства, благодаря этому можно хотябы посмотреть живые примеры а не картинки примеров. Пример работы CSS3 слайдинг меню нужно смотреть именно этими браузерами!
  • 100
     Просмотров: 6 933      Комментариев: 2   

Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню    Дата: 1-03-2011, 18:43
Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопкиКак сделать эффект нажатой кнопки
Представляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный DTD XHTML 1.0 Strict. Способ на столько прост, что и описывать нечего, приведу сразу пример готового кода.
Эффект создаётся путём изменения цвета рамки и смещения якоря ссылки при наведении курсора мыши на ссылку навигации.
  • 100
     Просмотров: 7 804      Комментариев: 1   

Простое круглое меню на CSS с описанием категории при наведении на иконку

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, Вертикальное меню, Круглое меню    Дата: 1-03-2011, 18:25
Простое круглое меню на CSS с описанием категории при наведении на иконкуПример простого круглого меню на CSS с описанием категории при наведении на иконку
Представляю вашему вниманию готовое решение - Простое круглое меню на CSS с описанием категории при наведении на иконку, которое я подсмотрел на замечательном сайте cssplay. Код меню валидный DTD XHTML 1.0 Strict будем потихоньку переходить на Строгий синтаксис XHTML.
Меню реализовано простым маркированным списком, при наведении курсора мышки на иконку - в центре меню появляется краткое описание категории, длина краткого описания ограничена! увидеть ограничение длины описания можно опытным путём
Картинки иконок должны быть с прозрачным фоном и того же размера что и в примере, рациональнее использовать PNG иконки с прозрачным фоном так как качество PNG иконок гораздо выше чем GIF.
Пожалуй, больше добавить тут нечего, меню замечательное, его нужно просто видеть, всё очень просто и понятно.
  • 100
     Просмотров: 6 847      Комментариев: 1   

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус