Форум Сайтостроение Веб-строительство

Как реализовать полоску под кнопкой/ссылкой/блоком и т.д.

Р
На сайте с 07.02.2013
Offline
178
рецидивист
481

Приветствую.

Есть кнопка с рамкой и заливкой. Не могу реализовать под рамкой светлую полосу, как на этом скриншоте:

Можно это реализовать средствами CSS?

И какие варианты есть вообще?

Vladist
На сайте с 18.06.2011
Offline
100
Vladist
#1

Картинку не видно...

Р
На сайте с 07.02.2013
Offline
178
рецидивист
#2
Vladist:
Картинку не видно...

Да, странно...спасибо.

Вот ссылка на картинку http://yadi.sk/d/H1Y0EBAYD2LHo

masterfunk
На сайте с 05.11.2007
Offline
104
masterfunk
#3

добавьте тенью, типа:

box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;

Р
На сайте с 07.02.2013
Offline
178
рецидивист
#4
masterfunk:
добавьте тенью, типа:

box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;

Спасибо, но меня больше интересует, как реализовать так, чтобы кнопка была кроссбраузерной.

kdv12
На сайте с 05.12.2011
Offline
52
kdv12
#5
рецидивист:
Спасибо, но меня больше интересует, как реализовать так, чтобы кнопка была кроссбраузерной.

Оберните кнопку в дополнительный div/span и сделайте ему нижнюю границу только.

Разработка сайтов любой сложности на 1С-Битрикс. Бесплатные консультации.
TaediumVitae
На сайте с 22.09.2011
Offline
41
TaediumVitae
#6
рецидивист:
Спасибо, но меня больше интересует, как реализовать так, чтобы кнопка была кроссбраузерной.


-webkit-box-shadow
-moz-box-shadow
box-shadow
filter: progid:DXImageTransform.Microsoft.shadow

Это кроссбраузерно. Если надо поддерживать умершие браузеры - лучше картинкой.

Walik
На сайте с 08.01.2008
Offline
75
Walik
#7
рецидивист:
Спасибо, но меня больше интересует, как реализовать так, чтобы кнопка была кроссбраузерной.

Предложенный вариант идеально кроссбраузерный. Сейчас уже даже свойства -moz и -webkit перестают использовать. Время идет. Тем более, я бы не переживал, что пользователь древнего браузера не увидит тень. У него и без этого проблем хватает :)

Яндекс.Браузер - миллион загрузок Opera Software переходит на Блог по разработке интерфейсов
TaediumVitae
На сайте с 22.09.2011
Offline
41
TaediumVitae
#8

Walik, ну дык если использовать вендорные префиксы нормальным браузерам хуже точно не станет, а в некоторых старых тенька появится, все-таки.

Но да, пора подвязывать с "вплоть до IE7-".

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий