Главная > Образование и Изучение > Создаем треугольные фигуры
Создаем треугольные фигуры9 октября 2012, 11:45. Разместил: Design FactoRy |
Вы можете встретить треугольники где угодно: формы подсказок, выпадающие меню и даже в анимации загрузки. Нравятся они вам или нет, эти маленькие элементы крайне важны для создания взаимосвязи между различными элементами пользовательских интерфейсов. Есть несколько разных способов создать треугольники в веб-дизайне, и в нашей сегодняшней статье мы поговорим именно об этом. * Смотреть демо Кодированное изображение Предположим, что вы уже создали собственное изображение в виде треугольника и хотите сэкономить значимый HTTP-запрос. Тогда вам как раз подойдет вариант с конвертированием его в 64-битную строку. Полезные инструменты: * http://webcodertools.com/imagetobase64converter * http://image2base64.wemakesites.net/ Преимущества * Вы можете использовать их как угодно, применять тени, градации, полосы и так далее. Недостатки * Для редактирования этого изображения вам понадобятся графические редакторы вроде Photoshop/Gimp. * Большие изображения могут иметь серьезный вес. * Старые браузеры вроде IE6-7 не поддерживают этот тип кодировки. CSS-границы Наряду с предыдущим вариантом, этот метод больше всего нам нравится – он позволяет легко создавать маленькие треугольники. Преимущества * Легко изменять цвет и размер, при помощи CSS-значений. * Кросс-браузерное решение Недостатки * Данный метод заключается в использовании границ, поэтому вы не сможете добавлять тени, градации и другие причуды CSS3. * Помните, что IE6 не поддерживается прозрачные границы. * Если вы используете Firefox, то будьте готовы к тому, что параметр transparent не будет прозрачным, особенно у диагональных границ. Изучить данную тему подробнее можно здесь. HTML-элемент Если вы читали наши предыдущие статьи, то вероятно уже знаете, как работает данный метод. Он основан на использовании символов из доступных списков кодировок. Преимущества * Кросс-браузерное решение * Вы можете добавлять тени при помощи CSS3-параметра text-shadow. Недостатки * Опять же, здесь вы не сможете использовать многие CSS3-параметры. Точнее, сможете использовать только text-shadow. * Вряд ли у вас получится добиться идеальной четкости во всех браузерах. Не забудьте ознакомиться с этим замечательным ресурсом: http://copypastecharacter.com/. Кроме использования элемента, если вы уже используете иконический шрифт в вашем проекте, то можете просто использовать символ стрелочки из доступных шрифтов. Перевернутый многоугольник в CSS3 В целом, для того, чтобы этот метод сработал, вам потребуется 2 блока. Но нам не обязательно использовать два элемента, так что вы, к примеру, можете использовать псевдо-элемент. * Создайте блок размером 100х100 – он будет содержать перевернутый блок. * Переверните внутренний блок на 45 градусов для того, чтобы у вас получилась форма бриллианта. * Сместите форму бриллианта вверх, а затем выставьте параметр overflow: hidden, чтобы отображалась только нужная нам часть. * Готово! Преимущества * Возможность обыграть градации и тени блоков посредством CSS3. Недостатки * Данное решение не является кросс-браузерных, прежде всего из-за параметра CSS3 transform. Конечно же, если вы не зашли дальше и не использовали cssSandpaper. HTML5 Canvas Имея в своем HTML-файле следующий элемент:
…вы можете рисовать треугольники при помощи javascript:
SVG (Scalable Vector Graphics) Давайте рассмотрим, каким образом вы можете определять строчные SVG-треугольники в своей разметке:
Затем просто добавьте немного стилей:
* Смотреть демо В завершение Вынуждены признаться, что мы не сильно изучили два последних пункта: canvas и SVG. Пожалуй, оставим это на будущее. В любом случае, таким образом вы сможете создавать гораздо более привлекательные треугольники. Пожалуйста, поделитесь своими мыслями в комментариях. Вернуться назад |