Pull to refresh

Comments 48

UFO landed and left these words here
По Вашим картинкам разницу blur и spread не понять. Замените картинку для последнего
Ну автор к тому же как-то запутанно объяснил, spread лучше заменить на size. Да, это просто увеличение тени. Которое, кстати, может быть отрицательным.

Кстати по CSS теням есть ещё прекрасная статья: mainview.ru/programming/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij
Смотрю на заголовок и думаю — блин, ну как можно написать целую статью про параметр inset? Потом читаю заголовок оригинальной статьи — Inner Shadows in CSS: Images, Text and Beyond — и всё становится понятно.

Поправили бы заголовок, что ли…
UFO landed and left these words here
Нѣтъ.

Вы же видели скриншот с сайта caniuse.
Я и сейчас его вижу без легенды.
UFO landed and left these words here
Примерно 3 месяца назад искал как сделать внутренние тени в тексте, тогда «background-clip: text» работал только в webkit'е.
Только что проверил в 15-ом FF, до сих пор не работает, равно как и в IE9.

До сих пор решается только с помощью SVG или canvas :(
UFO landed and left these words here
UFO landed and left these words here
Спасибо, за интересные примеры.

Но, к кожалению в моём случае оба не применимы, т. к. на фоне градиент, а внутри glow + shadow.
мне было бы стыдно писать такие элементарные статьи на хабр
Зря вы так. Будет новичок обучаться верстке, начнет искать мануалы и примеры по разным эффектам — а тут на каждый случай хабрастатья имеется. Это гораздо удобнее чем просматривать разношерстные форумы в поисках нужной информации.
И получится в итоге, что если такой статьи нет на хабре — значит это невозможно в принципе.
да миллион статей уже похожих!
А теперь как сделать тень когда размеры изображения не известны?

Зы. Недавно задавал вопрос.
UFO landed and left these words here
Интересный эффект можно получить: размытые края
А то я такое делал в paint.net :( для большого количества картинок в мануале…
а за что минусы? не оффтоп вроде бы…
Видимо, кто-то очень не любит ссылки на юкоз :)
UFO landed and left these words here
Кажется, аккуратнее и правильнее на картинку накладывать тень используя псевдоэлемент :after
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
Активно пользую тени в проектах.
Очень удобно.
Надеюсь градиенты тоже скоро включат в поддержку браузеров.
Не переживайте, вместе с этим выпустят плагины/дополнения/патчи для отключения градиентов и прочих высеров дизайнеров, будут свои NOGradients / GradientBlock и тому подобные.
Пока градиенты тормозят при скролле страницы. Особенно, если их много.
Не думаю что тормозят больше, чем те же тени (которые приходится использовать для градиентов).
Наоборот, тени довольно тормозной эффект и более того не постоянен (опера и лиса рисуют его так, а вебкиты рисуют иначе).
По личным тестам скролла — сильнее. Тени (если они не на летающем div'е) тормозят в разы меньше
Потому что использовать градиенты умеет примерно 0.01% дизайнеров, у остальных выходит вырвиглазное говно и желание побыстрее закрыть этот градинтный ужас. Тормоза и все остальное — дело вторичное.
UFO landed and left these words here
Проверить поддержку background-clip браузерами можно на caniuse.
Неплохо было бы уточнить что значение text свойства поддерживается только в WebKit
UFO landed and left these words here
А 10 лет назад уже было такое: «сделаю, только работать будет только в IE»
UFO landed and left these words here
Ну с одной стороны да, но с другой стороны 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 вариант, конечно, очевиднее.
UFO landed and left these words here
Да, пожалуй вы правы.

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

background-clip: mask(...)
Firefox хер положил на background-clip.
(не работает).
UFO landed and left these words here
Only those users with full accounts are able to leave comments. Log in, please.