hautamaki23 ноя 2011 в 12:35

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

7 мин

143K

CSS *

+243

Комментарии 58

Sytrus 23 ноя 2011 в 12:46

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

hautamaki 23 ноя 2011 в 12:49

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

Sytrus 23 ноя 2011 в 12:51

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

hautamaki 23 ноя 2011 в 12:53

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

Sytrus 23 ноя 2011 в 13:03

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

IkaR49 23 ноя 2011 в 12:47

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

НЛО прилетело и опубликовало эту надпись здесь

IkaR49 23 ноя 2011 в 13:07

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

hautamaki 23 ноя 2011 в 13:02

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

ainu 23 ноя 2011 в 13:21

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

hautamaki 23 ноя 2011 в 13:26

Как-то так:

homm 23 ноя 2011 в 15:00

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

Deenamo 23 ноя 2011 в 19:44

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

Deenamo 23 ноя 2011 в 19:45

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

hautamaki 23 ноя 2011 в 13:28

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

homm 23 ноя 2011 в 15:01

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

homm 23 ноя 2011 в 15:06

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

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

casualuser 24 ноя 2011 в 21:07

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

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

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

merkator 23 ноя 2011 в 13:22

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

ukku 23 ноя 2011 в 13:27

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

hautamaki 23 ноя 2011 в 13:29

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

aTei 23 ноя 2011 в 14:06

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

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

kyrie 23 ноя 2011 в 14:49

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

annsar_012 23 ноя 2011 в 16:42

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

Softlink 23 ноя 2011 в 16:42

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

eatart 23 ноя 2011 в 16:51

неплохо

ArturSitnikoff 23 ноя 2011 в 17:11

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

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

kichik 23 ноя 2011 в 18:02

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

ArturSitnikoff 23 ноя 2011 в 20:53

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

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

MTonly 24 ноя 2011 в 00:19

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

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

Hellcunt 24 ноя 2011 в 15:46

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

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

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

olegsuv 24 ноя 2011 в 23:49

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

Hellcunt 24 ноя 2011 в 23:58

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

olegsuv 25 ноя 2011 в 09:57

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

Hellcunt 25 ноя 2011 в 10:03

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

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

olegsuv 25 ноя 2011 в 10:19

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

Hellcunt 25 ноя 2011 в 10:20

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

olegsuv 25 ноя 2011 в 10:33

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

invidia 24 ноя 2011 в 08:26

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

EvgeniyLazarev 23 ноя 2011 в 18:26

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

kotia 23 ноя 2011 в 19:37

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

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

2017:
???

Serator 23 ноя 2011 в 19:49

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

GKelpi 24 ноя 2011 в 02:50

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

r00tGER 23 ноя 2011 в 21:38

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

hautamaki 24 ноя 2011 в 10:37

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

Serator 23 ноя 2011 в 19:44

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

webmasters_by 23 ноя 2011 в 20:24

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

G__Z 23 ноя 2011 в 19:53

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

НЛО прилетело и опубликовало эту надпись здесь

barkalov 24 ноя 2011 в 01:29

lens blur

Softlink 24 ноя 2011 в 04:18

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

G__Z 24 ноя 2011 в 08:14

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

AlexTikhonov 24 ноя 2011 в 09:31

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

hautamaki 24 ноя 2011 в 10: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;
 
}