CSS Text Shadow - CSS-хитрости

Anonim

Обычная тень текста:

p ( text-shadow: 1px 1px 1px #000; )

Множественные тени:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Первые два значения определяют длину смещения тени. Первое значение определяет горизонтальное расстояние, а второе определяет вертикальное расстояние тени. Третье значение определяет радиус размытия, а последнее значение описывает цвет тени:

1. значение = координата X
2. значение = координата Y
3. значение = радиус размытия
4. значение = цвет тени

Использование положительных чисел в качестве первых двух значений приводит к размещению тени справа от текста по горизонтали (первое значение) и размещению тени под текстом по вертикали (второе значение).

Третье значение, радиус размытия, - это необязательное значение, которое можно указать, но не обязательно. Это количество пикселей, на которое растягивается текст, что вызывает эффект размытия. Если вы не используете третье значение, оно обрабатывается так, как если бы вы указали нулевой радиус размытия.

Также помните, что вы можете использовать значения RGBA для цвета, например, 40% прозрачность белого:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )