Внутренние тени в CSS

[@mikemf]

По Вашим картинкам разницу blur и spread не понять. Замените картинку для последнего

[@Keyten]

Ну автор к тому же как-то запутанно объяснил, spread лучше заменить на size. Да, это просто увеличение тени. Которое, кстати, может быть отрицательным.

Кстати по CSS теням есть ещё прекрасная статья: mainview.ru/programming/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij

[@JhaoDa]

Смотрю на заголовок и думаю — блин, ну как можно написать целую статью про параметр inset? Потом читаю заголовок оригинальной статьи — Inner Shadows in CSS: Images, Text and Beyond — и всё становится понятно.

Поправили бы заголовок, что ли…

[@musuk]

Так в IE7-IE8 взлетит или нет?

[@Mithgol]

Нѣтъ.

Вы же видели скриншот с сайта caniuse.

[@musuk]

Я и сейчас его вижу без легенды.

[@widowmaker]

Примерно 3 месяца назад искал как сделать внутренние тени в тексте, тогда «background-clip: text» работал только в webkit'е.
Только что проверил в 15-ом FF, до сих пор не работает, равно как и в IE9.

До сих пор решается только с помощью SVG или canvas :(

[@widowmaker]

Более того, в текущем драфте CSS3 нет никакого упоминания про «text»

[@Hellcunt]

До сих пор решается только с помощью SVG или canvas

Недавно сделал внутреннюю тень без SVG/canvas с помощью :after и :before.

Есть еще вариант со множественными значениями text-shadow.

[@widowmaker]

Спасибо, за интересные примеры.

Но, к кожалению в моём случае оба не применимы, т. к. на фоне градиент, а внутри glow + shadow.

[@vbilenko]

мне было бы стыдно писать такие элементарные статьи на хабр

[@ValenkiUdushya]

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

[@nekt]

И получится в итоге, что если такой статьи нет на хабре — значит это невозможно в принципе.

[@dima_smol]

да миллион статей уже похожих!

[@tbicr]

А теперь как сделать тень когда размеры изображения не известны?

Зы. Недавно задавал вопрос.

[@jil]

Интересный эффект можно получить: размытые края
А то я такое делал в paint.net :( для большого количества картинок в мануале…

[@Keyten]

По секрету, там много интересных эффектов можно получить: ucozerer.ucoz.ru/blog/text_shadow/2011-02-02-9

[@gleam]

а за что минусы? не оффтоп вроде бы…

[@helarqjsc]

Видимо, кто-то очень не любит ссылки на юкоз :)

[@CAJAX]

Кажется, аккуратнее и правильнее на картинку накладывать тень используя псевдоэлемент :after

[@equand]

Активно пользую тени в проектах.
Очень удобно.
Надеюсь градиенты тоже скоро включат в поддержку браузеров.

[@iFrolov]

Не переживайте, вместе с этим выпустят плагины/дополнения/патчи для отключения градиентов и прочих высеров дизайнеров, будут свои NOGradients / GradientBlock и тому подобные.

[@equand]

Зачем?

[@Dimoniusis]

Пока градиенты тормозят при скролле страницы. Особенно, если их много.

[@equand]

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

[@Dimoniusis]

По личным тестам скролла — сильнее. Тени (если они не на летающем div'е) тормозят в разы меньше

[@iFrolov]

Потому что использовать градиенты умеет примерно 0.01% дизайнеров, у остальных выходит вырвиглазное говно и желание побыстрее закрыть этот градинтный ужас. Тормоза и все остальное — дело вторичное.

[@leshaogonkov]

Проверить поддержку background-clip браузерами можно на caniuse.

Неплохо было бы уточнить что значение text свойства поддерживается только в WebKit

[@iFrolov]

А 10 лет назад уже было такое: «сделаю, только работать будет только в IE»

[@leshaogonkov]

Уже скоро 5 лет как они их презентовали, а никаких намеков на стандартизацию
www.css3.info/webkit-introduces-background-cliptext/

[@leshaogonkov]

Ну с одной стороны да, но с другой стороны background-clip:
Determines the background painting area, which determines the area within which the background is painted. The syntax of the property is given with

Почему не определять это по текстовой ноде, лежащей внутри контейнера. В принципе логика здесь есть.

Но через что-то вроде text-fill вариант, конечно, очевиднее.

[@leshaogonkov]

Да, пожалуй вы правы.

А что вы думаете насчет

background-clip: mask(...)

[@Duke565]

Firefox хер положил на background-clip.
(не работает).