Как сделать тени для геометрических фигур на CSS?

Question

[black_hawk]

На habrahabr есть пост "Геометрические фигуры на CSS". Как для таких фигур сделать тени?

Answer 1

[Виталий Киренков]

lmgtfy.com/?q=css+%D1%82%D1%80%D0%B5%D1%83%D0%B3%D...

Answer 2

[black_hawk]

Пожалуйста, прежде чем отвечать, попробуйте сами это сделать. box-shadow здесь не подойдет, он понимает фигуру как прямоугольный блок и тень получается тоже прямоугольной.

Answer 3

[iDevArtem]

Так же на habrahabr есть пост "Треугольники с тенью на CSS"

Это то что предложил: @DeLaVega, только в обход гугла =)

Answer 4

[black_hawk]

Как быть с более сложными фигурами? Есть какое-то универсальное решение?

Answer 5

[iDevArtem]

Сами фигуры на CSS - это не универсальное решение... по этому и решение есть не универсальное...

Для Webkit:

-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

Для Firefox:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Для IE:

/* for IE 8 & 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
/* For IE 5.5 - 7 */
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";

В общем ссылка на саму статью.

Небольшой пример для webkit из статьи "Геометрические фигуры на CSS"

Answer 6

[black_hawk]

Спасибо, но, к сожалению, не работает в Opera 12.11

Answer 7

[iDevArtem]

Ясное дело... это же Opera =)

Answer 8

[black_hawk]

А для оперы нет вариантов? =)

Answer 9

[iDevArtem]

В опера 12.11... даже геометрические фигуры отображаются ужасно!

Есть 2 варианта:
1. Удалить оперу
2. Установить версию >= 15.0 (т.к. с 15 версии opera на webkit движке)
=)

Answer 10

[black_hawk]

Не знаю, сейчас делаю верстку, с геометрией все нормально, проблема только с тенями.

Answer 11

[iDevArtem]

Вы серьезно?!



Сглаживание на высоте! =)

Answer 12

[black_hawk]

Про сглаживание не спорю, зато все ровно =)