Текст с внутренней тенью с выравниванием посередине

@g0liath · Регистрация: 30.09.2009

Студворк — интернет-сервис помощи студентам

Нашел неплохой метод того, как можно создать эффект внутренней тени для текста:
http://jsfiddle.net/WMVMW/2095/
Однако мне требуется адаптировать данный метод для "text-align: center;", что у меня никак не получается. Может кто-нибудь может помочь?

HTML5
1
<a class="darkAgain" title="Текст Текст Текст Текст">Текст Текст Текст Текст</a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.darkAgain {
    color: #666666;
    position: relative;
    display: block;
    font-size: 4em; 
}
.darkAgain:before {
    content: attr(title);
    position: absolute;
    color: rgba(255,255,255,0.2);
    top: 2px;
    left: 2px;
}

Доктор Зойдберг · 14.12.2013, 19:09

Я что то не понял, или text-shadow?

@g0liath · 15.12.2013, 02:29 **[ТС]**

Свойство text-shadow создает только внешнюю тень. На внутреннюю он не способен.

@Andeangl · 15.12.2013, 11:11

g0liath, а если попробовать отрицательную величину задать? Не разбирался, спрашиваю чисто теоретически =)

@g0liath · 16.12.2013, 18:06 **[ТС]**

Andeangl, где отрицательные величины задать?

Если речь о text-shadow, то там есть три величины: <сдвиг по x>, <сдвиг по y> и <радиус размытия>. Первые две задают координаты тени (будет ли она выше текста или ниже, правее или левее), а третий задает размытие. С их помощью внутреннюю тень не получить.

В том варианте, что предложил я, почти тоже самое. Свойства top и left задают смещение. Только это смещение привязано не к тексту, а к контейнеру и если исходный текст расположить посередине, то эффект теряется, так как внутренняя тень остается у левого края.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	14.12.2013, 19:09
	Я что то не понял, или text-shadow? 0

@g0liath 1 / 1 / 1 Регистрация: 30.09.2009 Сообщений: 20
	15.12.2013, 02:29 [ТС]
	Свойство text-shadow создает только внешнюю тень. На внутреннюю он не способен. 0

@Andeangl 6 / 6 / 2 Регистрация: 18.07.2013 Сообщений: 178
	15.12.2013, 11:11
	g0liath, а если попробовать отрицательную величину задать? Не разбирался, спрашиваю чисто теоретически =) 0

@g0liath 1 / 1 / 1 Регистрация: 30.09.2009 Сообщений: 20
	16.12.2013, 18:06 [ТС]
	Andeangl, где отрицательные величины задать? Если речь о text-shadow, то там есть три величины: <сдвиг по x>, <сдвиг по y> и <радиус размытия>. Первые две задают координаты тени (будет ли она выше текста или ниже, правее или левее), а третий задает размытие. С их помощью внутреннюю тень не получить. В том варианте, что предложил я, почти тоже самое. Свойства top и left задают смещение. Только это смещение привязано не к тексту, а к контейнеру и если исходный текст расположить посередине, то эффект теряется, так как внутренняя тень остается у левого края. 0