Комментарии 117
Понимаю что пост не о дизайне, но кнопки в 3-м и 4-м примере очень понравились
Если отпустить мышь за пределами кнопок, то осуществляется неверное поднятие, в результате которого оно не происходит.
Очень круто, спасибо большое! Открыл третий пример, жмякал по кнопочке и наслаждался.
Сколько уже подобных однообразных постов было, и сколько ещё будет… Ни конца, ни края нет людской радости от изучения CSS3…
Посмотрел в IE 9-ом, поржал :)
а мне грустно.
Смешно вот это:
«HTML5 является ядром Internet Explorer 9, а благодаря широкой поддержке таких веб-стандартов, как HTML5, CSS3, Canvas, SVG и многих других вам доступно больше инструментов для создания более прекрасного Интернета.»
msdn.microsoft.com/ru-ru/ie/aa740469
«HTML5 является ядром Internet Explorer 9, а благодаря широкой поддержке таких веб-стандартов, как HTML5, CSS3, Canvas, SVG и многих других вам доступно больше инструментов для создания более прекрасного Интернета.»
msdn.microsoft.com/ru-ru/ie/aa740469
А над чем ржать? Там вроде всё кроме градиентов (которые для каждого браузера свои прописываются, а для webkit'а еще и в двух экземплярах, автор спокойно мог добавить градиенты через filter).
Добивает, что для каждого свойства городят свои префиксы, ну сделайте что-то типа -beta-linear-gradient, -draft-linear-gradient, это же не они придумали это свойство, оно есть в черновике стандарта…
Кстати Opera 11.6 почему кружок со стрелкой прибила к верхнему краю.
Добивает, что для каждого свойства городят свои префиксы, ну сделайте что-то типа -beta-linear-gradient, -draft-linear-gradient, это же не они придумали это свойство, оно есть в черновике стандарта…
Кстати Opera 11.6 почему кружок со стрелкой прибила к верхнему краю.
Это очень логично, т.к. на стадии тестирование у каждого свои косяки. И если, например, хром нормально будет поддерживать super-property а опера его будет поддерживать частично (глючить), то мы не сможем включить его для хрома так, чтобы в опере было нормально.
Имхо, от этого был бы толк, если бы новые версии браузеров не появлялись с такой частотой. А так на деле получается так пробуем свойство во всех браузерах основных, если более менее одинаково работает, то юзаем, если нет, просто откладываем на потом (я не говорю о тестовых сайтах, задача которых показать, как работает эта фича).
Косяки есть и сейчас причем на вещах которые якобы уже стандартны. Например, в Opera не пашет text-overflow: ellipsis для ячеек таблицы, в хроме тоже косяки с таблицами были, пришлось для хрома даже хак писать. Лучше бы сделали условные операторы как в IE, чтобы можно было без ручного определения браузера, и даже без JS, юзать разный код для разных браузеров.
Косяки есть и сейчас причем на вещах которые якобы уже стандартны. Например, в Opera не пашет text-overflow: ellipsis для ячеек таблицы, в хроме тоже косяки с таблицами были, пришлось для хрома даже хак писать. Лучше бы сделали условные операторы как в IE, чтобы можно было без ручного определения браузера, и даже без JS, юзать разный код для разных браузеров.
Фильтры в ИЕ ведут к прекращению работы border-radius у элемента. Так что тут надо выбирать: либо круглое, либо градиентное.
CSS Gradients for IE9 — и кругло и с градиентом.
А вообще есть полноценный сервис по создаю кроссбраузерных градиентов: Ultimate CSS Gradient Generator
А вообще есть полноценный сервис по создаю кроссбраузерных градиентов: Ultimate CSS Gradient Generator
OMG, есть же Compass.
И да, оно работает с IE.
НЛО прилетело и опубликовало эту надпись здесь
>Посмотрел в IE 9-ом, поржал :)
залейте скриншот если не трудно, девятый ослик не у всех под рукой есть
залейте скриншот если не трудно, девятый ослик не у всех под рукой есть
Это 4-ый пример: habrastorage.org/storage2/a10/339/88f/a1033988f46656651dec9ae24e04cd82.png
Картинку нормально запилить не могу, карма.
Все 5-ть примеров выглядят одинаково :)
В «Представлении совместимости» так же ничего не меняется.
Картинку нормально запилить не могу, карма.
Все 5-ть примеров выглядят одинаково :)
В «Представлении совместимости» так же ничего не меняется.
Надо сбацать музыкальный сайт с интерфейсом в виде стааааарой кассетной деки, где кнопки залипали, и использовать там данный пример.
Вот здесь есть неплохой пример: habrahabr.ru/blogs/css/105267/
Шикаррно :) Особенно понравился пример 4 с демо-сайта, кликал минут 5.
Прекрасно! Как бы не стало мэйнстримом…
А то все хорошие штуки начинают доставать, когда они на всех абсолютно сайтах/блогах/и.т.п.
А то все хорошие штуки начинают доставать, когда они на всех абсолютно сайтах/блогах/и.т.п.
Охренительно! В 3 примере косячок с тенью от ненажимающегося элемента, да и вообще с тенями борщит порой автор, а в целом просто невообразимо красиво! Скорее бы вот так просто можно было все это использовать, без мозголомни с тем же IE.
и на семантику плевать, конечно! главное, что можно кликать левой кнопкой!
С семантикой всё в порядке. Такой приём довольно просто использовать для любого тега.
довольно просто использовать для любого тега, поэтому пример кнопки мы сделаем именно на ссылке, так держать
Умейте видеть суть вещей.
НЛО прилетело и опубликовало эту надпись здесь
Автор не заставляет делать кнопки из ссылок, не говорит, что это правильно. Он выложил идею.
Если капать глубже и перейти на иной уровень абстракции, можно понять, что всё очень даже семантично.
Судите сами: суть статьи — показать, что кнопки можно делать с помощью псевдоэлементов и одного тега. Один тег есть? Есть! Псевдоэлементы есть? Есть! Всё. Больше от этой статьи не требуется ничего.
Если капать глубже и перейти на иной уровень абстракции, можно понять, что всё очень даже семантично.
Судите сами: суть статьи — показать, что кнопки можно делать с помощью псевдоэлементов и одного тега. Один тег есть? Есть! Псевдоэлементы есть? Есть! Всё. Больше от этой статьи не требуется ничего.
от этой статьи требуется больше. Требуется, чтобы сотни новичков-верстальщиков могли копировать из неё решение, которое не только работает, но ещё и правильное. А сейчас эти сотни новичков скопируют из неё не только «один тег с псевдоэлементами», но и использование ссылок в качестве кнопок. Я-то суть вещей увижу, а они — нет
Не лезьте в чужую голову.
Никто не помрёт, если сделает кнопку из ссылки. Если человеку интересно верстать он очень скоро научится делать это правильно вне зависимости от этой статьи. Согласитесь, она всё же не о семантике, а о методе. Хотя наверное скорее даже просто о дизайне.
Никто не помрёт, если сделает кнопку из ссылки. Если человеку интересно верстать он очень скоро научится делать это правильно вне зависимости от этой статьи. Согласитесь, она всё же не о семантике, а о методе. Хотя наверное скорее даже просто о дизайне.
Если уж так печётесь о новичках — накатайте годную статью о семантике. Для новичков это будет полезнее ваших комментариев.
статей по семантике уже много, именно поэтому обидно видеть статьи по другим темам, где семантика игнорируется напрочь. А с подходом «никто не помрёт» российская милиция работает, только вот почему-то на него все жалуются
Знаете, американская гуглопочта как-то живёт с не семантичными кнопками. И мы все как-то работаем с ней.
А про милицию — это вас занесло. Не при чём она тут.
А про милицию — это вас занесло. Не при чём она тут.
у гугла для семантики куча других атрибутов в кнопки напихана, хотя и фейлов у них достаточно. Можно сделать лучше.
а занесло скорее вас со смертями. Да, веб-разработка обычно не имеет дела с жизнью и смертью, но это не повод учить новичков делать фигню
а занесло скорее вас со смертями. Да, веб-разработка обычно не имеет дела с жизнью и смертью, но это не повод учить новичков делать фигню
>у гугла для семантики куча других атрибутов в кнопки напихана
Каких? Кнопка — это или button или input. Всё остальное — не семантично.
Быть может и «новички», обчитавшись кучи статей о семантике, тоже напихают кучу других атрибутов?
Каких? Кнопка — это или button или input. Всё остальное — не семантично.
Быть может и «новички», обчитавшись кучи статей о семантике, тоже напихают кучу других атрибутов?
ясно, про wai-aria вы не слышали
новички не обчитаются, большинство новичков делает минимально необходимый с их точки зрения объём работы
новички не обчитаются, большинство новичков делает минимально необходимый с их точки зрения объём работы
НЛО прилетело и опубликовало эту надпись здесь
А если статей дофига, зачем переживать. Интересующийся человек обязательно прочтёт их.
А еще кнопку третьего типа можно использовать для счетчика каких-нибудь «лайков». Цифра удачно стоит)
Ненавижу отсутствие :active у кнопок на многих сайтах.
Разве так трудно сделать эффект нажатия? Ведь так и хочется чтобы кнопка проваливалась, или меняла цвет…
Разве так трудно сделать эффект нажатия? Ведь так и хочется чтобы кнопка проваливалась, или меняла цвет…
У вас там яндекс.метрика стоит, покажите карту кликов для 3его примера. Уж очень интересно…
На пятой кнопке думаю не хватает при нажатии смещать текст вниз вместе с кнопкой, иначе теряется сам эффект «реалистичности» как на остальных 4-х кнопках.
Пример 3
Мне немного показалось не совсем логичным, то при нажатии на циферку, нажимается кнопка рядом, а циферка остается. ИМХО, не должно ничего происходить, только когда саму кнопочку нажмешь, тогда надо «нажиматься».
Мне немного показалось не совсем логичным, то при нажатии на циферку, нажимается кнопка рядом, а циферка остается. ИМХО, не должно ничего происходить, только когда саму кнопочку нажмешь, тогда надо «нажиматься».
НЛО прилетело и опубликовало эту надпись здесь
а у меня в опере почему-то не всё ок с 4 примером :( стрелочки улетели вверх( ver. 11.60
У вас примере кода для первой кнопки пропущена тень:
.a_demo_one {
...
box-shadow: 0 1px 0 #7FD2F1 inset, 0 1px 0 #FFFFFF;
}
Все красиво, спасибо за примеры.
Вот только если захочется прикрутить анимацию на CSS3 то придется отказываться от псевдоэлементов :(…
Вот только если захочется прикрутить анимацию на CSS3 то придется отказываться от псевдоэлементов :(…
Красиво. странно что даже ФФ3.6 косится на некоторые кнопки.
Пример №2 — больше напоминает «рычаг», а не кнопку… а 3 и 4 — волшебны!
Красивые кнопки, но прежде чем постить очередной пост о кнопках на CSS3, удивите народ, сделайте их хоть по всем правилам — clip2net.com/s/1tHso (ie7) обязательно учтите fallback для старых браузеров, понятно что там кнопки будут просто синими прямоугольниками, но кликаться вне области кнопки точно не должны.
ИМХО — старые браузеры должны умереть!
Пусть там будет не красиво, но основые действия должны работать, IE7 еще 3%.
Оппа! Пошёл на сайт демо кнопки опнаживать и облом.
Виртуальный сервер salavat.me не существует или отключен.
Виртуальный сервер salavat.me не существует или отключен.
опнаживать=понажимать
Идите на оригинальный: tympanus.net/Tutorials/CSSButtonsPseudoElements/index2.html
Добавил в пост работающие ссылки.
Ну все, положили сайт :)
У меня (Linux, FF9):
— нет стрелки на 4й кнопке — на jsfiddle-то картинки нет. Решается использованием '→' в content, но стрелка при этом получается не по центру кружочка. Варьирование padding-top приводит к искажению кружка в эллипс;
— на 3й кнопке элемент :before выше, чем 'click me'. Варьирование font-size желаемого эффекта не дало.
— нет стрелки на 4й кнопке — на jsfiddle-то картинки нет. Решается использованием '→' в content, но стрелка при этом получается не по центру кружочка. Варьирование padding-top приводит к искажению кружка в эллипс;
— на 3й кнопке элемент :before выше, чем 'click me'. Варьирование font-size желаемого эффекта не дало.
Кнопки на столько приятны, что при нажатии вызывают улыбку.
Хочу сказать спасибо всем, кто повышал рейтинг статьи, оставлял комментарии, плюсовал карму, мне это безумно приятно, так как я здесь совсем не давно, и, честно говоря, не ожидал такого хорошего отношения со стороны Хабражителей :)
Благодаря вам я получил годовую подписку на Букмейт, хотя сегодня сам хотел оплатить подписку на месяц :)
Постараюсь в дальнейшем радовать вас новыми переводами хороших статей :)
Благодаря вам я получил годовую подписку на Букмейт, хотя сегодня сам хотел оплатить подписку на месяц :)
Постараюсь в дальнейшем радовать вас новыми переводами хороших статей :)
сейчас разбираюсь с подобными тенями, поэтому вопрос: есть ли способ, чтобы это открылось на эксплорере ниже 9?
не подскажите?
не подскажите?
Подскажите, а можно ли сделать (например во втором примере) так, чтобы в меню:
Home
Prices
Feedback
Ссылка active отображалась зажатой кнопкой. Т.е. на активной страничке кнопка зажата, а на остальных — выпуклая. При переходе на другую, другая становилась зажатой…
У меня не выходит :(
Home
Prices
Feedback
Ссылка active отображалась зажатой кнопкой. Т.е. на активной страничке кнопка зажата, а на остальных — выпуклая. При переходе на другую, другая становилась зажатой…
У меня не выходит :(
Не знаю почему, но мои кнопки не всегда срабатывают. Бывает что нажимаешь по кнопке — анимация отображается, но на другую страничку не переходит. Opera + IE. Перемудрил наверное с подпиливанием под себя :(
Стал разбираться, чтобы сделать себе подобные кнопки, и обнаружил серьезный баг.
Дополнительные элементы кнопок засунуты под основной блок при помощи «z-index: -1» — но это прячет их под фон контейнера, делая невидимыми.
В демке они видны только благодаря тому, что фон обрамляющего контейнера полупрозрачный. Но и то, он искажает цвета.
Выходит, что этим кнопкам обязательно нужна дополнительная обертка со значением z-index > 0
Дополнительные элементы кнопок засунуты под основной блок при помощи «z-index: -1» — но это прячет их под фон контейнера, делая невидимыми.
В демке они видны только благодаря тому, что фон обрамляющего контейнера полупрозрачный. Но и то, он искажает цвета.
Выходит, что этим кнопкам обязательно нужна дополнительная обертка со значением z-index > 0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS кнопки с помощью псевдо-элементов