Створення меню в ромбоподібній сітці за допомогою CSS
Як ми вже розповідали, можна створити похилий меню за допомогою трансформацій CSS. У своїй новій книзі Lea Verou показує, як розвинути цю ідею далі та створити ромбоподібні рамки для зображень. Натхнені цим, ми створили меню, яке Ви можете побачити нижче: кілька активних посилань, розташованих як сітки рабиці.
Зображення у ромбах
Крок 1: Створити рамку зображення
Багато елементів можуть працювати як кадр. У цьому прикладі використовується тег для створення зображення з посиланням. Елемент посилання робиться квадратним за допомогою значення inline-block та завдання висоти. Для простоти зображення, що використовуються, теж квадратні, хоча це і не потрібно.
Крок 2: Повертаємо рамку
Рамка повертається на 45 градусів, при цьому повертається і зображення, і будь-який інший вміст усередині.
Крок 3: Повертаємо зображення, щоб компенсувати
Повертаємо назад вміст рамки на протилежну кількість градусів, щоб зображення знову стало квадратним. Для цього використовуємо тег , а не фонові зображення: вони мають щонайменше поки що немає трансформації фону.
Крок 4: Масштабуємо зображення, щоб воно заповнило собою всю рамку
Квадратне зображення не заповнює ромбоподібну форму, тому трохи масштабуємо його, щоб компенсувати це.
Крок 5: Видаляємо переповнення
Задаємо властивість приховування переповнення елементу, щоб обрізати надлишки зображення за рамкою.
Фонова сітка
Ми хотіли, щоб три посилання були серед інших ромбоподібних зображень. Хоча це можна створити за допомогою HTML і CSS, ми вирішили схитрувати і зробити їх фоновим зображенням за допомогою програми Photoshop.
Це спростило розмітку для меню на прикладі:
Через те, що посилання абсолютно спозиціоновані, блоку класу .pure-container потрібен внутрішній відступ. Повний код CSS:
Як згадувалося вище, у всіх посилань абсолютне позиціонування та використовуються відносні одиниці виміру, так що все меню адаптивне:
Ще використовуються media queries, щоб меню виглядало на маленьких екранах, можете розглянути це в демонстрації на сайті CodePen.