Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Падающие тени на чистом CSS, без использование картинок
Падающие тени на чистом CSS, без использование картинок
AndreyДата: Вторник, 10.12.2013, 16:45:14 | Сообщение # 1
Технарь
Offline
3

Эффекты падающих теней можно реализовать на чистом CSS, без использование картинок

И так смотрим мой тест на Фиддле

Начнём установку

Заходим в CSS и создаём блок:
Код
/* Shared styles */
              
           .drop-shadow {
               position:relative;
               float:left;
               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;
           }

           .drop-shadow:before,
           .drop-shadow:after {
               content:"";
               position:absolute;    
               z-index:-2;
           }
              
           .drop-shadow p {
               font-size:16px;
               font-weight:bold;
           }


Здесь же ниже добавляем стиль теней:
Код
/* Lifted corners */

           .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);
           }
              
           /* Curled corners */

           .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);
           }
              
           /* Perspective */

           .perspective:before {
               left:80px;
               bottom:5px;
               width:50%;
               height:35%;
               max-width:200px;
               -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                  -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                       box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               -webkit-transform:skew(50deg);
                  -moz-transform:skew(50deg);
                   -ms-transform:skew(50deg);
                    -o-transform:skew(50deg);
                       transform:skew(50deg);
               -webkit-transform-origin:0 100%;
                  -moz-transform-origin:0 100%;
                   -ms-transform-origin:0 100%;
                    -o-transform-origin:0 100%;
                       transform-origin:0 100%;
           }
              
           .perspective:after {
               display:none;
           }
              
           /* Raised shadow - no pseudo-elements needed */
              
           .raised {
               -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                       box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
           }
              
           /* Curved shadows */

           .curved:before {
               top:10px;
               bottom:10px;
               left:0;
               right:50%;
               -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
               -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
               box-shadow:0 0 15px rgba(0,0,0,0.6);
               -moz-border-radius:10px / 100px;
               border-radius:10px / 100px;
           }
              
           .curved-vt-2:before {
               right:0;
           }
              
           .curved-hz-1:before {
               top:50%;
               bottom:0;
               left:10px;
               right:10px;
               -moz-border-radius:100px / 10px;
               border-radius:100px / 10px;
           }

           .curved-hz-2:before {
               top:0;
               bottom:0;
               left:10px;
               right:10px;
               -moz-border-radius:100px / 10px;
               border-radius:100px / 10px;
           }
              
           /* Rotated box */
              
           .rotated {
               -webkit-box-shadow:none;
                  -moz-box-shadow:none;
                       box-shadow:none;
               -webkit-transform:rotate(-3deg);       
                  -moz-transform:rotate(-3deg);      
                   -ms-transform:rotate(-3deg);
                    -o-transform:rotate(-3deg);
                       transform:rotate(-3deg);
           }
              
           .rotated > :first-child:before {
               content:"";
               position:absolute;
               z-index:-1;
               top:0;
               bottom:0;
               left:0;
               right:0;
               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;
           }


И где нужно вставляем:
Код
<div class="drop-shadow lifted">
               <p>Ваш контент</p>
           </div>


lifted - Это название тени, то есть чтоб поставить другую тень просто поменяйте название из CSS

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Падающие тени на чистом CSS, без использование картинок
Страница 1 из 11
Поиск: