Лучший способ сделать изогнутые тени - PullRequest
Новая
       4

Лучший способ сделать изогнутые тени

13 голосов
/ 02 декабря 2011

Примерно так:

box

Какой самый эффективный способ сделать это?Лучше всего сделать изображение, или есть ли способ добиться этого с помощью CSS без множества хаков / лишней разметки, о которой я не знаю?

Также только тень имеет для работыIE9, FF и Chrome

Ответы [ 3 ]

14 голосов
/ 02 декабря 2011

Вы могли бы сделать это, используя псевдоэлементы и свойство box-shadow.Я сделал пример для вас здесь: http://jsfiddle.net/joshnh/NWnXw/

Это работает в IE9 и выше. 

/* Shadow */

.shadow {
    box-shadow: 0 1px 5px hsla(0,0%,0%,.25),
                inset 0 0 50px hsla(0,0%,0%,.05);
    position: relative;
}
.shadow:after,
.shadow:before {
    bottom: 7px;
    box-shadow: 0 10px 15px hsla(0,0%,0%,.25);
    content: '';
    height: 50%;
    left: 7px;
    max-width: 300px;
    position: absolute;
    right: 7px;
    z-index: -1;
    -webkit-transform: skew(-15deg) rotate(-8deg);
       -moz-transform: skew(-15deg) rotate(-6deg);
        -ms-transform: skew(-15deg) rotate(-6deg);
         -o-transform: skew(-15deg) rotate(-6deg);
            transform: skew(-15deg) rotate(-6deg);
}
.shadow:after {
    -webkit-transform: skew(15deg) rotate(8deg);
       -moz-transform: skew(15deg) rotate(6deg);
        -ms-transform: skew(15deg) rotate(6deg);
         -o-transform: skew(15deg) rotate(6deg);
            transform: skew(15deg) rotate(6deg);
}
6 голосов
/ 02 декабря 2011

Несколько box-shadow с

1 голос
/ 02 декабря 2011

Если вы имеете в виду градиент:

background: -webkit-gradient(linear, top, bottom, from(#73B2F7), to(#6396D6));

background: -moz-linear-gradient(top, #73B2F7, #6396D6);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73B2F7', endColorstr='#6396D6');

Если вы имеете в виду тень, я написал скрипт на python, чтобы создать серию разделителей с шириной, совпадающей с шириной, необходимой для создания полукругов в углу, и центрировать их в контейнере над и под текстом. Smaple в: http://awgwa.com. Тогда вам придется расположить его позади кнопки с градиентом.

...