Сегодня хочу показать очень интересное решение реализации разнообразных теней на css. Много здесь говорить не буду, давайте смотреть примеры готового использования.

Пример 1

Реализация приподнятых нижних углов блока на css.

Пример:

Нижние углы

Как это реализовать, смотрим исходный код ниже.

Код HTML

<div class="drop-shadow lifted">
     <p>Нижние углы</p>
</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;
           max-height:100px;
           -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);
       }

Надеюсь, здесь ничего сложного нет. Рассмотрим еще несколько примеров

Пример 2

Приподнятые

Код HTML

<div class="drop-shadow curled">
    <p>Приподнятые</p>
</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;
            max-height:100px;
            -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);
        }

Пример 3

Наклонная тень на css

Отражение

Код HTML

<div class="drop-shadow perspective">
    <p>Отражение</p>
</div>

Код CSS

.perspective:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            max-height:50px;
            -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;
        }

Пример 4

Пример использования нижней тени блока

Тень нижняя

Код HTML

<div class="drop-shadow raised">
   <p>Тень нижняя</p>
</div>

Код CSS

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

Пример 5

Пример тени слева на css

Тень левая

Код HTML

<div class="drop-shadow curved">
    <p>Тень левая</p>
</div>

Код CSS

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

Пример 6

Пример тени левой и правой на css

Левая и правая

Код HTML

<div class="drop-shadow curved curved-vt-2">
   <p>Левая и правая</p>
</div>

Код CSS

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

Пример 7

Пример использования выпуклой тени на css

Выпуклость снизу

Код HTML

<div class="drop-shadow curved curved-hz-1">
   <p>Выпуклость снизу</p>
</div>

Код CSS

.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-hz-1:before {
            top:50%;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

Пример 8

Пример использования тени выпуклость, или рыбий глаз, как в фотошопе, низ и верх

Выпуклость низ и верх

Код HTML

<div class="drop-shadow curved curved-hz-2">
  <p>Выпуклость низ и верх</p>
</div>

Код CSS

.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-hz-2:before {
            top:0;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

Пример 9

Пример использования css с разворотом блока

Поворот на css

Код HTML

<div class="drop-shadow lifted rotated">
  <p>Поворот на css</p>
</div>

Код CSS

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

Вот в принципе и все на сегодня.

Добавлено: 07 Апреля 2018 19:12:35 Добавил: Андрей Ковальчук Нравится 0

Добавить