 |
Категория: Веб-мастерство |
| Название: Как создавать треугольные формы | |
| Дата добавления: 14-09-2012 | |
| Раз просмотрено: 692 | |
| Комментарии: 0 | |
Рейтинг:  (0 голосов) |
Как создавать треугольные формы
Треугольные формы встречаются в элементах дизайна сайта очень часто. Наверняка вы видели их на всплывающих подсказках, выпадающих списках и на индикаторах загрузки. Нравится нам это или нет, эти небольшие элементы имеют весьма важное значение при дизайне и создании элементов пользовательского интерфейса.
Есть несколько различных способов создания треугольников для дизайна вашего сайта, и в этой статье вы прочтете про все возможные способы для этого.
Закодированное изображение
Если что вы уже создали свое изображение треугольника в графическом редакторе и вы хотите сохранить ценный HTTP-запрос, лучшим решением будет конвертировать ваше изображение в строку Base64. Для этой операции, вам наверняка пригодиться онлайн генератор Base64 на моем сайте.
Преимущества:
- Вы можете оформить треугольник по своему усмотрению, используя тени, градиенты, обводку и задний фон, а затем просто закодировать его.
Недостатки
- Вам понадобится такой графические редактор, как Photoshop или Gimp для редактирования изображения.
- Для больших изображений, полученная строка может быть очень большой.
- Старые браузеры, такие как Internet Explorer до 8 версии не поддерживает этот тип кодирования.
CSS границы
Это тоже довольно распространенная техника, используемая во всплывающих подсказках и выпадающих меню. Вместе с предыдущим вариантом, это является одной из самых распространенных техник создания треугольников.
Преимущества
- Легко изменять цвет и размер, регулируя некоторые CSS значения.
- Это кросс-браузерное решение.
Недостатки
- Этот метод основан на использования границ, поэтому вы не сможете добавлять тени, градиенты и другие популярные новшества CSS3.
- Имейте в виду, что Internet Explorer 6 не поддерживает прозрачные границы.
- В Firefox есть некоторые баги с отображением прозрачных диагональных границ.
HTML символы
Этот способ основан на использовании символов из доступного списка символов в Unicode. Вы можете вставлять в документ треугольники в виде этих символов: ►, ◄, ▼ и ▲. Их HTML мнемоники: ►, ◄, ▼ и ▲ соответственно.
Преимущества
- Это кросс-браузерная техника.
- Вы можете добавить тень к треугольнику с помощью CSS3 свойства
text-shadow.
Недостатки
- Опять же, вы не можете использовать слишком много CSS3 свойств, за исключением
text-shadow. - Совершенно невозможно достичь по пиксельной точности треугольника во всех браузерах.
Помимо использования символа треугольника, вы можете использовать символ стрелки, если вы уже используете шрифт с иконками в вашем проекте.
Квадрат, повернутый с помощью CSS
В принципе, для работы этого метода, вам необходимо два блока. Но использовать два элемента не обязательно, так что вы можете использовать один элемент с псевдо-элементом.
Создайте контейнер размером, например, 100 × 100 пикселей — он будет содержать повернутый блок. Поверните его на 45 градусов, чтобы получить ромбовидную форму. Сдвиньте ромбовидную форму к верху и установите свойство overflow: hidden, чтобы скрыть ненужную нам часть ромба.
Преимущества
- Возможно использовать CSS3 свойства, такие как тени, градиенты и другие.
Недостатки
- Это решение не является кросс-браузерным, в первую очередь из-за использования CSS3 трансформаций, если только вы не используете такой инструмент, как cssSandpaper.
HTML5 Canvas
Добавьте в ваш HTML файл элемент <canvas> с необходимыми размерами:
<canvas id="triangle" height="100" width="100">Треугольник</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
Вы можете вставить треугольник в вашу HTML страницу при помощи языка SVG. Просто вставьте в необходимое место эту разметку:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="triangle"> <polygon points="0,0 100,0 50,100"/> </svg>
Подробнее об SVG вы можете почитать в статье «SVG на сайтах». Затем, просто добавьте несколько CSS стилей на вашу страницу, которые зададут внешний вид треугольника:
.triangle {
margin: 0 auto;
width: 100px;
height: 100px;
}
.triangle polygon {
fill: #98D02E;
stroke: #65B81D;
stroke-width: 2;
}Это интересно: «Дружественный контент».
Ваш комментарий будет первым.