webmasters_by Oct 31 2011 at 12:39

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

8 min

37K

CSS*

Translation

+181

Comments 49

sparkle Oct 31 2011 at 13:18

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

deerua Oct 31 2011 at 13:25

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

MechanisM Nov 2 2011 at 00:50

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

neuotq Oct 31 2011 at 13:26

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

Glivera Oct 31 2011 at 13:37

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

TerrorDroid Oct 31 2011 at 16:25

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

HeadTek Oct 31 2011 at 13:23

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

AntonShevchuk Oct 31 2011 at 13:24

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

igorakintev Oct 31 2011 at 13:29

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

0mm Oct 31 2011 at 13:25

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

Softlink Oct 31 2011 at 17:11

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

achekalin Oct 31 2011 at 20:29

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

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

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

putnik Oct 31 2011 at 13:34

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

xmagnusx Oct 31 2011 at 13:47

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

webmasters_by Oct 31 2011 at 13:57

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

xmagnusx Oct 31 2011 at 14:01

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

xmagnusx Oct 31 2011 at 14:02

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

SowingSadness Oct 31 2011 at 14:00

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

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

SowingSadness Oct 31 2011 at 14:11

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

faiwer Oct 31 2011 at 17:28

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

UFO just landed and posted this here

f0rmat1k Oct 31 2011 at 14:21

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

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

Хуже этого:

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

 color: #555;

 font-size: 60px;

}

webmasters_by Oct 31 2011 at 14:31

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

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

f0rmat1k Oct 31 2011 at 14:36

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

webmasters_by Oct 31 2011 at 14:53

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

drive Oct 31 2011 at 14:25

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

tehnolog Oct 31 2011 at 15:16

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

kr1z Oct 31 2011 at 15:23

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

kritsky Oct 31 2011 at 15:40

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

IonDen Oct 31 2011 at 16:35

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

Sytrus Oct 31 2011 at 16:45

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

zBit Oct 31 2011 at 17:13

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

mikenerevarin Oct 31 2011 at 17:40

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

zBit Oct 31 2011 at 22:44

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

Methos Oct 31 2011 at 17:18

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

Maxima Oct 31 2011 at 18:12

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

UFO just landed and posted this here

Maxima Oct 31 2011 at 19:36

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

webmasters_by Oct 31 2011 at 18:54

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

frenzis Oct 31 2011 at 19:02

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

webmasters_by Oct 31 2011 at 19:07

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

akral Oct 31 2011 at 20:09

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

Seteh Oct 31 2011 at 20:26

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

Mithgol Oct 31 2011 at 23:54

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

YourWest Nov 1 2011 at 00:08

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

UFO just landed and posted this here

Tomasina Nov 1 2011 at 12:06

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

maxvipon Nov 2 2011 at 06:13

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

lesha_firs Nov 2 2011 at 08:23

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

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