Реалистичные тени при помощи 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
        А у меня нет иллюзии приподнятых уголков, скорее опущенная тень…
        Но всё равно за статью спасибо, думаю пригодится.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Да нет, старый добрый Samsung SyncMaster 152T уже лет 7-8 он мне служит верой и правдой.
          +3
          UPD: Выложил все примеры
            +1
            А есть список совместимых браузеров?
              –1
              Как-то так:
              image
                +9
                И причем тут селекторы?
                  0
                  похоже, это насчет осла человек пошутил
                    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/. Поиском пользоваться-то будем?
                                              0
                                              не плохой ресурс
                                              +1
                                              Беда в том, что в фотошопе такие тени не нарисуешь без кисточек.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  lens blur
                                                  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
                                                          Ок, спасибо. Это я за хостингом не уследил.

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

                                                        Самое читаемое