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

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

Вертикальное выпадающее CSS меню

Автор: Admin    Категория: Меню навигации    Теги:  Вертикальное меню, CSS    Дата: 12-03-2011, 14:39
Вертикальное выпадающее CSS менюОчередной пример простейшей реализации вертикального выпадающего CSS меню
Меню реализовано маркированным списком с разным уровнем вложенности, список обёрнут в DIV, вот и вся реализация.
В эту навигацию я не стал добавлять никакого графического оформления, всё чисто на CSS, при желании можно конечно украсить менюшку графикой на любой вкус, код меню предельно прост и никому не составит труда оформить всё под себя.
Меню корректно работает во всех браузерах.
Код меню валидный DTD XHTML 1.0 Strict
  • 100
     Просмотров: 14 499      Комментариев: 0   

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

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

Стильное вертикальное выпадающее css меню

Автор: Admin    Категория: Меню навигации    Теги:  Вертикальное меню, CSS    Дата: 3-03-2011, 23:38
Стильное вертикальное выпадающее css менюСтильная вертикальная выпадающая css навигация для сайта
Простейшая реализация вертикальной выпадающей CSS навигации.
Меню реализовано маркированным списком с разным уровнем вложенности, всё легко и просто.
Код меню валидный DTD XHTML 1.0 Strict.
Меню корректно работает во всех браузерах.
  • 100
     Просмотров: 12 843      Комментариев: 1   

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

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

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

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

Лента новостей
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>