Создаем анимированные кнопки при помощи CSS3

[TKs]

Классные статьи пишете, в конце всегда самые классные примеры.

[webmasters_by]

спасибо, но я их только перевожу, ссылка на источник находится в конце статьи )

[Defite]

Рекомендую подписаться на твиттер Codrops. Я, например, эту статью прочитал и попробовал еще в понедельник.

[helloilya]

Лучше на rss или e-mail т.к. в твиттере они публикуют ссылки не только на свои статьи.

[Defite]

Я как раз подписан на твиттер и rss.

т.к. в твиттере они публикуют ссылки не только на свои статьи

Это так у всех подобных блогов. Зато встречаются интересные статьи.

[XAMelleOH]

2:Defite Человек написал, что переводил и копировал примеры себе на сайт с понедельника до сегодняшнего дня.

2:webmasters_by А вообще, если Вы переводите, то почему ссылки на примеры на Ваш сайт, а не на оригинал? Или примеры на англицком читатели хабра не смогут поклацать? Получается просто ПЕАР своего сайта.

Хотя примеры классные не вопрос.

[Defite]

Там вообще-то есть ссылка на оригинал, но не в теле поста.

[DeusModus]

Это очень круто, но:
Хабр — не ЖЖ и не центр мирового кросспостинга. Не нужно копировать свои посты из других блогов и сайтов, указывая, что ранее они были опубликованы в другом месте.

Тем более, что статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь. Почему было не сделать топик-ссылку?

[webmasters_by]

«указывая, что ранее они были опубликованы в другом месте»
где я это указывал?

«статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь.»
там статья появилась всего лишь на час раньше, если это вообще имеет значение, про топик-ссылку не думал, но если так хабросообществу будет удобнее, то можно и поменять.

[DjYarik]

Лично мне удобней когда все на хабре.
Не будем забывать о «избранном» на хабре, где и складируются такие приятные плюшки.

[DeusModus]

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

[webmasters_by]

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

[Fedcomp]

Топиков ссылок больше не существует.

[globik]

К сожалению, топик-ссылки отменили.

[Sytrus]

Прикольные эффекты, но предыдущие ваши два перевода были как-то поинтереснее, имхо.

[neoshinji]

Спасибо за статью

[Kane]

Без дополнительной разметки http://jsfiddle.net/QBDhb/
Работает, увы, только в Fx. Остальные браузеры не умеют анимировать :before и :after псевдоэлменты.

[Nico_izo]

Что, к слову, является багом, коему подвержены WebKit браузеры, Opera и IE10.
На багтрекере вебкита данный баг есть, вот он, но движений в сторону его исправления нет.

[l1bbcsg]

По крайней мере в опере всё прекрасно работает без анимации, если добавить -o-linear-gradient, получится нормальная graceful degradation (и выглядит по-прежнему приятно), а там можно и подождать пока поддержка появится. У остальных браузеров скорее всего всё то же самое.

[AxelTv]

В Safari под маком повисает страничка и не рендерится…

[Softlink]

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

[anvaka]

Я все равно не понимаю этого. @webmasters_by — трудился и сделал перевод, подогнал его под формат хабра. Если бы не хабр, я бы сегодня не увидел этой статьи и кто знает как сложилось бы мое будущее :).

То что у него есть сайт и он туда кросспостит — мне абсолютно все равно. Я хожу на хабр, и вряд ли буду ходить к нему (не обижайтесь). У Хабра хороший проходной порог, где мусор отсеивается. Но «хотите публиковать на хабре — не публикуйте у себя» — сноббизм какой-то.

Не поймите неверно. Хабр — экслюзивный ресурс, и аналогов ему даже в англоговорящей сети днем с огнем не сыщешь. Имея такой уровень сложно потерять эксклюзивность, делая кросспосты. Это win-win отношения. Я заинтересовался этим конкретным топиком, автор получил немного трафика к себе. От этого я хабр не брошу, он хороший…

[pepelsbey]

Автор статьи забыл, а вы проглядели, что есть ещё и -ms-linear-gradient и -ms-transition, вспомнили почему-то только про -ms-transform. Но в целом приятно, что это не очередная -webkit-only демка.

[Mushtat]

Где хоститесь, что сайт хабраэффект держит?

[hautamaki]

Как чистая идея — очень круто. Как элемент UI — весьма сомнительно: уж больно анимационно для таких заурядных элементов как кнопки.

[Valery4]

Для игр думаю, если в меру, было бы очень круто. Но для обычных веб-проектов, конечно — уже перебор.

[r00tGER]

Предлагаю ввести тег «свистелки и перделки» для таких топиков.

У меня уже правило сформировалось, чем «выпендрежнее» кнопка — тем меньше полезного она делает.

[kuchumovn]

А я целый 2010-2011 год отлаживал и шлифовал свой скрипт для анимации кнопок… )
Пока единственный недостаток — при нажатии они нажимаются слишком быстро.
Если бы можно было задавать время анимации нажатия, то тогда CSS, мб, победил бы в моём случае.

[Alchemist]

Из примеров на вашем сайте только 3 и 4 не трогают шрифты вне кнопок. В остальных примерах текст
«Анимированные кнопки при помощи CSS3 Transitions и Animations» незначительно меняет свой вид во время анимации.

[mexanism]

В хроме поводил мышью над кнопками из демок, анимация рывками, пока водишь мышью процессор до 40% нагружается

[Stam]

Немного по стилям:

Добавьте в стили вот такую штуку -webkit-font-smoothing: antialiased;. Это отключит субпиксельное сглаживание (на таких графических элементах это не ухудшит их внешний вид).

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

[tibalt]

в хроме та же херня

[rudykh]

sexy.
В опере 11.52 под убунтой не врщаются звездочки из примера 6 и не появляются стрелочки из примера 5

[0n1y_0ne]

Нннет, спасибо, такую херню я готов читать на smashingmagazine и т.п. сайтах, но не на Хабре. Всегда засирал, засираю и буду засирать подобные левые переводы ни о чем.

_{Уважаемые разработчики Хабра! Сделайте, пожалуста, ОННН. А то тошнит уже от подобных топиков от одинаковых людей.}

[fmraven]

Раздвигающиеся кнопки — очень креативно! Спасибо, отличная статья.

[kleale]

Core 2 Duo\8Гб\9600GT, в ФФ8 кнопки ТОРМОЗЯТ! Вывод кнопки будут радовать меньше 1-2% населения земли в течении года как минимум. Неутешительно, если учесть что в нашей стране софтовая грамотность юзверей оставляет жедать лучшего.