Внутренняя тень текста с помощью CSS - PullRequest
Новая
       98

Внутренняя тень текста с помощью CSS

103 голосов
/ 22 мая 2010

Я сейчас играю с CSS3 и пытаюсь добиться текстового эффекта, подобного этому (черная размытая внутренняя тень):

Но я не могу найти способ создать тени для текста внутри текста. Интересно, возможно ли это по-прежнему, потому что элемент box-shadow способен визуализировать тень внутри так: 

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Есть идеи?

Ответы [ 21 ]

5 голосов
/ 01 ноября 2010

Вот ссылка, говорящая о том, как это сделать, это должно быть то, что вы ищете:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

4 голосов
/ 30 октября 2010

Похоже, это работает: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Он использует несколько теней для достижения этого эффекта, как описано здесь: http://www.w3.org/Style/Examples/007/text-shadow#multiple

4 голосов
/ 12 октября 2012

Кажется, у каждого есть ответ на этот вопрос. Мне нравится решение от @Web_Designer. Но он не должен быть таким сложным, и вы все равно можете получить размытую внутреннюю тень, которую ищете.

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}
3 голосов
/ 26 апреля 2012

Опираясь на технику :before :after от web_designer, вот что вам ближе:

Во-первых, сделайте ваш текст цветом внутренней тени (черным в случае ОП).

Теперь используйте класс: after psuedo для создания прозрачного дубликата исходного текста, помещенного непосредственно над ним. Назначьте ему обычную текстовую тень без смещения. Назначьте исходный цвет текста тени и настройте альфа при необходимости.

http://dabblet.com/gist/2499892

Вы не получаете полный контроль над распространением и т. Д. Тени, как в PS, но для меньших значений размытия это вполне сносно. Тень выходит за границы текста, поэтому, если вы работаете в среде с высококонтрастным фоном-передним планом, это будет очевидно. Для менее контрастных предметов, особенно с одинаковым оттенком, это не так заметно. Например, с помощью этой техники я смог сделать очень хорошо выглядящий гравированный текст на металлических фонах.

3 голосов
/ 04 июня 2012

Вот отличное решение для ИСТИННОЙ тени текста со вставкой, используя свойство background3 clip CSS3: 

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
3 голосов
/ 12 марта 2012

Это просто лучший пример, который я видел. http://lab.simurai.com/carveme/

Источник на gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

2 голосов
/ 01 октября 2012

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

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}
1 голос
/ 28 февраля 2014

Попробуйте этот пример для вставки тени текста. Вот HTML 

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

и CSS 

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

<a href="http://jsfiddle.net/prakashup/uQW8L/" rel="nofollow"><strong>Demo on Jsfiddle</strong></a>

0 голосов
/ 16 июля 2012

Есть гораздо более простой способ достичь этого 

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Вуаля

0 голосов
/ 10 июня 2012 
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

для теней: 

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

Вы можете увидеть онлайн текст и поле тени: онлайн текст и поле тени

для получения дополнительной информации вы можете перейти по этому адресу: больше примеров кода freeclup

Страница:
...