Реалистичные тени при помощи CSS3 без использования изображений

    Привет, Хабр!

    Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

    image


    Блок с приподнятыми уголками

    image
    HTML
    <div class="lifted">
            <p>Содержимое</p>
    </div>
    

    CSS
    .lifted p {
            font-size:16px;
            font-weight:bold;
    }
     
    .lifted {
            position:relative;
            width:40%;
            padding:1em;
            margin:2em 10px 4em;
            background:#fff;
            border-radius:4px;
        -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;
            -moz-border-radius:4px;
     
    }
     
    .lifted:before,
    .lifted:after {
            content:"";
            position:absolute;
            z-index:-2;
            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);
    }
    
    

    Протестировано, одобрено, работает. Остальные способы изготовления реалистичных теней по указаной выше ссылке по просьбам трудящихся выложены ниже.

    Блок с завитками на уголках

    image
    HTML
    <div class="curled">
            <p>Содержимое</p>
    </div>
    

    CSS
    .curled {
        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;
        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 {
        content:"";
        position:absolute;
        z-index:-2;
        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);
            }
    .curled p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Перспектива

    image
    HTML
    <div class="perspective">
            <p>Содержимое</p>
    </div>
    

    CSS
    .perspective {
        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;
    }
     
    .perspective:before,
    .perspective:after {
        content:"";
        position:absolute;
        z-index:-2;
    }        
     
    .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;
    }
     
    .perspective p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Приподнятый бокс

    image
    HTML
    <div class="raised">
            <p>Содержимое</p>
    </div>
    

    CSS
    .raised {
        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;
        -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;
    }        
     
    .raised:before,
    .raised:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
     
    .raised p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Блок с одним вертикальным изгибом

    image
    HTML
    <div class="curved-vt-1">
            <p>Содержимое</p>
    </div>
    

    CSS
    .curved-vt-1 {
        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;
    }
     
    .curved-vt-1:before,
    .curved-vt-1:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
     
    .curved-vt-1: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-1 p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Блок с двумя вертикальными изгибами

    image
    HTML
    <div class="curved-vt-2">
            <p>Содержимое</p>
    </div>
    

    CSS
    .curved-vt-2 {
        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;
    }
     
    .curved-vt-2:before,
    .curved-vt-2:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
     
    .curved-vt-2:before {
        top:10px;
        bottom:10px;
        left:0;
        right:0;
        -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 p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Блок с одним горизонтальным изгибом

    image
    HTML
    <div class="curved-hz-1">
            <p>Содержимое</p>
    </div>
    

    CSS
    .curved-hz-1 {
        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;
    }
     
    .curved-hz-1:before,
    .curved-hz-1:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
     
    .curved-hz-1:before {
        top:50%;
        bottom:0px;
        left:10px;
        right:10px;
        -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:100px / 10px;
             border-radius:100px / 10px;
    }
     
    .curved-hz-1 p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Блок с двумя горизонтальными изгибами

    image
    HTML
    <div class="curved-hz-2">
            <p>Содержимое</p>
    </div>
    

    CSS
    .curved-hz-2 {
        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;
    }
     
    .curved-hz-2:before,
    .curved-hz-2:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
     
    .curved-hz-2:before {
        top:0px;
        bottom:0px;
        left:10px;
        right:10px;
        -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:100px / 10px;
             border-radius:100px / 10px;
    }
     
    .curved-hz-2 p {
        font-size:16px;
        font-weight:bold;
    }        
    


    Перевернутый бокс

    image
    HTML
    <div class="rotated">
            <p>Содержимое</p>
    </div>
    CSS:
    

    CSS
    .rotated {
        position:relative;
        width:40%;
        padding:1em;
        margin:2em 10px 4em;
        background:#fff;
        border-radius:4px;
        -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;
        -moz-border-radius:4px;
        -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:0px;
        bottom:0;
        left:0;
        right:0px;
        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;
    }      
     
    .rotated:before,
    .rotated:after {
            content:"";
            position:absolute;
            z-index:-2;
            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);
    }
     
    .rotated:after {
        right:10px;
        left:auto;
        -webkit-transform:rotate(3deg);
           -moz-transform:rotate(3deg);
            -ms-transform:rotate(3deg);
             -o-transform:rotate(3deg);
                transform:rotate(3deg);
    }
     
    .rotated p {
            font-size:16px;
            font-weight:bold;
    }
    

    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 58
    • +6
      Нельзя было сюда все примеры выложить?
      • +9
        Можно. Если настаиваете, выложу все.
        • +5
          Приятнее было бы видеть все здесь, а не ходить по ссылке, тем более вдруг она когда-нибудь станет битой, а тут сохранится наверняка.
          • +6
            Значит, ждите ответа, ваш звонок очень важен для нас :)
            • +9
              Спасибо. Позвонить правда наверное в ЛС надо было.
      • 0
        А у меня нет иллюзии приподнятых уголков, скорее опущенная тень…
        Но всё равно за статью спасибо, думаю пригодится.
        • +8
          Вы, возможно, пользуетесь выпуклым ЭЛТ-монитором?
          • 0
            Да нет, старый добрый Samsung SyncMaster 152T уже лет 7-8 он мне служит верой и правдой.
        • +3
          UPD: Выложил все примеры
          • +1
            А есть список совместимых браузеров?
            • –1
              Как-то так:
              image
              • +9
                И причем тут селекторы?
                • 0
                  похоже, это насчет осла человек пошутил
            • +12
              Ну и торможу же я :(
              Вот так: http://www.findmebyip.com/litmus/, само собой. Предудущее можете заминусовать.
              • +1
                Ок, я тоже тормоз :)
                • +3
                  Я бы кстати дал такие ссылки:
                  caniuse.com/#search=transform
                  caniuse.com/#search=shadow

                  Там вверху есть цифра Support: 65.09%.
                  • 0
                    можно узнать, какие еще качественные ссылки с цифрами есть тематические?

                    и можно даже еще и с буквами и не только про css, но web/mobile в целом =)

                    стихийный флэшмоб-соцопрос внезапно зародился — дюжина самых важных ресурсов про web/mobile от каждого активного хабрера
              • 0
                Думаю, пригодится, спасибо за примеры!
                • 0
                  было бы еще отлично рассказать про это свойство :)
                  • 0
                    Не для копипасты. Но тема для следующего топика :)
                  • +6
                    А какая ситуация с производительностью?

                    Например, если взять галерею из 27 картинок и к каждой применить тень «Приподнятый бокс».
                    • 0
                      Слабенькие компы сдохнут, можете даже не сомневаться. Как раз сейчас занимаюсь разработкой интерфейсов под всякие терминалы, там относительно слабые процы стоят.
                      • 0
                        box-shadow начинает тормозить галерею из 12 картинок. Если пытаться добавить еще и CSS3-анимацию для картинок, то особенно заметно.
                      • 0
                        Интересно, а зачем z-index: -2? Насколько я помню, -1 уже гарантирует нам то, что псевдоэлемент будет «под блоком», не?
                        • 0
                          неплохо
                          • +1
                            Как всегда IE все обламывает.

                            Хочу в будущее, года на 2-3 вперед, может там с кроссбраузерностью попроще обстоят дела. А еще больше хочу кого-нибудь ударить… чтоб его…
                            • 0
                              Что значит обламывает? Все примеры работают в IE9+.
                              • +1
                                Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий, там же еще и .div:hover не работает, что тоже добавляет «радости».

                                Можно конечно, добиться, чтобы внешний вид выглядел везде одинаково, вот только на сколько больше времени придется потратить, имитируя всего то два стиля.
                                • 0
                                  там же еще и .div:hover не работает
                                  Что значит не работает? Какой у вас DOCTYPE?
                                  • +2
                                    «Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий»

                                    Очень плохо =/ Не нужно картинок, это лишние запросы к серверу.

                                    В ie можно сделать нативные тени и круглые углы — css3pie.com/
                                    • +1
                                      А зачем добиваться красивых теней для ИЕ? Ну будут стандартные прямоугольники, кто умрет?
                                      В хороших браузерах хорошее отображение, в плохих — плохое.
                                      • +1
                                        Согласен, но если сгруглить углы и добавить красивые тени для 14% пользователей (ie8) занимает 10 минут — я не обламаюсь, сделаю :)
                                        • 0
                                          А я обламаюсь. Если в жизни человек вместо авто-внедорожника берет велосипед с квадратными дорогами, то зачем для него делать дорогу не ровную, а полукругами?
                                          • 0
                                            Согласен, но я люблю посетителей сайтов, которые делаю, и уважаю их выбор.

                                            Тем не менее на ie6 и очень часто на ie7 эта любовь уже не распространяется.
                                            • 0
                                              А вы не думали о том, что, возможно, их выбор — сайты без скругленных углов, теней, поворотов и прочих благ CSS3? Таким образом, вы навязываете им новые технологии.
                                              • 0
                                                Думал, но так я рискую сделать сайт, который смогуть посмотреть только разработчики chrome с dev-версии браузера.
                                                • 0
                                                  У вас сделан сделан использованием только не утвержденных свежих наворотов?
                                                  Я, может быть, не гуру верстки, но мои сайты вполне прекрасно смотрятся в современных браузерах. Просто использую общепринятые теги и свойства (text-shadow, border-radius) и не заморачиваюсь с хаками.
                                • 0
                                  а вдруг там пустыня и нет не то что ИЕ, а даже электричества? )
                                • +4
                                  Как же ужасно рендерится повернутый текст :(
                                  • 0
                                    2005:
                                    «Как добавить закругленные уголки в CSS2 не используя изображений»

                                    2011:
                                    «Как сделать реалистичную тень в CSS3 без использования изображений»

                                    2017:
                                    ???
                                    • +3
                                      2017: как сделать реалистичную тень в CSS4 на столе :)
                                      • +1
                                        Шекспир уже все написал
                                      • –1
                                        Как сделать [что-то].....(IE6 совместимо)
                                        • 0
                                          2035: «… и только радиоактивный снег падал на безжизненную поверхность планеты...»
                                        • +4
                                          www.rusdigi.org/css3/css3-dlya-nachinayushhikh-chast-5-1-drop-shadow-prostye-primery.html с датой от 1-го мая… + на том же сайте есть и иные примеры — www.css3demos.rusdigi.org/. Поиском пользоваться-то будем?
                                        • +1
                                          Беда в том, что в фотошопе такие тени не нарисуешь без кисточек.
                                          • 0
                                            ctrl+t
                                          • 0
                                            Самая большая беда в том, что если надо будет увеличить интенсивность теней, цвет, размер, то придется перерисовывать картинку, а в CSS3 надо поменять всего несколько цифр.
                                            • 0
                                              я это и подразумевал
                                          • 0
                                            Гм… а ка-кто по исходникам не могу найти как фон сделан такой красивый с затемнением к краям. Можно в двух словах для слепых? :)
                                            • +2
                                              Из первого примера. Внутренняя тень. box-shadow с параметром inset.
                                              .lifted {
                                                      position:relative;
                                                      width:40%;
                                                      padding:1em;
                                                      margin:2em 10px 4em;
                                                      background:#fff;
                                                      border-radius:4px;
                                                  -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;
                                                      -moz-border-radius:4px;
                                               
                                              }
                                              
                                            • 0
                                              Хороший перевод статьи годичной давности :)
                                              nicolasgallagher.com/css-drop-shadows-without-images/
                                              • 0
                                                Еесли у родителя есть фон — то вся красота этого варианта уже не работает :(.
                                                • +1
                                                  Автор, изображения пропали. Перезайлейте пожалуйста на хабрасторадж.
                                                  • 0
                                                    Ок, спасибо. Это я за хостингом не уследил.

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.