Pull to refresh

Оформление тултипов со стрелками на CSS с помощью символов

Reading time 4 min
Views 36K
Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.

Итак, стоит задача — сделать красивый тултип со стрелками на CSS.

Вариант с картинками рассматривать не будем, воспользуемся псевдоэлементами :before и :after.

Недавно здесь уже рассматривали такую технологию и использованием CSS-трансформаций:
http://habrahabr.ru/blogs/css/136061/

Я предлагаю другой способ — использование символов.

Первоначальный вариант статьи рассматривал использование символов ►, ◄, ▲, ▼, но, как верно заметил FTDeBUGgeR, на Андроиде все рассыпалось. Проблема оказалось банальной: в шрифтах под Андроид просто нет стрелок влево (►) и вправо (◄).

Отступать было некуда, и я решил использовать стрелки ↑, ↓, → и ←, который были и на Андроиде. Но тут внезапно под руку подвернулась бубновая масть — ведь этого символа достаточно для стрелок всех направлений! Кроме того, стрелки ↑, ↓, → и ← большого размера на самом деле не острые, а на Андроиде вообще имеют закругленные концы.

Поэтому будем рисовать «бубновые» тултипы.

Для начала оформим сам блок тултипа с красивым градиентным фоном, бордером и тенью:

	font-size: 12px;
	color:#FFF;
	
	position:relative;
	width:300px;
	padding:20px;
	margin:20px;
	
	border: 1px solid #186F8F;
	
	-moz-border-radius: 	15px;
	-webkit-border-radius: 	15px;
	border-radius: 			15px;
	
	background-color:#35acd7;

	background-image: -moz-linear-gradient(		#29A2CE 0%, #3ABAE6 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29A2CE), color-stop(100%, #3ABAE6));
	background-image: -webkit-linear-gradient(		#29A2CE 0%, #3ABAE6 100%);
	background-image: -o-linear-gradient(		#29A2CE 0%, #3ABAE6 100%);
	background-image: -ms-linear-gradient(		#29A2CE 0%, #3ABAE6 100%);
	background-image: linear-gradient(		#29A2CE 0%, #3ABAE6 100%);
	
	-moz-box-shadow:	0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
	-webkit-box-shadow:	0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
	box-shadow:		0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;


В нашем примере мы будем использовать 2 CSS класса — 'tooltip' для общих свойств, а также для наглядности отдельные классы стрелок различного направления, например, 'leftArrow'.


<div class="tooltip leftArrow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet.
</div>


Далее добавим наши стрелки. Псевдоэлементы будут иметь свойство content с 16-ным кодом символа для его отображения.

Поскольку мы используем бордер на блоке, логично и визуально приятно видеть бордер и стрелке. Но бордер можно повесить только на блок, а на текст — нет. Поэтому у нас будет 2 псевдоэлемента со стрелками — :before и :after, первая стрелка будет иметь цвет бордера, вторая — цвет фона. Используя смещение «фоновой» стрелки относительно «бордерной» можно получить имитацию бордера. Тень стрелки будет формироваться через text-shadow для «бордерной» стрелки (:before).

Если необходим блок без бордеров, то задача упрощается и достаточно использовать один псевдоэлемент, например, :before.

Также запретим выделение нашей текстовой стрелки через user-select:


.tooltip:before,
.tooltip:after {
	content:"\2666";
	font-family: monospace;
	font-size:50px;
	line-height:52px;
	text-align:center;
	
	position:absolute;
	overflow:hidden;
	width:50px;
	height:50px;

	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.tooltip:before {
	color:#186F8F;
}
.tooltip:after {
	color:#35acd7;
}


Сам символ располагается по центру блока 50х50 пикселей, а, используя свойство clip, мы будем отсекать часть символа, тем самым образуя именно треугольный блок стрелки нужного направления.

Главная трудность состоит в определении абсолютных координат наших псевдоэлементов, хотя с помощью FireBug'а можно быстро подобрать необходимый размер стрелки через font-size и спозиционировать элемент. Важно сместить «фоновую» стрелку так, чтобы она прикрыла бордер блока.

Также условимся, что нам необходимо иметь стрелку по центру края. Для этого используем 50% позиционирования по top или left, а также отрицательный margin в половину высоты или ширины блока соответственно.

Кстати первоначальный вариант использовал em, а не px в качество единиц размеров, но всеми любимая Opera катастрофически отказывалась понимать clip в em'ах, поэтому пришлось использовать px.

Здесь мы рассмотрим создание стрелки влево, в конце статьи есть ссылка на примеры для всех 4х вариантов стрелок (влево, вправо, вниз и вверх).


.leftArrow:before,
.leftArrow:after {
	top:50%;
	left:-25px;
	margin-top:-25px;
	clip:rect(0px, 25px, 50px, 0px);
}
.leftArrow:before {
	-moz-text-shadow:	-4px 0px 6px #666;
	-webkit-text-shadow:-4px 0px 6px #666;
	text-shadow:		-4px 0px 6px #666;
}
.leftArrow:after {
	left:-24px;
}


Собственно говоря, вот и все, встречаем «козырный бубновый тултип»:
image

Для IE просто добавляем PIE, чтобы увидеть красоту (закругленные углы, тени и градиентный фон).

Остался минус — на левой и правой стрелках нельзя показать вертикальный градиент фона тултипа, но это не всегда заметно, а на тултипах с монотонным цветом фона и вообще не минус.

Демо и полный исходник примера
Tags:
Hubs:
+32
Comments 20
Comments Comments 20

Articles