CSS-маски для hover-эффекта

[bay73]

Любопытно, как в этом примере строится маска в виде шестиугольника:

В моей опере частично видна граница последнего из прямоугольников.

[jaguard]

Превосходные примеры. Первый сайт из ссылки показывает только самый первый треугольник (остальные остаются черными), второй нещадно тормозит (на топовом макбукпро), четвертый просто не грузится. Хром.

Решение, приведенное в посте, работает лучше, но при этом периодически в какой-то момент промелькивает единственный кадр в котором отсутствует вся разметка. Как раз недавно игрался с -webkit-transform, и тоже замечал этот глюк.

Однако, рановато в продакшн.

[Shirixae]

Первый сайт: все ок, через некоторое время подгружаются все новые и новые треугольники. Видимо, так и задумано. Либо хабраэффект.
Второй сайт: все летает.
Третий сайт/четвертый: не поднимаются, видимо, хабраэффект убил.

Специально ради проверки макбук включал.

[musiquee]

Делал время обратно шаблон как раз таки, на этой же основе:
themeforest.net/item/polygon-one-page-wordpress-portfolio-template/5228642

[nile1]

Делал время обратно шаблон как раз таки

WTF?

[Fr3nzy]

На Google Translate похоже)

[GruZZ]

Уважаемый kizu давно еще игрался с полигонами на CSS3: kizu.ru/fun/polygons/

[keslo]

Отличный урок! Мне одному хочется применить хорошие уроки сразу где-то на деле?)

[nile1]

Чтобы по-разному работало в разных браузерах и тормозило? Лучше применяйте такие «хорошие» уроки где-нибудь в песочнице, а не на деле :)

[keslo]

Мой бокал наполовину полон, нежели наполовину пуст :-)