kichik 23 ноя 2011 в 20:31

CSS3. Работа с тенями. Часть 1

5 мин

68K

Блог компании MicrosoftCSS*

Туториал

+46

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

hautamaki 23 ноя 2011 в 22:07

Эх, оставили меня без темы для следующей статьи :) Придется, видимо, о луковом супе писать.

kichik 23 ноя 2011 в 23:01

Ага, забавное совпадение :)

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

kichik 23 ноя 2011 в 22:59

text-shadow есть в IE10, об этом будет во второй части.

А так соображения чисто практические: востребованность, приоритезация и наличие ресурсов на реализацию в конкетный временной отрезок. В общем, text-shadow не попал в цикл разработки IE9, но уже реализован в рамках работы над IE10.

anarx 24 ноя 2011 в 00:21

А правда ли то, что знаменитое полное аппаратное ускорение не работает в IE 9 64 bit, причём ни полностью, ни частично?

kichik 24 ноя 2011 в 00:26

Насколько я могу судить, аппаратное ускорение графики работает одинаково в обоих версиях.

anarx 24 ноя 2011 в 00:49

На производительности теней я не тестировал, но непонятно почему FishIE Tank так работает (на переднем фоне IE 64 bit, на заднем — 32)

kichik 24 ноя 2011 в 01:03

Странно, а если запустить их по отдельности, а не одновременно? Я знаю, что у них js-движки отличаются, но конкретно в этой демонстрации это не должно сказываться.

hf35 24 ноя 2011 в 08:17

При 1000 рыбках — все упирается уже в js движок.

ShpuntiK 23 ноя 2011 в 22:33

День CSS теней :)

ShpuntiK 23 ноя 2011 в 22:33

Точнее, вечер.

arinoki 23 ноя 2011 в 22:51

Весьма хороший топик. А можно сказать, что из рассказанного поддерживается в ie8 (кажется последний для xp sp3) и ie9?

kichik 23 ноя 2011 в 23:00

Все рассказанное поддерживается в IE9. IE8 box-shadow по понятным причинам не поддерживает.

arinoki 23 ноя 2011 в 23:12

Ясно, спасибо.

danielnewman 24 ноя 2011 в 00:12

Расскажите про прозрачность тени. Что бы она не была как в 3.5 с четкими границами и блёром на, а будто тень — прозраный png.

kichik 24 ноя 2011 в 00:28

Чтобы сделать тень прозрачной, достаточно указать цвет с прозрачностью, например, через rgba(r,g,b,a). В примере 5.2 тени смешиваются между собой.

danielnewman 24 ноя 2011 в 08:57

Да, моя ошибка. Свойство border рисует границу внутри объекта, а не снаружи и прозрачность границы сталкивается с окрашенным фоном. В моем случае была проблема с прозрачностью меню из элементов списка ul/li. Сейчас все стало на места.

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

HEISENBERG 24 ноя 2011 в 08:12

Интересная статья.

Mithgol 24 ноя 2011 в 13:37

Спасибо Корпорации Microsoft за поддержку этих свойств; правда, пользователи WinXP, очевидно, останутся без неё, если не откажутся от Internet Explorer в пользу альтернативного браузера: IE9 и IE10 для WinXP нет и никогда, никогда не будет.

graycrow 24 ноя 2011 в 14:00

Скажите, а градиенты и скругленные уголки уже починили в IE10? А то помню в одном из превью Microsoft ну очень хвасталась этими функциями по-отдельности, но при попытке применить их вместе получался epic fail.

kichik 24 ноя 2011 в 14:11

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

graycrow 24 ноя 2011 в 14:28

А, ну да, сейчас проверил — действительно -ms-linear-gradient и border-radius работает хорошо вместе (тестил в IE10 P2). Но стоит добавить filter для старших версий IE, как все сразу ломается. Я не думаю, что кто-то пишет только под IE10 сейчас, а ставить условные коментарии и искать css хаки чтобы это работало только в определенной версии IE достало, достало, достало, достало. Хак для 6, хак для 7, хак для 8, хак для 9 и хак для 10 теперь, чтобы он не увидел фильтров. Замечательно.

hf35 24 ноя 2011 в 15:40

Проблема в том что когда придумывались фильтры — все блоки на вэб странице могли быть только прямоугольной формы — и фильтры на это и рассчитывали. Само собой что переписывать код фильтров в 9 ИЕ чтобы они работали нормально совместно с бордер радиус никто не стал.

CSS градиенты же вообще штука довольна новая, по сравнению даже с закругленными уголками. Поэтому их и нет в ИЕ9. Зато там есть SVG градиенты — и вот вполне себе удобный инструмент для этого ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

kichik 24 ноя 2011 в 15:58

Проблема в том, что для не нужно для IE9+ делать хаков. Хаки — это зло.

Если вы хотите использовать фильтры, отдавайте их только старым браузерам — это вполне можно сделать через условные комментарии и на этом проблема решится.

Лично мое мнение: даже для старых браузеров не нужно использовать фильтры.

-1

Hellcunt 25 ноя 2011 в 13:39

Хаки для IE можно не использовать, можно просто добавить после doctype:

<!doctype html&#62

<!--[if lt IE 7]&#62 <html class="no-js ie6 oldie" lang="en"&#62 <![endif]--&#62

<!--[if IE 7]&#62    <html class="ie7" lang="en"&#62 <![endif]--&#62

<!--[if IE 8]&#62    <html class="ie8" lang="en"&#62 <![endif]--&#62

<!--[if gt IE 8]&#62<!--&#62 <html lang="en"&#62 <!--<![endif]--&#62

<head&#62

А в css писать — .ie6 div { color: #ff8000; }.

Hellcunt 25 ноя 2011 в 02:47

Мне кажется, этот пост вместо «Microsoft» был бы более уместен в «Каскадные Таблицы Стилей».

Hellcunt 25 ноя 2011 в 02:48

Но за содержание +

worrywort 4 дек 2011 в 08:00

Прекрасно отображается и в Opera 11.52. Правда, когда на странице много элементов типа slick-box с навороченными тенями — начинает заметно подтормаживать при прокрутке.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий