在导航栏品牌附近添加灯光效果到背景

Question

我试图将类似下面链接的灯光效果应用到我正在制作的网站上。我不确定从哪里开始，我无法在线或在堆栈溢出时找到任何类似的问题。有什么指针吗？

Answer 1

将CSS3渐变用于ul和li标记

＆＃13;

＆＃13;

#my-nav {
  
background: rgb(254,204,177); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 34%, rgba(234,85,7,1) 61%, rgba(251,149,94,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 34%,rgba(234,85,7,1) 61%,rgba(251,149,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 34%,rgba(234,85,7,1) 61%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
border-radius: 7px;
}
#my-nav a {
  color: #FFF;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav" id="my-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">BLOG</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SOLUTIONS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">BOOKS</a>
      </li>
    </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

就像kiranvj说的那样。 使用CSS3 Gradients，您可以generate your Gradient on this Site

他们甚至得到了类似的Preset，我认为它叫做“Orange Gloss”。

当您对渐变感到满意时（右上角有预览） 只需复制代码并在样式表中使用它。

但要注意兼容性！