Я пытаюсь правильно поднять голову вокруг градиентов CSS3 (в частности, радиальных), и, делая это, я считаю, что я поставил перед собой довольно сложную задачу.
В Adobe Illustrator я создал следующий стиль 'button'.
Чтобы создать это изображение, я создал прямоугольник с цветом фона rgb(63,64,63) или #3F403F, затем "стилизовал" его, чтобы иметь радиус границы 15px.
Затем я применил к нему "внутреннее свечение" с непрозрачностью 25%, размытием 8 пикселей, белым от центра. Наконец, я применил к нему 3-кратный белый штрих. (Я рассказываю вам все это, если вы хотите воспроизвести его, если изображение выше недостаточно.)
Итак, мой вопрос таков:
Можно ли воссоздать этот 'button' с помощью CSS без необходимости в изображении?
Я знаю об "ограничениях" Internet Explorer (и ради этого эксперимента я не мог дать обезьян). Я также знаю небольшую ошибку в webkit, которая неправильно отображает элемент с цветом фона, радиусом границы и границей (с другим цветом на фоновом) - он позволяет цвету фона просачиваться через изогнутый углы.
Моя лучшая попытка до сих пор довольно жалкая, но для справки вот код:
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid rgb(255,255,255);
background: rgb(98,99,100);
background: -moz-radial-gradient(
50% 50%,
farthest-side,
#626364,
#545454
);
background: -webkit-gradient(
radial,
50% 50%,
1px,
50% 50%,
5px,
from(rgb(98,99,100)),
to(rgb(84,84,84))
);
}
В принципе, ужасно. Любые подсказки или подсказки с благодарностью принимаются и очень заблаговременно за них!
