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

Question

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

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

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

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

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

Возможно ли воссоздать эту «кнопку» с помощью CSS без необходимости изображения?

Мне известны «ограничения» Internet Explorer (и ради этого эксперимента я не мог дать обезьян). Мне также известна небольшая «ошибка» в веб-наборе, которая неправильно отображает элемент с цветом фона, границей радиуса и границей (с цветом, отличным от цвета фона) - он позволяет фоновому цвету вытекать на изогнутом углы.

Моя лучшая попытка на данный момент довольно жалкая, но для справки вот код:

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, белым от центра».

Вы можете сделать это, используя вставку box-shadow. Например:

-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

Без дополнительной разметки:

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

Так как каждый браузер, который допускает тени от ящиков, также поддерживает 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 3

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

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

Надеюсь, это кому-нибудь поможет!

Answer 4

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

Я нашел решение, но оно использует вложенный тег <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

Веселись!