Комментарии 40
Классные статьи пишете, в конце всегда самые классные примеры.
спасибо, но я их только перевожу, ссылка на источник находится в конце статьи )
Рекомендую подписаться на твиттер Codrops. Я, например, эту статью прочитал и попробовал еще в понедельник.
Лучше на rss или e-mail т.к. в твиттере они публикуют ссылки не только на свои статьи.
2:Defite Человек написал, что переводил и копировал примеры себе на сайт с понедельника до сегодняшнего дня.
2:webmasters_by А вообще, если Вы переводите, то почему ссылки на примеры на Ваш сайт, а не на оригинал? Или примеры на англицком читатели хабра не смогут поклацать? Получается просто ПЕАР своего сайта.
Хотя примеры классные не вопрос.
2:webmasters_by А вообще, если Вы переводите, то почему ссылки на примеры на Ваш сайт, а не на оригинал? Или примеры на англицком читатели хабра не смогут поклацать? Получается просто ПЕАР своего сайта.
Хотя примеры классные не вопрос.
Это очень круто, но:
Хабр — не ЖЖ и не центр мирового кросспостинга. Не нужно копировать свои посты из других блогов и сайтов, указывая, что ранее они были опубликованы в другом месте.
Тем более, что статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь. Почему было не сделать топик-ссылку?
Хабр — не ЖЖ и не центр мирового кросспостинга. Не нужно копировать свои посты из других блогов и сайтов, указывая, что ранее они были опубликованы в другом месте.
Тем более, что статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь. Почему было не сделать топик-ссылку?
«указывая, что ранее они были опубликованы в другом месте»
где я это указывал?
«статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь.»
там статья появилась всего лишь на час раньше, если это вообще имеет значение, про топик-ссылку не думал, но если так хабросообществу будет удобнее, то можно и поменять.
где я это указывал?
«статья на www.webmasters.by/articles/html-coding/487-animated-buttons-with-css3.html появилась на день раньше, чем здесь.»
там статья появилась всего лишь на час раньше, если это вообще имеет значение, про топик-ссылку не думал, но если так хабросообществу будет удобнее, то можно и поменять.
Лично мне удобней когда все на хабре.
Не будем забывать о «избранном» на хабре, где и складируются такие приятные плюшки.
Не будем забывать о «избранном» на хабре, где и складируются такие приятные плюшки.
Послушайте, мне не очень хочется с вами спорить. У вас несомненно есть своя позиция, свой ресурс, который как-то нужно продвигать, но в данном случае топик-ссылка действительно был бы уместнее.
К сожалению, топик-ссылки отменили.
Прикольные эффекты, но предыдущие ваши два перевода были как-то поинтереснее, имхо.
Спасибо за статью
НЛО прилетело и опубликовало эту надпись здесь
Без дополнительной разметки http://jsfiddle.net/QBDhb/
Работает, увы, только в Fx. Остальные браузеры не умеют анимировать :before и :after псевдоэлменты.
Работает, увы, только в Fx. Остальные браузеры не умеют анимировать :before и :after псевдоэлменты.
Что, к слову, является багом, коему подвержены WebKit браузеры, Opera и IE10.
На багтрекере вебкита данный баг есть, вот он, но движений в сторону его исправления нет.
На багтрекере вебкита данный баг есть, вот он, но движений в сторону его исправления нет.
По крайней мере в опере всё прекрасно работает без анимации, если добавить -o-linear-gradient, получится нормальная graceful degradation (и выглядит по-прежнему приятно), а там можно и подождать пока поддержка появится. У остальных браузеров скорее всего всё то же самое.
В Safari под маком повисает страничка и не рендерится…
Это уже не кнопки, а черт знает что. Представляю, как начнут дергаться все сабмиты на сайтах, а вместе с ними и посетители. Всего должно быть в меру. Для визуального восприятия работы кнопки вполне хватит выделения цветом или тенюшкой на :active.
3 топика с этой страницы опубликованы на хабре владельцем этого же сайта. Это и называется регулярный кросспостинг. Дали о себе знать? Ваш сайт будут посещаться те, кому это интересно. Хотите публиковать на хабре? Не публикуйте у себя.
*посещать
Я все равно не понимаю этого. @webmasters_by — трудился и сделал перевод, подогнал его под формат хабра. Если бы не хабр, я бы сегодня не увидел этой статьи и кто знает как сложилось бы мое будущее :).
То что у него есть сайт и он туда кросспостит — мне абсолютно все равно. Я хожу на хабр, и вряд ли буду ходить к нему (не обижайтесь). У Хабра хороший проходной порог, где мусор отсеивается. Но «хотите публиковать на хабре — не публикуйте у себя» — сноббизм какой-то.
Не поймите неверно. Хабр — экслюзивный ресурс, и аналогов ему даже в англоговорящей сети днем с огнем не сыщешь. Имея такой уровень сложно потерять эксклюзивность, делая кросспосты. Это win-win отношения. Я заинтересовался этим конкретным топиком, автор получил немного трафика к себе. От этого я хабр не брошу, он хороший…
То что у него есть сайт и он туда кросспостит — мне абсолютно все равно. Я хожу на хабр, и вряд ли буду ходить к нему (не обижайтесь). У Хабра хороший проходной порог, где мусор отсеивается. Но «хотите публиковать на хабре — не публикуйте у себя» — сноббизм какой-то.
Не поймите неверно. Хабр — экслюзивный ресурс, и аналогов ему даже в англоговорящей сети днем с огнем не сыщешь. Имея такой уровень сложно потерять эксклюзивность, делая кросспосты. Это win-win отношения. Я заинтересовался этим конкретным топиком, автор получил немного трафика к себе. От этого я хабр не брошу, он хороший…
Автор статьи забыл, а вы проглядели, что есть ещё и -ms-linear-gradient и -ms-transition, вспомнили почему-то только про -ms-transform. Но в целом приятно, что это не очередная -webkit-only демка.
НЛО прилетело и опубликовало эту надпись здесь
Где хоститесь, что сайт хабраэффект держит?
Как чистая идея — очень круто. Как элемент UI — весьма сомнительно: уж больно анимационно для таких заурядных элементов как кнопки.
Предлагаю ввести тег «свистелки и перделки» для таких топиков.
У меня уже правило сформировалось, чем «выпендрежнее» кнопка — тем меньше полезного она делает.
У меня уже правило сформировалось, чем «выпендрежнее» кнопка — тем меньше полезного она делает.
А я целый 2010-2011 год отлаживал и шлифовал свой скрипт для анимации кнопок… )
Пока единственный недостаток — при нажатии они нажимаются слишком быстро.
Если бы можно было задавать время анимации нажатия, то тогда CSS, мб, победил бы в моём случае.
Пока единственный недостаток — при нажатии они нажимаются слишком быстро.
Если бы можно было задавать время анимации нажатия, то тогда CSS, мб, победил бы в моём случае.
Из примеров на вашем сайте только 3 и 4 не трогают шрифты вне кнопок. В остальных примерах текст
«Анимированные кнопки при помощи CSS3 Transitions и Animations» незначительно меняет свой вид во время анимации.
«Анимированные кнопки при помощи CSS3 Transitions и Animations» незначительно меняет свой вид во время анимации.
В хроме поводил мышью над кнопками из демок, анимация рывками, пока водишь мышью процессор до 40% нагружается
Немного по стилям:
Добавьте в стили вот такую штуку -webkit-font-smoothing: antialiased;. Это отключит субпиксельное сглаживание (на таких графических элементах это не ухудшит их внешний вид).
Сейчас под Safari с субпиксельным сглаживанием скачут буквы за счет того, что при анимации субпиксельное сглаживание отключается, включается обычное, а по завершении анимации субпиксельное включается обратно.
Добавьте в стили вот такую штуку -webkit-font-smoothing: antialiased;. Это отключит субпиксельное сглаживание (на таких графических элементах это не ухудшит их внешний вид).
Сейчас под Safari с субпиксельным сглаживанием скачут буквы за счет того, что при анимации субпиксельное сглаживание отключается, включается обычное, а по завершении анимации субпиксельное включается обратно.
sexy.
В опере 11.52 под убунтой не врщаются звездочки из примера 6 и не появляются стрелочки из примера 5
В опере 11.52 под убунтой не врщаются звездочки из примера 6 и не появляются стрелочки из примера 5
Нннет, спасибо, такую херню я готов читать на smashingmagazine и т.п. сайтах, но не на Хабре. Всегда засирал, засираю и буду засирать подобные левые переводы ни о чем.
Уважаемые разработчики Хабра! Сделайте, пожалуста, ОННН. А то тошнит уже от подобных топиков от одинаковых людей.
Уважаемые разработчики Хабра! Сделайте, пожалуста, ОННН. А то тошнит уже от подобных топиков от одинаковых людей.
Раздвигающиеся кнопки — очень креативно! Спасибо, отличная статья.
Core 2 Duo\8Гб\9600GT, в ФФ8 кнопки ТОРМОЗЯТ! Вывод кнопки будут радовать меньше 1-2% населения земли в течении года как минимум. Неутешительно, если учесть что в нашей стране софтовая грамотность юзверей оставляет жедать лучшего.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создаем анимированные кнопки при помощи CSS3