6 Методів створення трикутників
Трикутники зустрічаються в веб дизайні на кожному кроці: при оформленні підказок, меню, різних елементів інтерфейсу і навіть для формування індикаторів завантаження. Подобається комусь чи ні даний факт, але трикутник став важливою частиною при побудові взаємозв'язків між різними частинами інтерфейсу користувача в єдине ціле.
Існують різні методи для побудови трикутників і в даному уроці ми розглянемо їх.
закодоване зображення
Підготовлене зображення трикутника найкраще конвертувати в рядок, щоб скоротити кількість запитів HTTP.
Корисні інструменти:
- Можна зробити будь-який дизайн за допомогою тіней, градієнтів і рамок. А потім просто закодувати зображення.
- Потрібно вміти користуватися інструментом на подобу Photoshop / Gimp для редагування зображення.
- Для великих зображень розмір рядка може бути величезним.
- Старі браузери (такі як IE6 / IE7) не підтримують даний тип кодування.
Даний метод дуже популярний при створенні підказок і випадають меню. Разом з першим методом вони дуже підходять для роботи з невеликими трикутниками.
- Легко змінювати колір і розмір за допомогою значень властивостей CSS.
- Даний метод крос-браузерні.
- Дана техніка використовує рамки, тому не можна використовувати тіні, градієнти та інші принади СSS3.
- Потрібно пам'ятати, що IE6 не підтримує прозорі рамки.
- При використанні Firefox, значення CSS "transparent" може виявитися непрозорим, особливо на діагональних рамках.
об'єкт HTML
Дане рішення використовує символи в кодах Unicode.
- Крос-браузерні рішення
- Можна додавати тіні за допомогою властивості CSS3 text-shadow.
- Крім text-shadow. ніяких інших властивостей CSS3 іспользвоать не можна.
- Не можна отримати точне піксельний положення у всіх браузерах.
Корисний інструмент:
Крім того, можна використовувати шрифт з іконками в проектах, щоб отримати символ трикутника.
Повернений квадрат CSS
Для роботи даного методу потрібно два блоки. Але можна використовувати елемент з псевдо-елементами.
- Можна використовувати властивості CSS3 для створення потрібного образу.
- Дане рішення не є крос-браузерні через використання трансформацій CSS3.
Елемент canvas HTML5
У розмітці HTML поміщаємо елемент canvas:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!