Верстка красивих тегів для сайту бонус
Чудовий дизайнер Orman Clark одного разу представив своїм Новомосковсктелям дуже гарний дизайн хмари тегів. який я використовував на одному моєму сайті. Розповім, як зверстати такі теги для вашого сайту.
Для початку необхідно приготувати заздалегідь довге зображення тега, яке з упевненістю підійде для тегів різної довжини. Я зробив ось таке:
Якби ми при верстці стали враховувати застарілий браузер Internet Explorer 7, то знадобилося б використовувати додатковий вкладений тег:
Однак IE7 ми враховувати не буде, тому на допомогу нам прийде псевдоселектор: after.
Посилання зробимо блокової в рядку, приберемо підкреслення, заборонимо перенесення тексту на новий рядок, додамо тінь для краси, внутрішні відступи зліва і справа і вкажемо фон тега (оскільки ми використовуємо властивість display: inline-block. То довжина блоку з тегом дорівнює довжині тексту, плюс відступи зліва і справа, відповідно права частина фону не буде видно):
Це дає нам наступну картину:
Тепер додамо праву частину фону. Це ми зробимо з допомогою псевдоселектора: after. який дозволяє нам відмовитися від додаткового тега. Позиціонуємо його абсолютно в правій частині тега на всю його висоту і вказуємо праву частину зображення:
І отримуємо потрібний нам результат:
Залишається тільки додати ефект при наведенні курсору на посилання:
Бонус - верстаємо красивий тег на чистому CSS
Сучасні технології дозволяють зверстати такий тег повністю на CSS, не використовуючи при цьому жодного зображення.
Повноцінно це буде виглядати в наступний браузерах: Opera, Google Chrome, Firefox і Safari. В Internet Explorer 9 тег залишиться без градієнта, але такий його зовнішній вигляд все-таки прийнятний. А ось в IE8 і нижче тег виглядає вже неналежно.
Починаємо з правої прямокутної частини. Вказуємо градієнтний фон, задаємо кольору кордонів, додаємо ефекти зовнішньої і внутрішньої тіні для блоку і тінь для тексту, зовнішні і внутрішні відступи (зовнішній відступ справа в 10px вказано для того, щоб залишити місце під трикутник сусіднього тега):
Тепер за допомогою псевдоселектора: before створимо лівий трикутник. Спочатку це квадрат (з тим же самим градієнтом, тільки поверненим на 45 градусів, кордонами і тінню), який далі буде трансформований в трикутник:
Тут варто зазначити, що webkit малює градієнти в зворотну сторону, тому для нього зазначено мінусове значення: -45deg. Крім того, ви можете помітити, що в беспрефіксном властивості градієнта вказані не 45, а 135 градусів. Я не зрозумів в цьому логіки (мабуть, чогось не знаю), але воно тут має бути саме таким для правильно відображення.
Щоб зробити з квадрата трикутник, ми використовуємо властивість transform зі значенням rotate (45deg). Однак цього недостатньо - необхідно також, щоб він мав тупий кут. Дане завдання вирішується шляхом масштабування по осі Y за допомогою значення scale для transform:
В результаті отримаємо майже закінчений дизайн тега:
Залишився останній штрих - зробити дірку в нашому тезі. У цьому нам допоможе ще один псевдоселектор -: after. Просто-напросто створюємо маленький квадрат, у якого закруглюємо кути настільки, що він перетворюється в коло. Ну і для створення ефекту об'ємності додаємо тінь:
Ура! В результаті вийшов практично ідентичний дизайн тега, який зображений в першому зображенні до даного посту:
На завершення, як і в випадку з картинкою, можна додати ефект зміни тексту при наведенні курсору миші.