Анимированное меню в виде сот

[NatalieZ]

Добрый день.

 

Сделала вот такое меню в виде сот http://codepen.io/anon/pen/rGJEI Текста не будет.

Анимация работает только в хроме, т.к. использовала "filter", который поддерживается лишь в этом браузере и почему-то замыливает фотографии. Это была проба фильтра, в дальнейшем добавлю фиксы этого для всех браузеров, которые нашла на просторах интернета. Но вопросы немного в другом:

 

1. Думала просто подтянуть чб картинки вместо фильтра, но таких картинок слишком много на нескольких страницах и есть ли в этом вообще смысл? Если оставлять фильтр, то как убрать замыленность?

 

2. Возникла проблема при переносе этого куска в основной код. В фоне страницы - картинка, которая как и сайт имеет фиксированную высоту и и ширину и при переносе потерялись границы сот, которые были созданы как дополнительный блок шестигранника чуть большего размера и сплошного цвета с меньшим индексом. Добавила чуть меньший индекс wrapper-у с картинкой. Проблема осталась. Попробовала решить ее другим способом. Добавила еще один блок с фоновой картинкой, относительным позиционированием и меньшим индексом. Основной блок подняла на высоту картинки. http://codepen.io/anon/pen/JiKyk Но мне это решение не очень по душе. Какие могут быть еще варианты?

 

3. И последний вопрос. Это самый простой вариант создания сот, в том числе с границами, но тут возникла проблема с блоками шестигранников, как с ссылками. Если добавить outline классу .hexagon, в коде выше, можно увидеть что блоки находят друг на друга, и, соответственно, зона ссылки одного блока немного наезжает на соседний. Индексами проблему не решить. Пробовала сделать по этому принципу http://www.dejurka.ru/css/hexagon_shapes_with_pure_css3/ , Границы блоков на месте, но при таком способе нет возможности добавить блоку тени по всему периметру, которые нужны в другом месте верстки. Нашла такой вариант http://codepen.io/brenna/pen/hbDqL но SASS мне пока незнаком, и при попытке переделать в обычный css, подставляя просчитанные значения, привел к потере целостности картинки. Видимо, какой-то мелкий нюанс не учла, хотя писала методично. Есть ли какая-нибудь возможность по-другому создать шестигранник с картинкой, границей и тенями?

 

Всем заранее большое спасибо.

 

upd: был предложен вариант с маской для картинок, как упрощенный вариант, но хотелось бы все-таки поворотами.

Edited December 5, 2013 by NatalieZ

[SelenIT]

при попытке переделать в обычный css, подставляя просчитанные значения

А почему бы просто не скопировать готовый CSS из исходника фрейма с результатом, предварительно подредактировав величину тени и границы и подставляя нужные $size, $background и т.п. при вызове миксина?

[NatalieZ]

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

Спасибо большое.