hautamaki Nov 23 2011 at 16:35

Реалистичные тени при помощи CSS3 без использования изображений

7 min

143K

CSS*

+243

Comments 58

Sytrus Nov 23 2011 at 16:46

Нельзя было сюда все примеры выложить?

hautamaki Nov 23 2011 at 16:49

Можно. Если настаиваете, выложу все.

Sytrus Nov 23 2011 at 16:51

Приятнее было бы видеть все здесь, а не ходить по ссылке, тем более вдруг она когда-нибудь станет битой, а тут сохранится наверняка.

hautamaki Nov 23 2011 at 16:53

Значит, ждите ответа, ваш звонок очень важен для нас :)

Sytrus Nov 23 2011 at 17:03

Спасибо. Позвонить правда наверное в ЛС надо было.

IkaR49 Nov 23 2011 at 16:47

А у меня нет иллюзии приподнятых уголков, скорее опущенная тень…
Но всё равно за статью спасибо, думаю пригодится.

UFO just landed and posted this here

IkaR49 Nov 23 2011 at 17:07

Да нет, старый добрый Samsung SyncMaster 152T уже лет 7-8 он мне служит верой и правдой.

hautamaki Nov 23 2011 at 17:02

UPD: Выложил все примеры

ainu Nov 23 2011 at 17:21

А есть список совместимых браузеров?

hautamaki Nov 23 2011 at 17:26

Как-то так:

-1

homm Nov 23 2011 at 19:00

И причем тут селекторы?

Deenamo Nov 23 2011 at 23:44

похоже, это насчет осла человек пошутил

Deenamo Nov 23 2011 at 23:45

Ок, я тоже тормоз :)

hautamaki Nov 23 2011 at 17:28

Ну и торможу же я :(
Вот так: http://www.findmebyip.com/litmus/, само собой. Предудущее можете заминусовать.

+12

homm Nov 23 2011 at 19:01

Ок, я тоже тормоз :)

homm Nov 23 2011 at 19:06

Я бы кстати дал такие ссылки:
caniuse.com/#search=transform
caniuse.com/#search=shadow

Там вверху есть цифра Support: 65.09%.

casualuser Nov 25 2011 at 01:07

можно узнать, какие еще качественные ссылки с цифрами есть тематические?

и можно даже еще и с буквами и не только про css, но web/mobile в целом =)

стихийный флэшмоб-соцопрос внезапно зародился — дюжина самых важных ресурсов про web/mobile от каждого активного хабрера

merkator Nov 23 2011 at 17:22

Думаю, пригодится, спасибо за примеры!

ukku Nov 23 2011 at 17:27

было бы еще отлично рассказать про это свойство :)

hautamaki Nov 23 2011 at 17:29

Не для копипасты. Но тема для следующего топика :)

aTei Nov 23 2011 at 18:06

А какая ситуация с производительностью?

Например, если взять галерею из 27 картинок и к каждой применить тень «Приподнятый бокс».

kyrie Nov 23 2011 at 18:49

Слабенькие компы сдохнут, можете даже не сомневаться. Как раз сейчас занимаюсь разработкой интерфейсов под всякие терминалы, там относительно слабые процы стоят.

annsar_012 Nov 23 2011 at 20:42

box-shadow начинает тормозить галерею из 12 картинок. Если пытаться добавить еще и CSS3-анимацию для картинок, то особенно заметно.

Softlink Nov 23 2011 at 20:42

Интересно, а зачем z-index: -2? Насколько я помню, -1 уже гарантирует нам то, что псевдоэлемент будет «под блоком», не?

eatart Nov 23 2011 at 20:51

неплохо

ArturSitnikoff Nov 23 2011 at 21:11

Как всегда IE все обламывает.

Хочу в будущее, года на 2-3 вперед, может там с кроссбраузерностью попроще обстоят дела. А еще больше хочу кого-нибудь ударить… чтоб его…

kichik Nov 23 2011 at 22:02

Что значит обламывает? Все примеры работают в IE9+.

ArturSitnikoff Nov 24 2011 at 00:53

Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий, там же еще и .div:hover не работает, что тоже добавляет «радости».

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

MTonly Nov 24 2011 at 04:19

там же еще и .div:hover не работает

Что значит не работает? Какой у вас DOCTYPE?

Hellcunt Nov 24 2011 at 19:46

«Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий»

Очень плохо =/ Не нужно картинок, это лишние запросы к серверу.

В ie можно сделать нативные тени и круглые углы — css3pie.com/

olegsuv Nov 25 2011 at 03:49

А зачем добиваться красивых теней для ИЕ? Ну будут стандартные прямоугольники, кто умрет?
В хороших браузерах хорошее отображение, в плохих — плохое.

Hellcunt Nov 25 2011 at 03:58

Согласен, но если сгруглить углы и добавить красивые тени для 14% пользователей (ie8) занимает 10 минут — я не обламаюсь, сделаю :)

olegsuv Nov 25 2011 at 13:57

А я обламаюсь. Если в жизни человек вместо авто-внедорожника берет велосипед с квадратными дорогами, то зачем для него делать дорогу не ровную, а полукругами?

Hellcunt Nov 25 2011 at 14:03

Согласен, но я люблю посетителей сайтов, которые делаю, и уважаю их выбор.

Тем не менее на ie6 и очень часто на ie7 эта любовь уже не распространяется.

olegsuv Nov 25 2011 at 14:19

А вы не думали о том, что, возможно, их выбор — сайты без скругленных углов, теней, поворотов и прочих благ CSS3? Таким образом, вы навязываете им новые технологии.

Hellcunt Nov 25 2011 at 14:20

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

olegsuv Nov 25 2011 at 14:33

У вас сделан сделан использованием только не утвержденных свежих наворотов?
Я, может быть, не гуру верстки, но мои сайты вполне прекрасно смотрятся в современных браузерах. Просто использую общепринятые теги и свойства (text-shadow, border-radius) и не заморачиваюсь с хаками.

invidia Nov 24 2011 at 12:26

а вдруг там пустыня и нет не то что ИЕ, а даже электричества? )

EvgeniyLazarev Nov 23 2011 at 22:26

Как же ужасно рендерится повернутый текст :(

kotia Nov 23 2011 at 23:37

2005:
«Как добавить закругленные уголки в CSS2 не используя изображений»

2011:
«Как сделать реалистичную тень в CSS3 без использования изображений»

2017:
???

Serator Nov 23 2011 at 23:49

2017: как сделать реалистичную тень в CSS4 на столе :)

GKelpi Nov 24 2011 at 06:50

Шекспир уже все написал

r00tGER Nov 24 2011 at 01:38

Как сделать [что-то].....(IE6 совместимо)

-1

hautamaki Nov 24 2011 at 14:37

2035: «… и только радиоактивный снег падал на безжизненную поверхность планеты...»

Serator Nov 23 2011 at 23:44

www.rusdigi.org/css3/css3-dlya-nachinayushhikh-chast-5-1-drop-shadow-prostye-primery.html с датой от 1-го мая… + на том же сайте есть и иные примеры — www.css3demos.rusdigi.org/. Поиском пользоваться-то будем?

webmasters_by Nov 24 2011 at 00:24

не плохой ресурс

G__Z Nov 23 2011 at 23:53

Беда в том, что в фотошопе такие тени не нарисуешь без кисточек.

UFO just landed and posted this here

barkalov Nov 24 2011 at 05:29

lens blur

Softlink Nov 24 2011 at 08:18

Самая большая беда в том, что если надо будет увеличить интенсивность теней, цвет, размер, то придется перерисовывать картинку, а в CSS3 надо поменять всего несколько цифр.

G__Z Nov 24 2011 at 12:14

я это и подразумевал

AlexTikhonov Nov 24 2011 at 13:31

Гм… а ка-кто по исходникам не могу найти как фон сделан такой красивый с затемнением к краям. Можно в двух словах для слепых? :)

hautamaki Nov 24 2011 at 14:15

Из первого примера. Внутренняя тень. box-shadow с параметром inset.

.lifted {
        position:relative;
        width:40%;
        padding:1em;
        margin:2em 10px 4em;
        background:#fff;
        border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-border-radius:4px;
 
}