Комментарии 48
По Вашим картинкам разницу blur и spread не понять. Замените картинку для последнего
Ну автор к тому же как-то запутанно объяснил, spread лучше заменить на size. Да, это просто увеличение тени. Которое, кстати, может быть отрицательным.
Кстати по CSS теням есть ещё прекрасная статья: mainview.ru/programming/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij
Кстати по CSS теням есть ещё прекрасная статья: mainview.ru/programming/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij
Смотрю на заголовок и думаю — блин, ну как можно написать целую статью про параметр
Поправили бы заголовок, что ли…
inset
? Потом читаю заголовок оригинальной статьи — Inner Shadows in CSS: Images, Text and Beyond — и всё становится понятно.Поправили бы заголовок, что ли…
Так в IE7-IE8 взлетит или нет?
Примерно 3 месяца назад искал как сделать внутренние тени в тексте, тогда «background-clip: text» работал только в webkit'е.
Только что проверил в 15-ом FF, до сих пор не работает, равно как и в IE9.
До сих пор решается только с помощью SVG или canvas :(
Только что проверил в 15-ом FF, до сих пор не работает, равно как и в IE9.
До сих пор решается только с помощью SVG или canvas :(
Более того, в текущем драфте CSS3 нет никакого упоминания про «text»
До сих пор решается только с помощью SVG или canvas
Недавно сделал внутреннюю тень без SVG/canvas с помощью :after и :before.
Есть еще вариант со множественными значениями text-shadow.
Недавно сделал внутреннюю тень без SVG/canvas с помощью :after и :before.
Есть еще вариант со множественными значениями text-shadow.
мне было бы стыдно писать такие элементарные статьи на хабр
Интересный эффект можно получить: размытые края
А то я такое делал в paint.net :( для большого количества картинок в мануале…
А то я такое делал в paint.net :( для большого количества картинок в мануале…
По секрету, там много интересных эффектов можно получить: ucozerer.ucoz.ru/blog/text_shadow/2011-02-02-9
Кажется, аккуратнее и правильнее на картинку накладывать тень используя псевдоэлемент :after
Активно пользую тени в проектах.
Очень удобно.
Надеюсь градиенты тоже скоро включат в поддержку браузеров.
Очень удобно.
Надеюсь градиенты тоже скоро включат в поддержку браузеров.
Не переживайте, вместе с этим выпустят плагины/дополнения/патчи для отключения градиентов и прочих высеров дизайнеров, будут свои NOGradients / GradientBlock и тому подобные.
Зачем?
Пока градиенты тормозят при скролле страницы. Особенно, если их много.
Не думаю что тормозят больше, чем те же тени (которые приходится использовать для градиентов).
Наоборот, тени довольно тормозной эффект и более того не постоянен (опера и лиса рисуют его так, а вебкиты рисуют иначе).
Наоборот, тени довольно тормозной эффект и более того не постоянен (опера и лиса рисуют его так, а вебкиты рисуют иначе).
Потому что использовать градиенты умеет примерно 0.01% дизайнеров, у остальных выходит вырвиглазное говно и желание побыстрее закрыть этот градинтный ужас. Тормоза и все остальное — дело вторичное.
Проверить поддержку background-clip браузерами можно на caniuse.Неплохо было бы уточнить что значение
text
свойства поддерживается только в WebKitА 10 лет назад уже было такое: «сделаю, только работать будет только в IE»
Уже скоро 5 лет как они их презентовали, а никаких намеков на стандартизацию
www.css3.info/webkit-introduces-background-cliptext/
www.css3.info/webkit-introduces-background-cliptext/
Ну с одной стороны да, но с другой стороны
Determines the background painting area, which determines the area within which the background is painted. The syntax of the property is given with
Почему не определять это по текстовой ноде, лежащей внутри контейнера. В принципе логика здесь есть.
Но через что-то вроде
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
вариант, конечно, очевиднее.Firefox хер положил на background-clip.
(не работает).
(не работает).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Внутренние тени в CSS