Информация, сортированная по тегам

Previous Entry Share Next Entry
Шестиугольные, шестигранные ссылки
hellokitty, hellowin
infotags

Как создать шестигранные или шестиугольные ссылки? Очевидного решения сходу не нашел, долго рылся, ковырялся, пытался сделать тегом <map>, но всё же вернулся к современным технологиям, в результате получилось такое.

Живой пример: http://jsfiddle.net/6xNya/1/

Описание метода:

Внутри ссылки делаем 2 блока span и прокрутим их вокруг центра на 60 и -60 градусов. В результате у нас получится шестигранник. Но фоновое изображение тоже провернётся вместе с блоками. Чтобы это исправить - для внутренних блоков создадим псевдоэлементы ::after и провернём их обратно на -60 и 60 градусов, в изначальное положение. При этом псевдоэлементы должны быть заведомо больше самих блоков, чтобы полностью перекрыть фоновое изображение блоков, а у самих блоков нужно скрывать выступающий за пределы контент стилем overflow:hidden.

Дабы не вспоминать тригонометрию - сразу скажу, что размер ссылки должен быть пропорциональным 100х173 пикселя, а фоновое изображение для такой ссылки - 200х200 пикселей (так же диаметр круга, в который впишется шестиугольник ссылки будет 200 пикселей). Для ссылок других размеров измерьте ширину шестиугольника (в данном случае - 173px) и пропорцией рассчитайте два других размера: высоту ссылки и ширину/высоту фонового изображения.

HTML-код, всё просто, делаем 3 ссылки, которые будут располагаться в виде сот. Ссылки в данном случае позиционируются абсолютно, потому для них нужна обёртка со стилем position:relative.

<a href="#" class="hex link1"><span class="s1"></span><span class="s2"></span>Ссылка 1 - сетка</a>
<a href="#" class="hex link2"><span class="s1"></span><span class="s2"></span>Ссылка 2 - котик</a>
<a href="#" class="hex link3"><span class="s1"></span><span class="s2"></span>Ссылка 3 - Hello Kitty</a>

Теперь CSS. Следующий блок кода всегда неизменный (разве что вам не нужны бордеры, придётся их убрать и обнулить стили left).

.hex,
.hex span { display:block; position:absolute; -moz-box-sizing:border-box; box-sizing:border-box; border-left:1px solid transparent; border-right:1px solid transparent;}
.hex { text-indent:-9000px;}
.hex span { left:-1px; top:0; background:inherit; overflow:hidden;} /* left:-1px - учитываем толщину левого бордера */
.hex span.s1 { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); transform:rotate(60deg);}
.hex span.s2 { -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); transform:rotate(-60deg);}
.hex span.s1::after,
.hex span.s2::after { content:''; position:absolute; left:-1px; background:inherit;}
.hex span.s1::after { -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); transform:rotate(-60deg);}
.hex span.s2::after { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); transform:rotate(60deg);}
.hex:hover { z-index:2;} /* приподымаем ссылку, чтобы бордеры не перекрывались соседними ссылками */

Далее - указываем размеры наших ссылок и цвет бордеров в обычном состоянии и при наведении. Стиль top:-50px - половина высоты ссылки.

.hex,
.hex span,
.hex span.s1::after,
.hex span.s2::after { width:173px; height:100px;}
.hex span.s1::after,
.hex span.s2::after { top:-50px; height:200px;}
.hex,
.hex span { border-color:#f00;}
.hex:hover,
.hex:hover span { border-color:#0f0;}

И прописываем позицию и фоновый рисунок для каждой ссылки:

.link1 { left:20px; top:70px; background:url(http://img-fotki.yandex.ru/get/9300/73201501.0/0_ceb50_c519bb02_M.png) no-repeat center center;}
.link2 { left:193px; top:70px; background:url(http://img-fotki.yandex.ru/get/9762/73201501.0/0_ceb9a_6983bdda_M.jpg) no-repeat center center;}
.link3 { left:106px; top:170px; background:url(http://img-fotki.yandex.ru/get/9493/73201501.1/0_ceb9b_f1edb106_M.jpg) no-repeat center center;}

Левую позицию каждой следующей ссылки высчитываем прибавляя ширину ссылки (173px) и отнимая 1px чтобы бордеры налезли один на другой.

Верхнюю позицию каждого следующего ряда ссылок высчитываем прибавляя полторы высоты ссылки (100*1,5=150px) и отнимая один пиксель, а левая позиция первой ссылки - половина ширины ссылки -1px.

ff ie FireFox и Internet Explorer немножко смазанно отображают фоны с четкими границами, но фотографии более или менне сносно.

Пользуйтесь наздоровье.


?

Log in

No account? Create an account