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

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

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

Button style screenshot

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

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

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

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

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

16
css css3 gradients radial-gradients

4 ответов

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

"затем я применил к нему" внутреннее свечение " с 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);
38

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

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

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

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

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

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

1

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

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

удачи!

0