Как я могу сделать необычную тень?

Question

У меня есть тег "article", и я хочу, чтобы у него была причудливая тень с поднятыми углами. Я хочу избежать использования изображений и сделать это с помощью CSS, если это вообще возможно.

Это пример того, что похоже на то, чего я хочу достичь: http://oi59.tinypic.com/2pq7y1e.jpg

Вот мой код:

<div class="mainContent">
    <div class="contentWrapper">
        <article class="content">

        </article>
    </div>
<div>

И CSS у меня так далеко:

.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;}

.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;}

.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;}

Answer 1

Добавьте CSS ниже к простому div как <div class="shadow lifted"></div>

.shadow {
position:relative;
width:40%;    
padding:1em; 
margin:2em 10px 4em; 
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow:before,
.shadow:after {
content:"";
position:absolute; 
z-index:-2;
}


.lifted {
-moz-border-radius:4px; 
     border-radius:4px;
}

.lifted:before,
.lifted:after { 
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
        box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);    
   -moz-transform:rotate(-3deg);   
    -ms-transform:rotate(-3deg);   
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);
}

.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
   -moz-transform:rotate(3deg);  
    -ms-transform:rotate(3deg);  
     -o-transform:rotate(3deg);
        transform:rotate(3deg);
}

DEMO

Answer 2

коробчатая тень:

1. горизонтальное смещение тени
2. вертикальное смещение тени
3. радиус размытия (необязательно)
4. радиус распространения (необязательно)

http://css-tricks.com/snippets/css/css-box-shadow/

Вот CodePen того, что box-shadow сможет сделать.

Вы также можете проверить этот пост на css-tricks.com.

Answer 3

Вы можете добиться эффекта тени, написав несколько строк кода. Не требуется слишком много строк кода.

Для поддержки всех браузеров вы можете использовать библиотеку JavaScript под названием Modernizr,

ПРОВЕРИТЬ ДЕМО В первую очередь.

#box {
  position: relative;
  width: 60%;
  background: #ddd;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}
#box:before, #box:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}
#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}