Создаем объёмный блок с тенью средствами CSS3

    День, когда стандарт CSS3 будет официально утвержден, а все популярные браузеры начнут его отображать приблизит нас, верстальщиков, к нашему же «раю верстальщиков» в несколько раз. Пока же заглянем в будущее и узнаем, как можно создать псевдо-3D блок используя только css и html.

    Выглядеть блок будет так:



    Для его создания воспользуемся 4 свойствами CSS3:
    • box-shadow — тень от элемента
    • text-shadow — тень от текста
    • transform — поворот
    • background: rgba(0,0,0,0.65) — возможность задать прозрачность фону


    Вставлять целиком html и css не буду — ниже дам ссылочку на пример, остановлюсь на конкретных пунктах.
    Пойдем сверху вниз.

    Меню


    <ul class="menu">
        <li class="l1"><a href="#">CSS3</a></li>
        <li class="l2"><a href="#">реально</a></li>
        <li class="l3"><a href="#">круто</a></li>
    </ul>
    

    В принципе стандартно, ничего необычного.
    CSS для него:
        .menu {
          position: relative;
          top:7px;
          left: 50px;
          z-index: 80; /* Спрячемм под основной блок с закругленными уголками */
        }
        .menu li {
          -webkit-transform: rotate(-45deg); /* Повернем элемент в вебките */
          -moz-transform: rotate(-45deg); /* Повернем элемент в Мозилле */
          width: 50px;
          overflow: hidden;
          margin: 10px 0px;
          padding: 5px 5px 5px 18px;
          float: left;
          background: #7f9db9;
          text-align: right;
        }
    

    Как видно на 7 и 8 строке, используем поворот каждого элемента списка на 45 градусов

    Основной контейнер


        <div class="bubble"></div>
    

    CSS:
    .bubble { /* Это основной контейнер с закругленными уголками */
      clear: both;
      margin: 0px auto;
      width: 350px;
      background: #fff;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 90; /* будет отображаться под лентой заголовка (класс .rectangle, у него z-index: 100) */
    }
    

    Для этого элемента применяем закругленные уголки и тень.

    Заголовок


    <div class="rectangle">
        <h2>3D CSS блок</h2>
    </div>
    <div class="triangle-l"></div><!-- Левый уголок под заголовком -->
    <div class="triangle-r"></div><!-- Правый уголок под заголовком -->
    

    CSS:
        .rectangle {
          background: #7f9db9;
          height: 50px;
          width: 380px;
          position: relative;
          left:-15px;
          top: 30px;
          float: left;
          -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
          -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
          z-index: 100; /* показываем над всеми элементами */
        }
        .rectangle h2 {
          font-size: 30px;
          color: #fff;
          padding-top: 6px;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
          text-align: center;
        }
        .triangle-l { /* уголочек под зголовком слева */
          border-color: transparent #7d90a3 transparent transparent;
          border-style:solid;
          border-width:15px;
          height:0px;
          width:0px;
          position: relative;
          left: -30px;
          top: 65px;
          z-index: -1; /* спрячем под основной блок */
        }
        .triangle-r { /* уголочек под зголовком справа */
          border-color: transparent transparent transparent #7d90a3;
          border-style:solid;
          border-width:15px;
          height:0px;
          width:0px;
          position: relative;
          left: 350px;
          top: 35px;
          z-index: -1; /* спрячем под основной блок */
        }
    

    Для блока-прямоугольника под заголовком, а так текста самого заголовка применяем отбрасывание тени.
    Классы .triangle-l и .triangle-r нужны чтобы создать «треугольнички» поз заголовком слева и справа соответственно.

    Подводные камни


    Так как CSS3 сейчас поддерживают не все браузеры, то и не все юзеры увидят одинаковую картинку.
    Так ее увидят пользователи Mozilla Firefox, Google Chome и Apple Safari:


    Так пользователи Оперы (Проверял на 9,64):


    Так пользователи IE8:


    Ссылки


    Ссылка на работающий пример
    Написано с использованием этой статьи
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +4
      Ну, в Опере 10.10 только верхние ссылочки получились с разноцветным бг.
      А за материал спасибо, полезно.
        +1
        По идее верхние ссылки не каждому нужны будут. Получается блок с закруглёнными углами можно использовать. Ничего страшного, что круглые углы не увидят пользователи IE.
          +1
          в принципе вы правы. На одном из проектов так и сделал. Вид от незакругленных уголков особо не портиться.

          Осталось дождаться нормальной поддержки CSS3 хотя бы от Opera (вроде в пре-альфа релизах уже есть).
          И в IE9 тоже поддержку CSS3 обещали.
            –2
            Осталось дождаться нормальной поддержки CSS3 хотя бы от Opera
            Му-ха-ха. Осталось дождаться, когда вы поймете, где css3, а где нечто другое.
              +3
              Пояснение:
              box-shadow и text-shadow — это css3, добавленное в Оперу недавно.
              -webkit-box-shadow и -moz-text-shadow — это нечто другое, не css3, у этого не может быть «нормальной поддержки» в Опере.
                +1
                на сколько мне известно приставки означают, что свойство не полностью отвечает стандартам. В данном случае, видимо потому что по правилам w3c стандарт официально принимается после, по моему, 2-х готовых реализаций, и ещё официально не принят. Так что Опера, действительно отстаёт… надеюсь скоро подтянется.
                  0
                  Приставки означают, что свойство действует только под указанным HTML движком. Так что понимать приставки -moz и -webkit должны, соответственно, только Mozilla-based и Webkit-based браузеры.
          –1
          в 10.50 аналогично… увы
            +4
            а если Опере дать border-radius вместо -moz-border-radius?
              +4
              Именно так! В Opera 10.5 border-radius без префикса.
                –1
                а как это может повлиять на положение ссылок в меню? Я об этом)

                -moz-border-radius в опере работает
                  +2
                  Уважаемый, -moz- в опере (покрайнемере у меня) не работает, однако прекрасно работает без него.

                  А по поводу положения ссылок — если вы о наклоне, то если добавить к CSS свойству префикс -o- все прекрасно работает, и могу заметить что отображается лучше чем в FF.
                    0
                    хм, в 10.50 у меня все заработало и с -moz-

                    ок, не знал
                      0
                      я чуть ниже выложил с CSS рабочий и скрин из оперы.
                0
                Увы автору, никак не Опере.
                –4
                да, жаль Оперу вся эта радость обходит стороной :(
                  +6
                  Прость CSS написан ТОЛЬКО под webkit и лису, про оперу автор попросту забыл.
                0
                Текст при повороте выглядит ужасно. Как пример, конечно, норм, но в реальной среде это использовать пока нельзя.
                  0
                  думаю в конце концов подкрутят реализацию, и будет круто. Сейчас многое зависит от шрифта. Некоторые лучше отображаются, некоторые хуже. В примере решил оставить стандартные.
                    +1
                    Так он и будет выглядеть ужасно. Для нормального отображения шрифтов на мониторе используется хинтинг. Сомневаюсь, что кто-то будет разрабатывать хинтинг хотя бы для одного варианта написания под углом.
                      0
                      В Chrome показывается отлично. В Firefox, увы, весьма корявый.
                        +1
                        Chrome/Ubuntu — тоже весьма криво отображается. А под виндовсом в хроме да, нормально.
                      0
                      Он у меня в FF ещё шевелится, когда его выделяешь мышкой :-)
                        0
                        Ага, и это не считая прыгающих полуповёрнутых букв и диких «лесенок»

                        (слева ФФ3.6, справа — Опера10.50, применены трансформ-ротейт и текст-шедоу. Фон — картинка)
                      +6
                      нужно бы сами свойства из css3 дописать, а не только браузерные еквиваленты:
                      -moz-border-radius: 10px;
                      -webkit-border-radius: 10px;
                      border-radius: 10px;
                      
                        –2
                        а border-radius сейчас вообще хоть кто-то воспринимает? Или на будущее?
                          +3
                          слышал что в последней бете оперы не нужны приставки
                            +1
                            Для 2D трансформаций нужен префикс -o-. А так да, не нужен.
                            +3
                            При чем тут будущее. У вас статья называется как? Вот border-radius — это и есть css3.
                              +1
                              Opera 10.50
                                0
                                последние сборки chromium понимают border-radius
                                • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                забавно. заюзаю у себя.
                                p.s.
                                да я знаю, что только избранные увидят эту красоту… простых смертных буду редиректить на скриншот того, что они могли увидеть :)
                                  0
                                  grab.by/1S6v — прикрутил к своему движку. Бабл использую как всю страницу, в лентачках будет инфа в стиле под кем залогинен и так далее :)
                                    +1
                                    Нижняя полоса не круто смотрится, так как полоса сгиба выглядит слишком толсто, по сравнению с тонкой полосой.
                                    Нужно переделать.)
                                      0
                                      угу, я ее верх загну еще.
                                  0
                                  also вы забили указать class=«info»
                                    0
                                    там ничего интересного, просто паддинги. Я решил в пост вынести только элементы с новыми CSS свойствами
                                    0
                                    browsershots.org/http://my-html.ru/example/3D_css/index.html
                                      +3
                                      А нельзя triangle-* заменить на псевдлэлементы :before и :after?
                                        0
                                        dumpz.org/16206/ — добавил поддержку оперы.
                                        Opera 10.5 Build 3186

                                          +2
                                          i46.tinypic.com/2lldbpz.jpg — демонстрация в опере. Вроде как все работает.
                                            0
                                            Хм. В сегодняшней сборке Оперы часть букв не отрисовывается — dmitrymaslov.ru/imges/res/opera-10.50-css3.jpg
                                              0
                                              да уж, пропустил буковку…

                                              dmitrymaslov.ru/images/res/opera-10.50-css3.jpg
                                                0
                                                Поставил — проверил. Действительно… Надо бы баг репорт сделать что-ли
                                                  0
                                                  Уверен, это и без багрепорта исправят, версия-то совсем сырая. :-)

                                                  Хотя можно и отписаться разработчикам конечно.
                                        0
                                        Автор, убейся. Это не CSS3, тебя обманули. Это вендорные расширения CSS. заточенные под 2 конкретных браузера.
                                          +3
                                          Ну, зачем авторов сразу так? Человек старался, а придраться ко всему можно.
                                          На хабре итак много злости, чем-то фильм «Эксперимент» напоминает…
                                            +1
                                            Автор написал статью, не потрудившись разобраться в вопросе. Статья на хабре — это не запись в личный бложик. Уже давно известно, что статья на хабре — истина в последней инстанции для новичков. Моя задача — отреагировать так, чтобы автор понял что он накосячил и исправил статью.
                                              0
                                              Готов подписаться под каждым словом в комменте выше.

                                              Но не в первом комменте «Автор, убейся». CSS3 еще в разработке, так что если говорить серьезно, то его еще не существует как стандарта.
                                                0
                                                Ладно, резко получилось, не могу не согласиться.
                                            +3
                                            Ну ведь когда нибудь это может стать стандартом без всяких там -moz-, -webkit-
                                              +1
                                              Браво! CSS3 — это и есть «без всяких там -moz-, -webkit-», чего у автора не наблюдается.
                                                +1
                                                сейчас в пример добавлю
                                                  0
                                                  Ок, в примере появилось, а в статье, которая называется «… средствами CSS3», будет что-либо про CSS3?
                                                    +2
                                                    Вы не все добавили, я вам готовый CSS опубликовал даже! У вас изменение наклона текста так и не сделано для оперы!
                                                  +1
                                                  Это вендорные реализации черновика CSS3 все-таки, а не расширения CSS взятые с потолка.
                                                  Но уточнить бы не мешало.
                                                    0
                                                    Там же написано, откуда взята статья. Это скорее хороший перевод некорректного оригинала.
                                                      +1
                                                      Нет, ну правда, поменяй заголовок :-)
                                                      –2
                                                      автор, читайте книги, а потом когда уверены — пишите статьи.
                                                        –1
                                                        Вы начитаны? Напишите лучше.
                                                        –1
                                                        За материал спасибо. IE блин как всегда!
                                                          0
                                                          Новые «печеньки» которые CSS3 нам дает конечно классные и удобные.
                                                          Но сам файл стилей становится довольно таки громоздким.
                                                          Если так и дальше пойдет, то что ж будет в css4. Хотя думаю пока появится 4 версия, сам css эволюционирует во что-то более удобное и менее емкое.
                                                            0
                                                            Почему громоздким? На мой взгляд реализация намного компактнее нежели реализовывать по средствам традиционных методов.
                                                              0
                                                              >компактнее нежели реализовывать по средствам традиционных
                                                              А вы приплюсуйте традиционный метод, необходимый для кроссброузерности и посчитайте во сколько этот «нетрадиционный» вывих обойдется.
                                                                0
                                                                а зачем тогда реализовывать на CSS3? Либо то либо то, если уж придеться мучаться)
                                                                  –2
                                                                  >а зачем тогда реализовывать на CSS3?
                                                                  Вот и я думаю, зачем реализовывать?
                                                                  = = = = = = = = = = = = = =
                                                                  Папа папа посмотри я чет непойму пластилин это или не пластилин??!!! Папа посмотрел, панюхал, надкусил. — да ну сынок эт гавно какоето! — да вот и я пап думаю откуда у меня в жопе пластилин!
                                                                  = = = = = = = = = = = = ==
                                                                    +1
                                                                    Ну так от вас же никто этого не требует, статья несет собой лишь показательный характер.

                                                                    p.s. Вариант этого анегдота с Василий иванычем и Петькой меня улыбал больше)
                                                                      0
                                                                      >показательный характер.
                                                                      Ну да, ну да. Зачем было надкусывать.
                                                                0
                                                                в целом, реализация действительно стала компактней, если учитывать что раньше приходилось переносить часть реализации в html & js.
                                                                а вот сам css при этом стал ведь больше за счет того что в него перенесли эти «печеньки»
                                                              +1
                                                              Зачем надо было говорить про оперу, если вы не использовали CSS3 аттрибутов? Их то она прекрасно поддерживает, без -moz-.
                                                                +1
                                                                версия 10.10 которая на официальном сайте представлена как последняя, и через меню в браузере так же это подтверждает даже с применением border-radius закругленные уголки так и не показала.
                                                                  0
                                                                  Закругленные уголки появились в версии 10,5 которая является пока тестовой, так что не сильное преступление. Да и статья которую вы взяли за основы написала была немного раньше чем вышла 10,5 версия.
                                                                  Просто можно было бы и скорректировать, учитывая что в опере оно отображается сейчас не хуже чем в хроме.
                                                                    0
                                                                    Позволю себе уточнить, версия Оперы 10.50.
                                                                      0
                                                                      10.50 = 10.5
                                                                      в школе должны были проходить.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                          –1
                                                                          Всетаки версии оперы означают десятые и 10.01 ≠ 10.10, а вот 9.50 чаще называют 9.5.
                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                          0
                                                                          10.5 — это Mac OS X Leopard, а Opera — 10.50.
                                                                          Почему Опера пишет справа ноль — их спросите.
                                                                            0
                                                                            Официальный номер версии всё-таки 10.50. Имеем же мы право шутить? Всё началось с 10.10 (1010 = 10, вроде)
                                                                    –1
                                                                    А почему в словах «реально» и «круто» буквы неровно стоят
                                                                    можно как нибудь исправить?
                                                                      0
                                                                      так походу только в лисе… ну и в хроме под линуксом…
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                        +1
                                                                        2\5 пафоса и деферамб кемерону, 2\5 кадров из фильма, и только 1\5 интересного материала.
                                                                        Ну вообщем как всегда, когда рассказывают о кино.
                                                                          +1
                                                                          Дак вот о чем пост :)
                                                                            +1
                                                                              +1
                                                                              Ага) Спасибо за понимание)
                                                                            +3
                                                                            Если вы использовали для написания топика западную статью, то не забывайте — там у ребят другая специфика. А у нас большое распространение имеет Opera, которую тоже не мешало бы учесть в примерах. Ну и совместимость с браузерами, которые просто отбросят префиксы в будущем — тоже дело важное, поэтому:

                                                                            -webkit-box-shadow
                                                                            -moz-box-shadow
                                                                            box-shadow

                                                                            -webkit-border-radius
                                                                            -moz-border-radius
                                                                            border-radius

                                                                            -webkit-transform
                                                                            -moz-transform
                                                                            -o-transform
                                                                            transform

                                                                            -webkit-transition
                                                                            -moz-transition
                                                                            -o-transition
                                                                            transition
                                                                              +1
                                                                              Да даже не в Опере дело, просто написать статью о CSS3 и не написать ни одного CSS3 свойства, это же умудрится надо.
                                                                                +3
                                                                                Ну, даа… Но вопрос скользкий. Вендорные расширения — это те же CSS 3 свойства, но только с оговоркой «если мы их перестанем поддерживать — никаких претензий, ребята». Так что я бы не стал так категорично.

                                                                                И да — хабр уже не торт! </irony>
                                                                                  +1
                                                                                  Посмотри на себя, вебмастер! Одним неловким движением ты закрыл всю иронию в комментах дальше!
                                                                                    +2
                                                                                    Во-первых, это была провокация ;)
                                                                                    Во вторых, я наоборот закрыл все открытые до меня айрони…
                                                                                      +1
                                                                                      Ой и правда, вот что бывает когда клонит в сон в пять часов вечера :/
                                                                                0
                                                                                Просто на момент написания той статьи опера еще не поддерживала эти свойства.
                                                                                  +2
                                                                                  Глупости.

                                                                                  Первый публичный релиз Opera 10.50 вышел в конце декабря 2009 года,
                                                                                  а статья уже 2010 года. А перевод (адаптация) статьи совсем свежий, так что автора это не оправдывает. Голову из песка стоит вынимать ;)
                                                                                    +2
                                                                                    действительно, прошу меня извенить за неточность.
                                                                                0
                                                                                Делал когда-то похожие блоки, ещё и цвета надо было легко менять, всех подробностей не вспоню постомотреть мой вариант можно тут
                                                                                  +1
                                                                                  Автор, добавьте в css примера ещё -khtml- свойства, если не трудно
                                                                                    0
                                                                                    рабочий пример не юзает нативные свйоства ксс трансформа. Следствие: не работает в опере 10.60

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

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