CSS3 градиент для границ блока

[CCgames]

вы в ие смотрели результат?

[CCgames]

разницы почти нет, да

[TNK]

Graceful degradation, да.

[gkir]

и даже не в середине блока, а вверху и с корявым бордюром

[CyberAP]

В 10-ом?

[wcoder]

В 9-ом

[WorldCount]

А input слабо из этой кнопки сделать?

[CyberAP]

Эта фишка работает с любым элементом. Можете input использовать, никто не запрещает.

[WorldCount]

Да, точно, извиняюсь, пашет))
Обычно, инпуты капризные)

[QuickStudio]

Эх… такие бы примеры для checkbox

[vitvad]

<зануда_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);

по коду: много раз упоминалось: Писать свойства без префиксов в конце.

[egorinsk]

Что предложите для адекватной поддержки данного кода на IE6+, FF2+ и прочей древней нечисти? А то так ваша статья, извините, на уровне школьного сочинения первоклассника. Такой код нельзя использовать в серьезном проекте с требовательным к эстетике заказчиком, к примеру, так как вам спросят, а почему у директора на компьютере кнопка квадратная получилась, что вы нам за ерунду сделали?

Ценность статьи, таким образом, отстутствует, так как на css3 такую примитивщину написать самому быстрее, чем прочесть статью.

[rework]

По поводу статьи согласен, никакой новой информации не даёт (лично для меня), но по поводу «IE6+, FF2+ и прочей древней нечисти» мы уже давно шлём таких заказчиков подальше и в договоре четко прописываем минимальные требования к браузерам.

[Softlink]

Что-то вы перемудрили с градиентами и прочими background-… Все можно сделать намного проще. Проблема с бордер-радиус отпадает, да и кода поменьше.

[rumkin]

Чем это ваш код проще? Тем что использует дополнительную сущность? Или тем, что он в два раза толще? Это что шутка такая?

[Softlink]

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

[rumkin]

И в правду, он работает лучше ))

[CyberAP]

Да, альтернативный вариант у вас хороший, спасибо.

[Softlink]

Поясню еще. Такой маневр использовался давно, только вместо ПЭ была доп. обертка с паддингами. Теперь можно использовать псевдоэлемент и избавиться от лишнего кода в html.

[rmaksim]

и еще не border-radius: inherit;
а на пару пикселей больше чем у блочка — ваще красота тогда

[amarox]

ох не скоро большинство пользователей для которых делаются сайты обновят свои браузеры))

[denis15]

Хорошо бы ещё hover-эффект сделать!

[coocheenin]

hover работает прекрасно.

[coocheenin]

box-shadow: приходится убирать из-за дури IE9, иначе:

[dasty]

У вас две ошибки.

Во первых в ссылке вместо положенного для демонстраций знака # почему-то находится линк на гугл. Я хочу иметь возможность нажать на демо-кнопку 10 раз.

Второе. Нет поддержки старых версий Chrome и Safari понимающих только -webkit-gradient()

Правильная кнопка
jsfiddle.net/duE9F/2/

[dapi]

sass и compass юзайте, там все это уже давно встроено и используется оной строчкой

[kizu]

Ха, сам думал у себя написать про этот метод, но поленился. Отлично, мне меньше работы :)

По поводу минусов:

1. Для очень маленьких бордер-радиусов (2-3 пикселя максимум) можно сделать и полупрозрачные градиентные бордеры, и полупрозрачный градиентный фон. Советую подумать над тем, как это сделать, не хочу сразу давать подсказку :)

2. Для больших бордер-радиусов есть один хак, которым можно добиться и больших скруглений при непрозрачном фоне. Один из вариантов можно посмотреть на этой картинке — там виден недостаток: края скруглённого бордера получаются чуть светлее, чем нужно. Другой метод, почти без недостатков, можно элементарно сделать с псевдоэлементом, но в этом случае для элемента нужно прописывать z-index, что не всегда может быть применимо.

Код обоих вариантов не буду приводить, оставлю на откуп экспериментам. Но если надо — могу и про них написать.

[CyberAP]

Хотел первый вариант сделать с border-image, но он, к сожалению, не поддерживает border-radius. А так было бы универсальное свойство.

[kizu]

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

[Terminal]

Я ещё, пожалуй, напишу, что свойства без префикса надо писать в конце после свойств с префиксом.

[KenAdams]

еще вариант градиента для границ, в ие8 градиенты есть, как у кнопки, так и у границы, конечно не такой эффект как в нормальных браузерах, но все же