CSS3 Градиенты для воспроизведения эффекта «внутреннего свечения» от Illustrator с приложенным граничным радиусом

Question

Я пытаюсь правильно поднять голову вокруг градиентов CSS3 (в частности радиальных), и при этом я думаю, что я установил я - довольно сложная задача.

В Adobe Illustrator я создал следующий стиль «кнопки».

Для создания этого образа, который я создал прямоугольник с цветом фона rgb(63,64,63) или #3F403F, затем «стилизованный» это, чтобы иметь радиус 15px границы.

Затем я применил к нему «внутреннее свечение» с непрозрачностью 25%, размытием 8 пикселей, белым от центра. Наконец, я применил к нему 3-кратный белый штрих. (Я говорю вам все это в случае, если вы хотели бы воспроизвести его, если указанное изображение не является достаточным.)

Итак, мой вопрос таким образом:

Можно ли воссоздать этот " кнопку ', используя 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)) 
    ); 
} 

В принципе, ужасно. Любые подсказки или подсказки с благодарностью приняты и благодарим вас за это заранее!

Answer 1

Похоже, вы пытаетесь произвести градиент тиражировать это:

«Я тогда применил«внутреннее свечение 'к нему с 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); 

Answer 2

Ну, я должен сказать ... ваш вопрос меня очень заинтересовал, поэтому я пошел на него.

Я нашел решение, но он использует вложенный тег <span>, который является немного грубым, но практически идентичен вашему изображению.

Вот что HTML выглядит следующим образом:

<a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</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

Удачи!

Answer 3

С без дополнительной наценки:

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

Поскольку каждый браузер, который позволяет использовать тени в коробке, также позволяет использовать 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's syntax for the same horizontal gradient */ 
    ), -webkit-gradient(
    /* webkit's syntax for the same vertical gradient */ 
    ); 
} 

Answer 4

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

http://www.colorzilla.com/gradient-editor/

Надеется, что это помогает кто-то!