Оформляем тултипы с помощью CSS3

Всем привет!
Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это старомодно непрактично. Хотя бы из-за кучи оберток, для того, чтобы все тянулось во все стороны.
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
От слов к делу.

Сразу скажу, что все примеры находятся по ссылке внизу статьи. А размышляющим о «высших материях» пост можно не читать, ибо ничего сверхъестественного здесь нет.

Итак, делаем заготовку.
Нам понадобится один див и 1 или 2 псевдоэлемента.

div{
position:relative;
display:inline-block;
padding:10px;
min-height:30px;
min-width:100px;
font-family:'Trebuchet MS';
margin-right:30px;
text-align:left;
}

div:before, div:after{
content:'';
position:absolute;
}

Тултип с рамкой

Скругляем сам тултип и делаем рамку. Затем к нему подвешиваем псевдоэлемент со стрелкой и с помощью transform сначала поворачиваем его, а затем наклоняем. В итоге у нас получится наклоненный параллелограмм. Задаем ему рамку и через z-index:-1 прячем его «под» основной блок. Но теперь у нас рамка тултипа оказывается поверх стрелки. Для этого берем еще один псевдоэлемент и накладываем точно поверх этой рамки, задав цвет фона, такой же как у тултипа. Вот и все. Код ниже.

.t1{
border-radius:10px;
background:#efefef;
border:1px solid #777;
}

.t1:before{
bottom:-5px;
left:10px;
width:20px;
height:10px;
-webkit-transform:rotate(-30deg) skewX(-45deg);
-moz-transform:rotate(-30deg) skewX(-45deg);
-o-transform:rotate(-30deg) skewX(-45deg);
-ms-transform:rotate(-30deg) skewX(-45deg);
background:#efefef;
z-index:-1;
border:1px solid #777;
}

.t1:after{
left:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
}

Простой тултип со стрелкой

Здесь все просто. Как и написал во вступлении: берем блок и навешиваем к нему треугольник через псевдоэлемент.

.t2{
background:#333;
border-radius:5px;
color:#ccc;
}

.t2:before{
left:10px;
bottom:-10px;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
}

Тултип с тенью

Здесь почти все тоже самое, как и в первом варианте, только добавляем тень.
И z-index делаем положительным(или вообще не указываем), т.к. тень есть тень и ее не скрыть вспомогательным псевдоэлементом. Сразу отмечу, что данная конструкция подразумевает под собой резервирование в тултипе места внизу.

.t3:before{
bottom:-4px;
right:10px;
width:20px;
height:10px;
-webkit-transform:rotate(30deg) skewX(45deg);
-moz-transform:rotate(30deg) skewX(45deg);
-ms-transform:rotate(30deg) skewX(45deg);
-o-transform:rotate(30deg) skewX(45deg);
background:#efefef;
z-index:1;
box-shadow:4px 5px 5px 0px #777;
}

В примере есть тултип с градиентом, но его не буду описывать, т.к. там все делается по аналогии. Добавлена лишь «красивость», которая не является предметом моего повествования.

Полупрозрачный тултип

В свою очередь он ничем не отличается от «обычного тултипа» со стрелкой. Задаем фон через rgba и вперед. Для порядка я его тоже наклонил.

.t5:before{
left:15px;
top:-10px;
width:0px;
height:0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(51,51,51,0.5);
-webkit-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-ms-transform:skewX(45deg);
-o-transform:skewX(45deg);
}

Вот и все хитрости.
Пример находится здесь

Скажу, что этот пост не поражает своей новизной и уникальностью, он скорее из разряда «чтобы было» или «подглядеть кое-чего». Раз многие просят, стало быть полезно.
Спасибо за внимание.