Comments 32
вы в ие смотрели результат?
А input слабо из этой кнопки сделать?
Да, точно, извиняюсь, пашет))
Обычно, инпуты капризные)
Обычно, инпуты капризные)
Эх… такие бы примеры для checkbox
<зануда_mod>
Как сделать пост в блог CSS:
1) погуглить linear gradient/box-shadow/text-shadow/border-radius
2) выбрать любой из онлайн генераторов, подобрать цвета
3) запостить код на хабр в виде «статьи»?!
4)…
5) Profit
Минусы/Плюсы:
— graceful degradation
— ура CSS5, HTML6, *CoolTechnologyName105*
</зануда_mod>
по коду: много раз упоминалось: Писать свойства без префиксов в конце.
Как сделать пост в блог CSS:
1) погуглить linear gradient/box-shadow/text-shadow/border-radius
2) выбрать любой из онлайн генераторов, подобрать цвета
3) запостить код на хабр в виде «статьи»?!
4)…
5) Profit
Минусы/Плюсы:
— graceful degradation
— ура CSS5, HTML6, *CoolTechnologyName105*
</зануда_mod>
background-image: linear-gradient(#f2f2f2, #e4e4e4 50%), linear-gradient(#e4e4e4, #ccc);
background-image: -o-linear-gradient(#f2f2f2, #e4e4e4 50%), -o-linear-gradient(#e4e4e4, #ccc);
background-image: -ms-linear-gradient(#f2f2f2, #e4e4e4 50%), -ms-linear-gradient(#e4e4e4, #ccc);
background-image: -moz-linear-gradient(#f2f2f2, #e4e4e4 50%), -moz-linear-gradient(#e4e4e4, #ccc);
background-image: -webkit-linear-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
по коду: много раз упоминалось: Писать свойства без префиксов в конце.
Что предложите для адекватной поддержки данного кода на IE6+, FF2+ и прочей древней нечисти? А то так ваша статья, извините, на уровне школьного сочинения первоклассника. Такой код нельзя использовать в серьезном проекте с требовательным к эстетике заказчиком, к примеру, так как вам спросят, а почему у директора на компьютере кнопка квадратная получилась, что вы нам за ерунду сделали?
Ценность статьи, таким образом, отстутствует, так как на css3 такую примитивщину написать самому быстрее, чем прочесть статью.
Ценность статьи, таким образом, отстутствует, так как на css3 такую примитивщину написать самому быстрее, чем прочесть статью.
Что-то вы перемудрили с градиентами и прочими background-… Все можно сделать намного проще. Проблема с бордер-радиус отпадает, да и кода поменьше.
Чем это ваш код проще? Тем что использует дополнительную сущность? Или тем, что он в два раза толще? Это что шутка такая?
Да, с «поменьше» я погорячился, конечно, но он хотя бы работает исправно и не дает таких результатов .
Да, альтернативный вариант у вас хороший, спасибо.
Поясню еще. Такой маневр использовался давно, только вместо ПЭ была доп. обертка с паддингами. Теперь можно использовать псевдоэлемент и избавиться от лишнего кода в html.
и еще не border-radius: inherit;
а на пару пикселей больше чем у блочка — ваще красота тогда
а на пару пикселей больше чем у блочка — ваще красота тогда
ох не скоро большинство пользователей для которых делаются сайты обновят свои браузеры))
UFO just landed and posted this here
box-shadow: приходится убирать из-за дури IE9, иначе:
У вас две ошибки.
Во первых в ссылке вместо положенного для демонстраций знака # почему-то находится линк на гугл. Я хочу иметь возможность нажать на демо-кнопку 10 раз.
Второе. Нет поддержки старых версий Chrome и Safari понимающих только -webkit-gradient()
Правильная кнопка
jsfiddle.net/duE9F/2/
Во первых в ссылке вместо положенного для демонстраций знака # почему-то находится линк на гугл. Я хочу иметь возможность нажать на демо-кнопку 10 раз.
Второе. Нет поддержки старых версий Chrome и Safari понимающих только -webkit-gradient()
Правильная кнопка
jsfiddle.net/duE9F/2/
sass и compass юзайте, там все это уже давно встроено и используется оной строчкой
Ха, сам думал у себя написать про этот метод, но поленился. Отлично, мне меньше работы :)
По поводу минусов:
1. Для очень маленьких бордер-радиусов (2-3 пикселя максимум) можно сделать и полупрозрачные градиентные бордеры, и полупрозрачный градиентный фон. Советую подумать над тем, как это сделать, не хочу сразу давать подсказку :)
2. Для больших бордер-радиусов есть один хак, которым можно добиться и больших скруглений при непрозрачном фоне. Один из вариантов можно посмотреть на этой картинке — там виден недостаток: края скруглённого бордера получаются чуть светлее, чем нужно. Другой метод, почти без недостатков, можно элементарно сделать с псевдоэлементом, но в этом случае для элемента нужно прописывать z-index, что не всегда может быть применимо.
Код обоих вариантов не буду приводить, оставлю на откуп экспериментам. Но если надо — могу и про них написать.
По поводу минусов:
1. Для очень маленьких бордер-радиусов (2-3 пикселя максимум) можно сделать и полупрозрачные градиентные бордеры, и полупрозрачный градиентный фон. Советую подумать над тем, как это сделать, не хочу сразу давать подсказку :)
2. Для больших бордер-радиусов есть один хак, которым можно добиться и больших скруглений при непрозрачном фоне. Один из вариантов можно посмотреть на этой картинке — там виден недостаток: края скруглённого бордера получаются чуть светлее, чем нужно. Другой метод, почти без недостатков, можно элементарно сделать с псевдоэлементом, но в этом случае для элемента нужно прописывать z-index, что не всегда может быть применимо.
Код обоих вариантов не буду приводить, оставлю на откуп экспериментам. Но если надо — могу и про них написать.
Я ещё, пожалуй, напишу, что свойства без префикса надо писать в конце после свойств с префиксом.
еще вариант градиента для границ, в ие8 градиенты есть, как у кнопки, так и у границы, конечно не такой эффект как в нормальных браузерах, но все же
Sign up to leave a comment.
CSS3 градиент для границ блока