Примеры CSS теней без использования картинок. Часть 1

Про создание теней без использования картинок, я уже написала пару статей и добавила свойства в справочник CSS. Тут я просто без каких-либо комментариев, хочу выложить варианты блоков с различными видами теней.
Все, что нужно сделать, это прописать стили в CSS и добавить код

<div class=»container»><div class=»название класса»>содержимое блока </div></div>
Для начала, какой бы из нижеперечисленных стилей Вы бы не решили использовать, нужно добавить в файл CSS строки:   .container {
            position:relative;            z-index:1;            margin:0 auto;        }
        .container:after {
            content:»»;            display:block;            clear:both;            visibility:hidden;            height:0;            font-size:0;        }
/* Общие стили */        
        .drop-shadow-block {
            position:relative;
            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;
        }
        .drop-shadow-block:before,        .drop-shadow-block:after {
            content:»»;
            position:absolute; 
            z-index:-2;
        }       
        .drop-shadow-block p {
            font-size:16px;
            font-weight:bold;
        }

А вот дальше приведу варианты с кодом, которые нужно добавить в каждом конкретном случае

Приподнятые уголки

html-код: <div class=»drop-shadow-block lifted»>Приподнятые уголки</div>

css: 
/* Приподнятые уголки */ 

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

  }

Закругленные уголки

html-код:

<div class=»drop-shadow-block curled»>Закругленные уголки</div> 

css: 
 /* Закругленные уголки */ 

  .curled { 

  border:1px solid #efefef;  

  -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;  

  border-radius:0 0 120px 120px / 0 0 6px 6px; 

  } 
  .curled:before, 

  .curled:after { 

  bottom:12px; 

  left:10px; 

  width:50%; 

  height:55%; 

  max-width:200px; 

  -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  

  -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  

  box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  

  -webkit-transform:skew(-8deg) rotate(-3deg); 

  -moz-transform:skew(-8deg) rotate(-3deg); 

  -ms-transform:skew(-8deg) rotate(-3deg); 

  -o-transform:skew(-8deg) rotate(-3deg); 

  transform:skew(-8deg) rotate(-3deg); 

  }     

  .curled:after {  

  right:10px;  

  left:auto; 

  -webkit-transform:skew(8deg) rotate(3deg);  

  -moz-transform:skew(8deg) rotate(3deg);  

  -ms-transform:skew(8deg) rotate(3deg);  

  -o-transform:skew(8deg) rotate(3deg);  

  transform:skew(8deg) rotate(3deg); 

  } 

Комментарии на Facebook