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

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



Для его создания воспользуемся 4 свойствами CSS3:

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

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

Меню

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

* This source code was highlighted with Source Code Highlighter.

В принципе стандартно, ничего необычного.
CSS для него:

1. .menu {
2.   position: relative;
3.   top:7px;
4.   left: 50px;
5.   z-index: 80; /* Спрячемм под основной блок с закругленными уголками */
6. }
7. .menu li {
8.   -webkit-transform: rotate(-45deg); /* Повернем элемент в вебките */
9.   -moz-transform: rotate(-45deg); /* Повернем элемент в Мозилле */
10.   width: 50px;
11.   overflow: hidden;
12.   margin: 10px 0px;
13.   padding: 5px 5px 5px 18px;
14.   float: left;
15.   background: #7f9db9;
16.   text-align: right;
17. }

* This source code was highlighted with Source Code Highlighter.

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

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

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

* This source code was highlighted with Source Code Highlighter.

CSS:

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

* This source code was highlighted with Source Code Highlighter.

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

Заголовок

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

* This source code was highlighted with Source Code Highlighter.

CSS:

1. .rectangle {
2.   background: #7f9db9;
3.   height: 50px;
4.   width: 380px;
5.   position: relative;
6.   left:-15px;
7.   top: 30px;
8.   float: left;
9.   -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
10.   -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
11.   z-index: 100; /* показываем над всеми элементами */
12. }
13. .rectangle h2 {
14.   font-size: 30px;
15.   color: #fff;
16.   padding-top: 6px;
17.   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
18.   text-align: center;
19. }
20. .triangle-l { /* уголочек под зголовком слева */
21.   border-color: transparent #7d90a3 transparent transparent;
22.   border-style:solid;
23.   border-width:15px;
24.   height:0px;
25.   width:0px;
26.   position: relative;
27.   left: -30px;
28.   top: 65px;
29.   z-index: -1; /* спрячем под основной блок */
30. }
31. .triangle-r { /* уголочек под зголовком справа */
32.   border-color: transparent transparent transparent #7d90a3;
33.   border-style:solid;
34.   border-width:15px;
35.   height:0px;
36.   width:0px;
37.   position: relative;
38.   left: 350px;
39.   top: 35px;
40.   z-index: -1; /* спрячем под основной блок */
41. }

* This source code was highlighted with Source Code Highlighter.

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

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

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


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


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

Ссылки

Ссылка на работающий пример
Ссылка на архив с примером
Написано с использованием этой статьи
_________
Текст подготовлен в ХабраРедакторе