Тени у треугольников

C помощью CSS можно создавать треугольники. Но что если нужно иметь тени под ними? К сожалению, классический трюк с рамками не меняет формы элементов, он только создает визуальную иллюзию. Поэтому посмотрим на альтернативные решения.

 

Используем юникод

В юникоде есть символы треугольников:

и еще много разных символов.

С такими символами можно делать все, что угодно.

<span class="triangle">&#9650</span>

 

.triangle {
   color: #BADA55;
   text-shadow: 0 0 20px black;
}

Можно менять цвет, тени, размер и многое другое. Если треугольник не соответствует требуемой форме, то с помощью трансформаций CSS3 его можно растянуть и повернуть.

Данная техника имеет существенный недостаток. Она полагается на трансформации CSS3, которые не имеют хорошей поддержки в браузерах. Кроме того, старые браузеры могут иметь проблемы при отображении самих иконок юникод.

 

Метод двойного элемента

Нужно иметь один элемент со скрытием выступающих частей, в котором будет размещен  другой элемент, который будет повернут смещен относительно первого. Часть будет видима и сформирует треугольник.  Затем можно использовать тени.

<div class="triangle-with-shadow"></div>

 

.triangle-with-shadow {
	width: 100px;
	height: 100px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	background: #999;
	-moz-transform: rotate(45deg);
	top: 75px;
	left: 25px;
	box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}

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

 

Используйте изображения

Испытанный старый метод. Но он дает дополнительные HTTP запросы и требования к управлению спрайтами. Кроме того, для адаптивных шаблонов придется исхитряться.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/R2BZiSy3CBc/lessons.php

Статьи по теме

Дайджест новых статей по интернет-маркетингу на ваш email

Тени у треугольников | | 2012-06-19 11:58:16 | | Статьи Web-мастеру | | C помощью CSS можно создавать треугольники. Но что если нужно иметь тени под ними? К сожалению, классический трюк с рамками не меняет формы элементов, он только создает визуальную иллюзию. Поэтому | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться статьей: