Выезжающее CSS3 меню

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 6-04-2011, 15:17
Выезжающее CSS3 менюКомпактное выезжающее горизонтальное выпадающее CSS3 меню
Стильный пример CSS3 анимации свойства transition, меню реализовано в виде одной кнопки, при наведении на кнопку - вправо плавно выезжает остальная часть меню с категориями, при наведении на категорию - плавно вниз выпадает меню подкатегорий, всё просто и эффектно.
  • 100
     Просмотров: 11 409      Комментариев: 10   

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

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

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

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

Что такое CSS хаки или Вендорные префиксы

Автор: Admin    Категория: Основы / CSS    Теги:  CSS3    Дата: 21-02-2011, 20:00
Что такое CSS хаки или Вендорные префиксыЧто такое CSS хаки или Вендорные префиксы
Если браузер не поддерживает и не понимает какое-то определённое CSS свойство, то каким образом начинает вдруг понимать это свойство после применения хака?
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.
  • 100
     Просмотров: 6 784      Комментариев: 0   

Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное

Автор: Admin    Категория: Основы / CSS    Теги:  CSS3, Вертикальное меню    Дата: 21-02-2011, 18:49
Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальноеМеню аккордеон на CSS3 вертикальное и обзор основных CSS3 свойств
Представляю вашему вниманию CSS3 аккордеон меню вертикальное. Это скорее не меню а маленькая демонстрация новых возможностей CSS3 которые я вложил (скорее - напихал :)) в это вертикальное меню аккордеон. Хочу сразу предупредить - не все CSS3 свойства поддерживаются всеми браузерами. Демонстрационную страницу лучше смотреть браузером Google Chrome последней версии, так же эти свойства поддерживают Safari и Opera последних версий, а также Mozilla Firefox начиная с версии 3.7.

В это CSS3 аккордеон меню вошли свойства:
box-shadow - тень
text-shadow - тень текста
transform - трансформация (перемещение, вращение и изменение размеров)
transition - это простейшая CSS3 анимация/переход, которую можно применить к любому свойству CSS
rgba в CSS3 - цвет + прозрачность одним свойством
border-radius - скругление углов
opacity - прозрачность
gradient - плавные переходы из одного цвета в другой
  • 100
     Просмотров: 12 773      Комментариев: 0   

назад1 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>

Глобус