6 методов создания треугольников

Треугольники встречаются в веб дизайне на каждом шагу: при оформлении подсказок, меню, различных элементов интерфейса и даже для формирования индикаторов загрузки. Нравится кому-то или нет данный факт, но треугольник стал важной частью при построении взаимосвязей между различными частями интерфейса пользователя в единое целое.

Существуют различные методы для построения треугольников и в данном уроке мы рассмотрим их.

 

Закодированное изображение

Подготовленное изображение треугольника лучше всего конвертировать в строку, чтобы сократить количество запросов HTTP.

Полезные инструменты:

Плюсы

  • Можно сделать любой дизайн с помощью теней, градиентов и рамок. А потом просто закодировать изображение.

Минусы

  • Нужно уметь пользоваться инструментом на подобие Photoshop/Gimp для редактирования изображения.
  • Для больших изображений размер строки может быть огромным.
  • Старые браузеры (такие как IE6/IE7) не поддерживают данный тип кодировки.

Рамка CSS

Данный метод очень популярен при создании подсказок и выпадающих меню. Вместе с первым методом они очень подходят для работы с небольшими треугольниками.

Плюсы

  • Легко изменять цвет и размер с помощью значений свойств CSS.
  • Данный метод кросс-браузерный.

Минусы

  • Данная техника использует рамки, поэтому нельзя использовать тени, градиенты и другие прелести СSS3.
  • Нужно помнить, что IE6 не поддерживает прозрачные рамки.
  • При использовании Firefox, значение CSS “transparent” может оказаться непрозрачным, особенно на диагональных рамках.

 

Объект HTML

Данное решение использует символы в кодах Unicode.

Плюсы

  • Кросс-браузерное решение
  • Можно добавлять тени с помощью свойства CSS3 text-shadow.

Минус

  • Кроме text-shadow, никаких других свойств CSS3 использвоать нельзя.
  • Нельзя получить точное пиксельное положение во всех браузерах.

Полезный инструмент:

Кроме того, можно использовать шрифт с иконками в проектах, чтобы получить символ треугольника.

 

Повернутый квадрат CSS

Для работы данного метода требуется два блока. Но можно использовать элемент с псевдо-элементами.

  • Создаем квадрат, например, 100×100 px – содержание поворачиваемого блока.
  • Поворачиваем блок на 45 градусов для формирования образа алмаза.
  • Сдвигаем алмаз вверх и устанавливаем свойство overflow: hidden для внешнего блока, чтобы выводить только половину.
  • Готово!

Плюсы

  • Можно использовать свойства CSS3 для создания нужного образа.

Минусы

  • Данное решение не является кросс-браузерным из-за использования трансформаций CSS3.

 

Элемент canvas HTML5

В разметке HTML помещаем элемент canvas:

<canvas id="triangle" height="100" width="100">Triangle</canvas>

И с помощью JavaScript рисуем треугольник:

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
 
context.closePath();

context.fillStyle = "rgb(78, 193, 243)";
context.fill();

 

SVG (Scalable Vector Graphics)

Вот как можно определить встроенный в разметку треугольник SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
  <polygon points="0,0 100,0 50,100"/>
</svg>

И добавляем для него стили:

.svg-triangle{
	margin: 0 auto;
	width: 100px;
	height: 100px;		
}		

.svg-triangle polygon {
	fill:#98d02e;
	stroke:#65b81d;
	stroke-width:2;
}

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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

6 методов создания треугольников | | 2012-09-13 04:08:37 | | Статьи Web-мастеру | | Треугольники встречаются в веб дизайне на каждом шагу: при оформлении подсказок, меню, различных элементов интерфейса и даже для формирования индикаторов загрузки. Нравится кому-то или нет данный | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: