Я пытаюсь правильно поднять голову вокруг градиентов 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))
);
}
В принципе, ужасно. Любые подсказки или подсказки с благодарностью принимаются и очень заблаговременно за них!
Кажется, вы пытаетесь создать градиент, чтобы воспроизвести это:
"Затем я применил к нему" внутреннее свечение "с 25% непрозрачностью, 8px размытым, белым от центра".
Вы можете сделать именно это, используя тень вставки. Например:
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
Без дополнительной разметки:
Радиальные градиенты очень трудно контролировать и работают по-разному в разных браузерах, чем линейные градиенты. И, в отличие от внутреннего свечения, они будут фактически круговыми, а не соответствующими прямоугольным контурам вашего прямоугольника.
Так как каждый браузер, который позволяет box-shadows также позволяет rgba и несколько фонов, я бы использовал комбинацию из двух линейных градиентов, сложенных и использующих цвета rgba - по горизонтали и по вертикали. Что-то в этом направлении (заменяя мои цвета тем, что вам нужно):
section#featured footer p a {
background-color: #000;
background-image: -moz-linear-gradient(
left,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
), -moz-linear-gradient(
top,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
);
background-image: -webkit-gradient(
/* webkit syntax for the same horizontal gradient */
), -webkit-gradient(
/* webkit syntax for the same vertical gradient */
);
}
Вы также можете создать радиальный градиент, который переходит от белого к прозрачному на наложенном div. Я использовал этот потрясающий инструмент генерации css3, который дает вам все необходимые css3 для кросс-браузерной совместимости.
http://www.colorzilla.com/gradient-editor/
Надеюсь, это поможет кому-то!
Ну, я должен сказать... ваш вопрос меня очень заинтересовал, поэтому я пошел на него.
Я нашел решение, но он использует вложенный тег <span>, который немного нечеткий, но он практически идентичен вашему изображению.
Вот как выглядит HTML:
<a href="/" class="dark-button"><span>Carry on reading →</span></a>
Обратите внимание на вложенный <span> внутри <a>. Непрерывные пробелы находятся там, чтобы стрелка имела такое же количество комнаты, что и на вашем снимке.
И вот CSS:
a.dark-button {
font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
color: white;
text-decoration: none;
background-color: #555;
border: 3px solid white;
-moz-border-radius: 15px; padding: 5px 3px;
text-shadow: 1px 1px 2px #111;
}
a.dark-button span {
background-color: #666;
padding: 2px 12px;
-moz-border-radius: 15px;
-moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666;
}
В основном, чтобы получить эффект внутреннего свечения, я сделал внешнее свечение (в виде тени) из внутреннего элемента. Надеюсь, что это имеет смысл.
Чтобы увидеть его вживую: http://ianstormtaylor.com/experiments/css-buttons
Удачи!