Комментарии 59
С ума сойти, с помошью ccs3 можно делать тени и градиенты. Почему вы раньше молчали?
Это сарказм?
Следующая статья цикла будет именно об этом.
а еще можно сделать iPhone на CSS3 ;) — habrahabr.ru/blogs/webdev/135349/
Да ладно вам, это хороший пример использования возможностей.
А вот мой вариант этих кнопок, выполненный в начале текущего месяца — http://dimox.name/examples/beautiful-3d-buttons-using-css3/, он ближе к PSD-исходнику, чем у tutsplus.
У таких кнопок есть баг. Они иногда дергаются, если их нажать и, не отпуская, поводить указателем вверх-вниз.
Подозреваю, что баг не у кнопок, а у браузера. Проверил в Опере, Хроме, Фаерфоксе — не дергаются. Правда ведут себя по-разному. В Фаерфоксе остаются нажатыми, когда уводишь курсор за границу, в Опере не поймешь (градиент не меняется, текст меняет положение), в Хроме состояние меняется полностью
Даже не у браузера, а у двух браузеров и одной операционной системы (Chrome и Safari на Mac OS X 10.6.8).
Вообще-то, на Chrome 16 в Windows XP SP3 тоже так. У Вас какая версия?
Чтобы в Опере при нажатии на кнопку текст не сдвигался, можно использовать вот такое решение (выявил методом тыка):
.submit:after {
content: '';
}
Мне кажется самый главный «баг» таких кнопок — фиксированная ширина.
у меня в опере дёргаются. надписи, а не сами кнопки
ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html
Svg фон ему. И опере заодно.
Svg фон ему. И опере заодно.
Надо будет попробовать. Спасибо за подсказку и за отзыв!
Спасибо за ссылку, так как действительно результат (в статье) совсем не тот что в исходнике.
Стоило бы добавить блокировку выделения текста. Хотя, конечно, это вопрос спорный. Я достаточно часто в таких (и не только) кнопках вместо нажатия — случайно выделяю текст. Полагаю, что я не 1 такой :)
Это конечно хорошо, что автор освоил часть HTML5 и CSS3, но почему бы ему еще не заглянуть в HTML4.01 и посмотреть, каким тегом делаются кнопки.
Хотя возможно, конечно, автор хотел сделать именно ссылку. Странно, правда, что в виде кнопки.
Еще. Уважаемые верстальщики! Если вы пишете (a href="#") или (a onclick=«return false») или (a href=«javascript:void(0)»), то вы неграмотные верстальщики.
Хотя возможно, конечно, автор хотел сделать именно ссылку. Странно, правда, что в виде кнопки.
Еще. Уважаемые верстальщики! Если вы пишете (a href="#") или (a onclick=«return false») или (a href=«javascript:void(0)»), то вы неграмотные верстальщики.
А каков способ по вашему годен?
Если в форме — это должна быть кнопка. Если это ссылка — то в идеале, если у пользователя отключены скрипты, должна вести на нужную страницу где эта функциональность доступна. А если скрипты работают — блокируем переход в обработчике события и производим нужные действия.
Input (type: button/submit), Button. Но тут есть подвох: некоторые браузеры, во-первых, добавляют неубиваемые рамки, во-вторых, все браузеры по-разному выравнивают кнопку с соседним текстом (при разных значениях vertical-align).
Поэтому, в силу кривизны рук и несогласованности производителей браузера и спецификации, допустимо делать кнопки с помощью тегов span или div. НО! В этом случае вы должны предотвращать выделение текста, например при клике или двойном клике (если использовать input/button, такой проблемы нет). Если вы думаете «ну кто же будет дважды кликать по кнопке» — поверьте, вы плохо знаете пользвоателей. Будут, еще как.
Если же вы ставите тег a, это знаичт, вы хотите сделать ссылку, и она должна куда-то вести, а не ссылаться на несуществующую (и не прописанную никакими стандартами) на страницу javascript:void.
Поэтому, в силу кривизны рук и несогласованности производителей браузера и спецификации, допустимо делать кнопки с помощью тегов span или div. НО! В этом случае вы должны предотвращать выделение текста, например при клике или двойном клике (если использовать input/button, такой проблемы нет). Если вы думаете «ну кто же будет дважды кликать по кнопке» — поверьте, вы плохо знаете пользвоателей. Будут, еще как.
Если же вы ставите тег a, это знаичт, вы хотите сделать ссылку, и она должна куда-то вести, а не ссылаться на несуществующую (и не прописанную никакими стандартами) на страницу javascript:void.
У button есть еще одна проблема, это vertical-align, который одну и ту же кнопку в разных браузерах выравнивает по-разному. У меня вообще такое ощущение, что в итоге получился неюзабельный тег.
Потому я сам предпочитаю input:submit, завернутый в спан с display:inline-block и кучей ins для декораций.
Потому я сам предпочитаю input:submit, завернутый в спан с display:inline-block и кучей ins для декораций.
<a href="#link" onclick="do(); onclick false;">link</a>
так?
так?
Блин, мне показалось что на CSS такую кнопочку сделать проще чем красиво в PhotoShop -_-. Дожил.
Может кто знает, но меня мучает вопрос. Почему у кнопок всегда курсор — обычная стрелка и все постоянно перебивают стилями курсор на палец?
Комментариев не много, но в избранное добавлено более 400! На порядок больше. Показатель!
У меня у одного в Chrome эти кнопки выглядяит не так как на PSD?
Chrome 17.0.963.38 beta
Chrome 17.0.963.38 beta
Делал что-то похожее тут sofcase.net/post/one-more-buttons-for-a-dark-background-on-css3/ и еще тут sofcase.net/post/buttons-for-white-background-with-css3/ :)
Кстати, среди этого делал еще и Google подобные кнопки sofcase.net/post/buttons-as-a-new-interface-from-googleplus-using-css3/ :)
в ff наблюдаю интересный эффект:
1. Нажимаю на кнопку, в нажатом состоянии увожу курсор
2. Переключаюсь на другую вкладку в браузере
3. Переключаюсь на вкладку обратно и нажимаю на ту же кнопку
в .ds-button не хватает стиля outline: none;
1. Нажимаю на кнопку, в нажатом состоянии увожу курсор
2. Переключаюсь на другую вкладку в браузере
3. Переключаюсь на вкладку обратно и нажимаю на ту же кнопку
в .ds-button не хватает стиля outline: none;
Тоже хотел перевести этот туториал, но как посмотрел демо в хроме — сразу передумал.
Надо еще сделать outline: none чтобы пунктирную обводку после клика убрать.
Обожаю CSS3, жаль что эти кнопки в виде PNG занимают меньше байт и времени, чем css код для их рисования.
Здается мне, что основная проблема этих кнопок — фиксированная ширина. Именно по этому на них можно долго смотреть, но использовать почему-то не хочется.
Я решал эту проблему с красотами, но решение свелось к кнопке в двух обертках: в первой была ее «трехмерная часть», во второй — «навершие». Я пытался использовать :before и :after, но не смог привязать ширину псевдоэлемента к ширине кнопки, не укладывая их в один контейнер. Может, мало пытался.
Я решал эту проблему с красотами, но решение свелось к кнопке в двух обертках: в первой была ее «трехмерная часть», во второй — «навершие». Я пытался использовать :before и :after, но не смог привязать ширину псевдоэлемента к ширине кнопки, не укладывая их в один контейнер. Может, мало пытался.
Может мне какой-нибудь гуру помочь с css кнопками? Я установил их на свою простенькую страничку, подредактировал цвета. Немного поигрался с тенями и элементами active, hover. Короче сейчас они работают не всегда — бывает нажимаешь на кнопку, а она кроме анимации нажатия/отжатия ничего не делает. a href не срабатывает :( После 3-4 клика опять начинает работать…
Кому не лень, помочь?
Кому не лень, помочь?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
3D кнопки с помощью CSS3