CSS渐变导航设计

Question

我正在尝试创建一个与这个设计完全相同的导航栏

但无法识别

1. 右上角和右下角
2. 渐变色
3. 阴影

到目前为止，我所做的就是在以下代码片段中，请检查并指导我。

.container {
  width: 350px;
  border: 1px solid #CCCCCC;
 }
 .left-nav {
  list-style-type: none;
 }
 .left-nav li {
  width: 250px;
  height: 50px;
  margin: 0 0 10px;
 }
 .left-nav li a {
  background-color: #030406;
  line-height: 50px;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  display:  block;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  letter-spacing: 1px;
  -webkit-box-shadow: 0 7px 4px -4px #1c8eff;
       -moz-box-shadow: 0 7px 4px -4px #1c8eff;
      box-shadow: 0 7px 4px -4px #1c8eff;
 }
 .left-nav li a:hover {
  background-color: #000D51;
 }

<div class="container">
  <ul class="left-nav">
   <li><a href="">Home</a></li>
   <li><a href="">About Us</a></li>
   <li><a href="">Services</a></li>
   <li><a href="">FAQs</a></li>
   <li><a href="">Contact Us</a></li>
  </ul>
 </div>

- Kashif Latif

---

如果您使用Photoshop或其他工具设计并将其用作li元素的背景图像，那么这将更容易。我认为您不能仅使用CSS精确地设计出这个效果.. 如果您能做到，我会印象深刻的..^^ - jsadev.net

好吧，用 Photoshop 的那个太简单了 : )，我正在尝试只使用 CSS 来完成它。 - Kashif Latif

我会关注这个帖子的:D 我很好奇。 - jsadev.net

我目前无法访问imgur网站，因此无法查看图片和您想要实现的内容，但我相信这个链接可以帮助您：https://www.w3schools.com/css/css3_gradients.asp - kevin b.

所需的渐变效果与它们略有不同，似乎是两种渐变效果的组合。 - Kashif Latif

Answer 1

这一切都与内部渐变、阴影和边框的微小细节有关。

.container {
  width: 350px;
  border: 1px solid #CCCCCC;
  background: #0d0e0f;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e0f+0,272a2d+51,0d0e0f+100 */
  background: #0d0e0f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #0d0e0f 0%, #272a2d 51%, #0d0e0f 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #0d0e0f 0%, #272a2d 51%, #0d0e0f 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #0d0e0f 0%, #272a2d 51%, #0d0e0f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0e0f', endColorstr='#0d0e0f', GradientType=1);
  /* IE6-9 */
}

.left-nav {
  list-style-type: none;
}

.left-nav li {
  width: 250px;
  height: 50px;
  margin: 0 0 10px;
}

.left-nav li a::before {
  content: '';
  position: absolute;
  right: -1px;
  top: -5px;
  height: 0;
  width: 0;
  display: block;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0);
  border-top: 2px solid rgba(255, 255, 255, 0);
}

.left-nav li a::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -5px;
  height: 0;
  width: 0;
  display: block;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0);
}

.left-nav li a {
  position: relative;
  background-color: #030406;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#373f49+0,080b0f+50,222f3e+100 */
  background: #373f49;
  /* Old browsers */
  background: -moz-linear-gradient(left, #373f49 0%, #080b0f 50%, #222f3e 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #373f49 0%, #080b0f 50%, #222f3e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #373f49 0%, #080b0f 50%, #222f3e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373f49', endColorstr='#222f3e', GradientType=1);
  /* IE6-9 */
  line-height: 50px;
  color: #90a1b6;
  text-decoration: none;
  text-align: center;
  display: block;
  font-size: 14px;
  font-family: Helvetica, Arial, 'sans-serif';
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  letter-spacing: 1px;
  -webkit-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.left-nav li a:hover {
  color: #FFF;
  background-color: #000D51;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e87f3+0,051e68+27,000245+27,0269ca+100 */
  background: #1e87f3;
  /* Old browsers */
  background: -moz-linear-gradient(left, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e87f3', endColorstr='#0269ca', GradientType=1);
  /* IE6-9 */
}

.left-nav li a:hover::before {
  border-right: 2px solid rgba(26, 119, 207, 1);
  border-bottom: 2px solid rgba(26, 119, 207, 1);
  border-left: 2px solid rgba(26, 119, 207, 0);
  border-top: 2px solid rgba(26, 119, 207, 0);
}

.left-nav li a:hover::after {
  border-right: 2px solid rgba(26, 119, 207, 1);
  border-top: 2px solid rgba(26, 119, 207, 1);
  border-left: 2px solid rgba(26, 119, 207, 0);
  border-bottom: 2px solid rgba(26, 119, 207, 0);
}

<div class="container">
  <ul class="left-nav">
    <li><a href="">Home</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">FAQs</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
</div>

- Serg Chernata

---

非常接近，请注意右边框与左侧半径略有不同。 - Kashif Latif

只有一件事，黑色也有像蓝色一样的3种深浅程度。 - Kashif Latif

@KashifLatif 我认为你现在可以自己添加了。 ;) 从技术上讲，还有一个模式。 - Serg Chernata

你把我带到这里了 :) - Kashif Latif

@KashifLatif 我认为我的答案更接近你提供的图片，而不是你建议的修改。我认为它应该保持原样。 - Serg Chernata

Answer 2

我使用Serg Chernata的代码构建了这个。非常感谢Serg，我喜欢http://colorzilla.com/gradient-editor/ :D

@Kashif Latif：这应该更接近了... :)

.container {
  width: 350px;
  border: 1px solid #CCCCCC;
  background: #0d0e0f;
}

.left-nav {
  list-style-type: none;
}

.left-nav li {
  width: 250px;
  height: 50px;
  margin: 0 0 10px;
}

.left-nav li a::before{
  content: '';
  position: absolute;
  right: -1px;
  top: -5px;
  height: 0;
  width: 0;
  display:block;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0);
  border-top: 2px solid rgba(255,255,255,0);
}

.left-nav li a::after{
  content: '';
  position: absolute;
  right: -1px;
  bottom: -5px;
  height: 0;
  width: 0;
  display:block;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0);
  border-bottom: 2px solid rgba(255,255,255,0);
}

.left-nav li a {
  position: relative;
  background-color: #030406;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e87f3+0,2b2b2b+0,282828+27,141414+27,3d3d3d+100 */
  background: #595959; /* Old browsers */
  background: -moz-linear-gradient(left,  #595959 0%, #282828 27%, #141414 27%, #3d3d3d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #595959 0%, #282828 27%,#141414 27%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #595959 0%, #282828 27%,#141414 27%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e87f3', endColorstr='#3d3d3d',GradientType=1 ); /* IE6-9 */

  line-height: 50px;
  color: #90a1b6;
  text-decoration: none;
  text-align: center;
  display: block;
  font-family: Helvetica, Arial, 'sans-serif';
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  letter-spacing: 1px;
  -webkit-box-shadow: 0 1px 0px 0 rgba(0,0,0,1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 0px 0 rgba(0,0,0,1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0px 0 rgba(0,0,0,1), 0 6px 4px -4px #1c8eff, inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.left-nav li a:hover {
  color: #FFF;
  background-color: #000D51;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e87f3+0,051e68+27,000245+27,0269ca+100 */
  background: #1e87f3;
  /* Old browsers */
  background: -moz-linear-gradient(left, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #1e87f3 0%, #051e68 27%, #000245 27%, #0269ca 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e87f3', endColorstr='#0269ca', GradientType=1);
  /* IE6-9 */
}

.left-nav li a:hover::before{
  border-right: 2px solid rgba(26,119,207,1);
  border-bottom: 2px solid rgba(26,119,207,1);
  border-left: 2px solid rgba(26,119,207,0);
  border-top: 2px solid rgba(26,119,207,0);
}

.left-nav li a:hover::after{
  border-right: 2px solid rgba(26,119,207,1);
  border-top: 2px solid rgba(26,119,207,1);
  border-left: 2px solid rgba(26,119,207,0);
  border-bottom: 2px solid rgba(26,119,207,0);
}

<div class="container">
  <ul class="left-nav">
    <li><a href="">Home</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">FAQs</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
</div>

- jsadev.net

---

95%完美，我正在更新它 :) - Kashif Latif

Answer 3

我已经使用了CSS线性渐变效果。看看：W3Schools链接 这是到目前为止我做的东西的链接： https://jsfiddle.net/ev1gjqL1/

background-image:
linear-gradient(
  to right, 
  #197be2,
  #091458,
  #091458,
  #197be2
);

- Jake S

---

不错的努力，但需要更多才能保持接近。 - Kashif Latif