首页 文章

CSS3渐变用于从Illustrator复制'inner glow'效果并应用border-radius

提问于
浏览 次
16

我正在努力绕过CSS3 Gradients（特别是径向的），并且这样做，我想我已经为自己设定了一个相对艰难的挑战 .

在Adobe Illustrator中，我创建了以下“按钮”样式 .

Button style screenshot

为了创建这个图像，我创建了一个背景颜色为 rgb(63,64,63) 或 #3F403F 的矩形，然后'stylized'它的边界半径为15px .

然后我使用了25％不透明度，8px模糊，从中心白色的“内部发光” . 最后，我在它上面应用了3pt白色笔画 . （如果上面的图片不够，我会告诉你所有这些，如果你想重现它的话 . ）

所以，我的问题是：

是否可以使用CSS重新创建'button'而无需图像？

我知道Internet Explorer的“局限性”（为了这个实验，我不能给猴子们） . 我也知道webkit中的小'bug'错误地呈现了一个带有背景颜色，边框半径和边框（与背景颜色颜色不同）的元素 - 它让背景颜色在弯曲处渗透角落 .

到目前为止，我最好的尝试是相当可悲的，但这里参考的是代码：

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))
    );
}

基本上，太可怕了 . 感激地接受任何提示或提示，并提前感谢他们！

css css3 gradients radial-gradients

4 回答

  • 0

    没有额外的标记：

    径向渐变非常难以控制，并且跨浏览器的工作方式与线性渐变相比更为不同 . 并且，与内部发光不同，它们实际上是圆形的，而不是与盒子的大多数矩形轮廓相匹配 .

    由于每个允许盒阴影的浏览器也允许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 */
    );
}
    回复于
  • 1

    好吧，我得说...你的问题对我很感兴趣，所以我去了 .

    我找到了一个解决方案，但它确实使用了嵌套的 <span> 标签，这个标签有点粗鲁，但实际上与您的图像完全相同 .

    这是HTML的样子：

    <a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</span></a>

    注意 <a> 内部的嵌套 <span> . 不间断的空间就是为了给你的箭头提供相同数量的空间 .

    这是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

    玩得开心！

    回复于
  • 38

    看起来你正在尝试生成一个渐变来复制它：

    “然后，我以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);
    回复于
  • 2

    您还可以在叠加的div上创建从白色到透明的径向渐变 . 我使用了这个非常棒的css3生成工具，它为您提供了跨浏览器兼容性所需的所有css3 .

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

    希望这有助于某人！

    回复于

相关问题