Анимация меню при помощи CSS3

[sparkle]

Круто! С нетерпением жду момента, когда все эти плюшки можно будет спокойно применять не боясь за то, что это не заработает у пользователя в браузере Х или браузере Y.

[deerua]

применяй и не бойся
когда-нибудь пользователь обновиться

[MechanisM]

Я и применяю. Сайт один а пользователей много всем не угодишь и подстраиваться под всех не стоит.
Когда-нить и они обновятся. А те у кого браузер что-то не поддерживает, прочитают сообщение что их браузер устарел и совет обновиться. Не хотят обновляться — их проблемы.

[neuotq]

Уже сейчас можно так разрабатывать веб и не только приложения для мобильны платформ современных смартфонов и планшетов.

[Glivera]

Применять можно уже сейчас с определением возможностей браузеров через www.modernizr.com/. А для не поддерживающих делать упрощенную версию или анимацию посредством jquery.

[TerrorDroid]

Применять что-то или нет — это сугубо ваше решение и/или умение убеждать заказчика. Ждать же кого-то всегда можно до бесконечности.

[HeadTek]

Спасибо за статью. Весьма интересно и красиво!

[AntonShevchuk]

Примеры действительно клёвые, жаль от некоторых вытекают глаза…

[igorakintev]

самый крутой 3, на фоне всех не выглядит свистоперделкой))

[0mm]

Неделя CSS3 на хабре.
Спасибо за стаью.

[Softlink]

Ага, заметил) И поучаствовал маленько.

[achekalin]

Все вокруг как-то «третьим» стало: USB3, SATA3, вот CSS3 бурно начал плодиться.

Правда, тут уже какой-то Bluetooth 4.0 начали пытаться продавать населению, но, думаю, с ним подождем )

А автору — спасибо огромное за статью, особенно за подробность ее!

[putnik]

Никогда не делайте на реальных сайтах 9-й вариант. Вас будут ненавидеть.

[xmagnusx]

Если все начнут делать такие менюшки, то можно быстро сойти с ума.

[webmasters_by]

ну я бы рассматривал эти примеры как наглядную демонстрацию возможностей CSS3, а не как готовый рецепт для использования на своём сайте.
Немного воображения и можно создать красивую менюшку на свой вкус. :)

[xmagnusx]

Согласен.
Это лишь пример, который, я надеюсь, не будут копипастить на миллиард сайтов.

[xmagnusx]

На счет наглядной демонстрации — на смешин маг была отличная статья, где анимировали прыгающий мяч.

[SowingSadness]

Пожалуйста, обратите внимание, что эта анимация и переходы будут работать только в последних версиях действительно современных веб-браузеров, такие как Google Chrome, Apple Safari и Mozilla Firefox.

Внезапно заработало в Опере

[SowingSadness]

Я понимаю, что это статья — перевод.
Я понимаю, что на западе про Оперу мало кто знает.
Но я все же это напишу тут, т.к. я люблю Оперу.

[faiwer]

Лично у меня(12 опера) — сильно тормозит.

[f0rmat1k]

Вот почему многие листинг когда делают с лишним абзацем? Зачем он? Чем вот это:

.ca-menu li:hover .ca-icon{
   color: #555;
   font-size: 60px;
}

Хуже этого:

.ca-menu li:hover .ca-icon{

 color: #555;

 font-size: 60px;

}

?

[webmasters_by]

согласен полностью, просто я не нашел способа как лучше вставить css-код, поэтому использовал теги blockquote и code

вы что использовали для вставки этих кусков кода? я поправлю статью

[f0rmat1k]

При создании/редактировании топика справа есть подсказка с ссылой «Можно использовать html-теги». Там есть подсказки, например, тег source с атрибудтом lang=«css»

[webmasters_by]

спасибо, так действительно значительно лучше. что то я совсем от жизни отстал, раньше вроде этого тега не было :)

[drive]

анимация ради анимации не очень хорошая идея

[tehnolog]

На айпадах и других устройствах без мыши эта красота не видна, пока явно не ткнешь нужную ссылку. Поэтому пользоваться нужно осторожно. Часть пользователей и с современными браузерами на планшетниках и смартфонах не оценят ваш труд.

[kr1z]

iMac, FF, почти вся анимация жутко лагает и тормозит.

[kritsky]

Примеры отличные, но практика показывает, что пользователь сейчас любит простоту.
Подобное меню подошло бы для бренда, чтобы удивить пользователя, но ни как для ежедневного использования.

[IonDen]

Неплохо в качестве технологической демки. Но сами эффекты серьезно пугают!

[Sytrus]

Отлично! Просто то, что нужно, и без всякого flash или js.

[zBit]

Такими темпами скоро появится профессия CSS-программист.

[mikenerevarin]

Не поверите — сейчас на такой должности и работаю.

[zBit]

Если честно, вы меня сильно удивили.

[Methos]

Из всех примеров 9-ый и 10-ый варинты самые не_глаза_режущие, а остальные напомнили как на заре применяли разные BLINK и QUEUE =))

[Maxima]

Странный момент на долю секунды при смене пункта меню
весь экран становится черным, это не приятно уж точно.
В хроме последнем.

[Maxima]

Верно, окно только, просто открыто было на весь экран, но суть дела не меняет.

[webmasters_by]

странно, что то я ничего такого не наблюдаю, Chrome 15.0.874.106 m

[frenzis]

http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ оригинал — ищется по любому куску исходников

[webmasters_by]

ищется по ссылке в конце статьи

[akral]

Скоро попимо блокировки плагинов и скриптов, для того, чтобы можно было читать статьи, как спокойные статьи, надо будет блокировать и CSS. А то всё бегает и прыгает. =7

[Seteh]

Animatable от Lea Verou. Может кому-то будет полезно.

[Mithgol]

День Lea Verou на Хабрахабре. Я сегодня же упомянул её работу «-prefix-free».

[YourWest]

Я один минут 5 пытался сбить все кнопочки на сайте студии Just Be Nice? :)

[Tomasina]

офигенная штука!
flash отступает все дальше.

[maxvipon]

Вирви глаз, однако… Нельзя делать такие вещи, надо ж о людях думать немного, хоть это и пример всего лишь. Думаю, область применения плюшек CSS3 должна быть несколько иная, более полезная и интересная для глаз, нежели такие вот вирвиглазные менюшки.

[lesha_firs]

Остается только завидовать так-как в России только наверное в 2*30 году, ie перестанут использовать фирмы у которых стоит windpws-xp и менять его они не собираются(

p.s
Объединяемся в команду против ie Firefox нас поддерживает gigaom2.files.wordpress.com/2011/01/firefox-ie.png )