Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Кнопка-параллелограмм - реально? (https://javascript.ru/forum/xhtml-html-css/29502-knopka-parallelogramm-realno.html)

Freakmeister 30.06.2012 17:29
Кнопка-параллелограмм - реально?
 
Есть задумка сделать ряд кнопок в форме параллелограмма: http://jsfiddle.net/zk39m/10/
Синей областью я выделил то, что кликаться не должно. Но оно кликается. Реально ли сделать ссылку полу-прозрачной под контур картинки?
Пробовал ещё так - один фиг: http://jsfiddle.net/zk39m/8/

Deff 30.06.2012 17:30
Freakmeister,
Делайте мап картой - Пример стрелочкой => http://hostjs-mybb2011.narod.ru/JamoperPost.htm

dmitriymar 30.06.2012 17:34
А CSS 3 не?)

melky 30.06.2012 18:27
и ради этого делать картинку ?!
<style>
#parallelogramm {

    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);

    zoom: 1;
    position: absolute;
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M21=0.0, M12=-1.0, M22=1.0, SizingMethod='auto expand');

    left: 50px; top: 50px;

    background-color: red;
    width: 100px;
    height: 50px;
   
    cursor: pointer;
}
</style>
<div id="parallelogramm" onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div>

Deff 30.06.2012 18:31
melky,
Для пущности нун cursor: pointer; вставить

Ксать - Вопрос: - а пристыковка двух друг другу диагоналями (с раздвигом в пару пиксел) - Проходит ?

melky 30.06.2012 18:32
Цитата:
Сообщение от Deff (Сообщение 185424)
melky,
Для пущности нун cursor: pointer; вставить
та хрен с ним :) щас поставлю

Deff 30.06.2012 18:44 
<style>
.parallelogramm {

    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);

    zoom: 1;
    position: relative;
    margin-left: 12px; 
    float:left;
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M21=0.0, M12=-1.0, M22=1.0, SizingMethod='auto expand');

    background-color: red;
    width: 100px;
    height: 50px;
   
    cursor: pointer;
}
</style>
<body style="padding:23px;">
<div class="parallelogramm" onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div><div <div class="parallelogramm"  onmousedown="this.style.backgroundColor='green'" onmouseup="this.style.backgroundColor='red'"></div>
</body>

Гы - норма
(*melky,
Зато такого нет => http://uploads.ru/?v=0OskH.png

melky 30.06.2012 18:48
Цитата:
Сообщение от Deff
Гы - норма
надо с hasLayout в IE разобраться. этот пример в нём нормально смотрится? мой - да.

щас лень ноут включать :)

Deff 30.06.2012 18:50
Цитата:
Сообщение от melky
этот пример в нём нормально смотрится? мой - да.
Норма ток в Ие нун обертывать в span inline-block для div inline - кривит сдвижку

Freakmeister 30.06.2012 21:48
Протестил трансформ - он искажает background-image, так что для моих целей не вариант.) Завтра буду курить карту.

Deff 30.06.2012 21:56
Freakmeister,
Делайте обманку: подсyнуть отдельно под прозрачный трансформ png-картинку z-index (oм) ниже и position:absolute.

Freakmeister 30.06.2012 23:03
Отличная идея, но я всё-таки попробую карту.) Во-первых любопытно, во вторых кроссбраузерно.

Deff 30.06.2012 23:28
Freakmeister,
Код приведенный melky

melky 30.06.2012 23:32
таки да :) кроссбраузерно. и на разные разрешения пойдёт

... у ТС там картинка в параллелограмме, и она растягивается.

Freakmeister 01.07.2012 00:25
Кроссбраузерно, в моём понимании, это когда работает во всех браузерах, в том числе в старых.

Deff 01.07.2012 00:26
Freakmeister,
Если Вы видите скриншот - то должны видеть ИЕ7 (ИЕ6 - аналогично поддерживается

melky 01.07.2012 01:06
Цитата:
Сообщение от Deff (Сообщение 185514)
Freakmeister,
Если Вы видите скриншот - то должны видеть ИЕ7 (ИЕ6 - аналогично поддерживается
фильтры - IE5.5-IE9 в 10 поддерживается -ms-transform.Freakmeister, вы вообще смотрели мой пример?

Freakmeister 01.07.2012 02:06
Смотрел, но в разных браузерах не тестил. Поддержку смотрел тут:
http://htmlbook.ru/css/transform

Deff 01.07.2012 02:08
Freakmeister,
там же + Для ИЕ
zoom: 1;
position: absolute;
filter:progid:DXImageTransform.Microsoft.Mat


Часовой пояс GMT +3, время: 23:19.