Създайте меню с диамантена мрежа с помощта на CSS

Както обсъждахме по-рано, можете да създадете курсивно меню, използвайки CSS трансформации. В новата си книга Леа Веру показва как да продължи тази идея по-нататък и да създаде диамантени рамки за картини. Вдъхновени от това, ние създадохме меню, което можете да видите по-долу: няколко активни връзки, подредени като мрежести клетки.

Изображения в диаманти

Стъпка 1: Създайте рамка на картината

Много елементи могат да работят като рамка. Примерът по-горе използва маркер за създаване на изображение с връзка. Елементът на връзката е направен квадрат, като се използва стойност на вграден блок и височина. За по-голяма простота използваните изображения също са квадратни, макар и да не се изискват.

мрежа

Стъпка 2: завъртете рамката

Рамката се завърта на 45 градуса, което завърта както изображението, така и всяко друго съдържание вътре.

диамантена

Стъпка 3: Завъртете изображението, за да компенсирате

Завъртете съдържанието на кадъра обратно с противоположния брой градуси, така че изображението отново да стане квадратно. За целта използваме маркер, а не фонови изображения: поне те все още нямат фонова трансформация.