Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

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, так что для моих целей не вариант.) Завтра буду курить карту.


Часовой пояс GMT +3, время: 02:43.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице