Як зробити красиві мітки (теги) для сайту тільки за допомогою css3
Привіт, дорогі Новомосковсктелі блогу. Сьогодні хочу розповісти Вам як зробити красиві теги (мітки) тільки за допомогою CSS3.
Теги - це один з найбільш Важливих етапів в навігації на сайті. Здавалося б хто цими мітками користується, і навіщо вони взагалі потрібні? Я говорю Вам, потрібні. Я недавно помітив, що якщо я заходжу на який-небудь сайт то шукаю відразу ці теги. За допомогою їх дуже зручно орієнтуватися на сайті, легше знайти те що шукаєш. Одним словом це друге меню сайту, тільки більш докладний.
А ось якщо вони ще й гарні, тоді взагалі супер, так і хочеться натиснути на них :-)
Ось і ми сьогодні будемо робити подібне для нашого сайту. А ще додамо небагато анімації, щоб взагалі ефектно виглядало. Анімацію ми взяли тут. Хочу сказати, що теги робити будемо тільки на CSS, а це значить, що немає зображень і завантаження, природно, швидше.
Хотілося б додати, що в исходниках є три приклади. Але на практиці ми розглянемо тільки один. Чому? Тому що в двох прикладах змінений тільки колір, там все дуже просто, і проблем з цим виникнути не повинно. Ну ладно, давайте вже будемо робити.
Приклад ι Cкачать вихідні
Для початку потрібно задати клас для міток, робиться це за допомогою звичайних тегів
Як бачите ми відразу поставили клас нашим майбутнім мітках - tagcloud. Тепер давайте зробимо красивий вид з допомогою стилів.
Сам список зроблений шириною в 300 пікселів. Природно Ви можете зробити ширше або вже для Вашого сайту. А також розмір шрифту. відступи і т.д. все можна налаштувати.
Колір можна змінити за допомогою background: в даному випадку колір # 333. Також можна налаштувати колір при наведенні в класі .tagcloud a: hover, в даному прикладі background-color: # FF6766;
Тепер найцікавіше - анімація при наведенні. Плавна зміна кольору і плавний нахил задається за допомогою transition:
Ці параметри ви можете змінити в секундах, швидше або повільніше.
А сам нахил мітки задається за допомогою transform:
5deg - це 5 градусів вправо, а -5deg - це п'ять градусів вліво. Природно це значення Ви можете змінити на більший чи меньшое.
Хочу сказати, що дані мітки не працюють в ИЕ. І нічого з цим поробити не можна.