CSS：旋转阴影在框的右侧 [英] CSS: Rotated drop shadow on right side of box

问题描述

我有一个固定的，100％高度的菜单在左边，我需要创建一个阴影效果，它的右边会消失后，同时。

如何创建此效果？

这里是一个小提琴： http://jsfiddle.net/52VtD/7787/

HTML：

 < nav id =main-menu> 
< h1> Hello< / h1> 
< a href =＃> A< / a> 
< a href =＃> B< / a> 
< a href =＃> C< / a> 
< a href =＃> D< / a> 
< / nav> 
  

CSS：

 code>＃main-menu {
 width：320px; 
 height：100％; 
 top：0; 
 z-index：1000; 
 position：fixed; 
 background-color：＃b4bac1; 
} 
  

解决方案

： box-shadow 和转换。

下面的 box-shadow 示例应用于 .menuContainer 的伪元素> .menu 元素，并使用CSS3s rotate（）旋转 1° 。

  html，body {/ *这里只允许菜单拉伸到100％* / height：100％ margin：0;}。menucontainer {position：relative;高度：100％; width：100px;}。menuContainer :: after {content：; position：absolute; z-index：1; top：-10px; bottom：0; left：-7px; background：rgba（0,0,0,0.3）; box-shadow：10px 0 10px 0 rgba（0,0,0,0.3）; width：100px; transform：rotate（1deg）;}。menu {background：＃f00;高度：100％; width：100px;位置：相对; z-index：2;}  

 < div class = menuContainer> < div class =menu>< / div>< / div>  

JSFiddle

I have a fixed, 100% height menu on the left and I need to create a shadow effect on its right side that would disappear after while.

See the figure that illustrates this.

How to create this effect?

Here is a fiddle: http://jsfiddle.net/52VtD/7787/

HTML:

<nav id="main-menu">
  <h1>Hello</h1>
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
</nav>

CSS:

#main-menu {
    width: 320px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
    background-color: #b4bac1;
}

解决方案

You can achieve this with CSS3: box-shadow and transform.

In the example below the box-shadow is applied to a pseudo element of .menuContainer which sits underneath the .menu element and is rotated by 1° using CSS3s rotate() transform property.

html,body {  /* This is only here to allow the menu to stretch to 100% */
    height: 100%;
    margin: 0;
}
.menuContainer {
    position: relative;    
    height: 100%;
    width: 100px;
}
.menuContainer::after {
    content: "";
    position: absolute;   
    z-index: 1; 
    top: -10px;
    bottom: 0;
    left: -7px;
    background: rgba(0,0,0,0.3);
    box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);
    width: 100px;    
    transform: rotate(1deg);
}
.menu {
    background: #f00;
    height: 100%;
    width: 100px;
    position: relative;
    z-index: 2;
}

<div class="menuContainer">
    <div class="menu"></div>
</div>

JSFiddle

这篇关于CSS：旋转阴影在框的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！