Наклонени Изображения - CSS

[dreamteck]

Здравейте!
Първо, извинявам се, ако има подобна тема вече, но колкото и пъти да ползвам търсачката във форумите, все не откривам нещо, което да е дори близо до това, което търся - сигурно просто не мога да я ползвам :/

Та: Аз съм гейм дизайнер в един независим екип и имаме един уеб сайт, който съм го скалъпвал просто, за да имаме нещо. Тъй като почнахме да набираме бавно популярност, решихме, че е време да си оправим дизайна и затова почнах да прототипирам разни дизайни. Исках да вържа дизайна с логото ни, което наложи вкарването на доста наклонени елементи и именно от тук идва проблемът ми.

Малка част от хоум страницата ни изглежда така:

И това, ако е на Флаш примерно няма да има проблеми да се направи. Само дето, ние искаме да е изцяло CSS - никакви допълнителни неща освен JS. Въпросът ми е: какви опции имаме да го докараме това да изглежда и работи правилно. Изглеждането е лесно, но по въпросът с кликането (защото тези елементи ще са хиперлинкове) аз лично нямам идея (защото не ми е това работата ).

Едно изключително НЕелегантно решение, което ми идва на ум, е да вкарам множество div-ове, подредени като стълбичка, така че да се получи що-годе форма в този маниер, която да може да се кликне (групата дивове към даденото изображение ще имат еднакъв линк).

Естествено, можем да минем и без тези наклони, но те допринасят много за цялостната визия на сайта ни.

Та може ли да помогнете ? Какви опции имам ?
Благодаря!

 

[IzKuFeLiQqQqQ]

http://css3.bradshawenterprises.com/transforms/ разгледай за scew дали ти върши работа

 

[deam0n]

Първия вариант който се сещам, е да се направи с готова картинка и image map.



Втория вариант е да ползваш transform

transform:rotate(-7deg);
-ms-transform:rotate(-7deg); /* IE 9 */
-webkit-transform:rotate(-7deg); /* Safari and Chrome */

Ето какво направих за 5мин, но ти ще трябва да си го оправиш предполагам : )

http://jsfiddle.net/F2Jqe/

 

[dreamteck]

Oo! Чудесно! И двамата ми дадохте точно това, което ми трябва. Единствено, проблемът е до колко се поддържа това. Тоест, например, ще се отваря ли окей от мобилни устройства - ясно, че по-старите браузъри няма да го отворят. И също така, има ли начин да разбера как ще изглежда това на браузър, който не поддържа transform ? Например, това просто ще се игнорира ли (самия трансформ) или ще даде по-различен ефект.

Вариантът с имидж мапа също ми хареса. Потърсих малко за какво става въпрос и даже намерих тулове, които могат да ми генерират такива. Принципно нямам проблем изображенията да са си такива и да използват имидж мапове, но има един проблем: Виждате как са наклонени и наредени. Това означава, че за да ги сложа, трябва да поставя няколко такива, които се застъпват. Дали ще има проблеми от сорта на това, че застъпените изображения няма да могат да се кликват от застъпващите или нещо такова ?
Говоря за ето това:

Със синьо съм маркирал волюмите на обектите, а червената зона е препокриването им.

Извинявайте, че ви задавам подобни глупави въпроси, но това може ли да бъде проблем, ако се използва image map, и ако да - има ли решение ? Идеята е всичко това да е максимално cross-platform , защото в момента не можем да си позволим да отделим време за разработка на отделна мобилна версия на сайта.

Благодаря!