text-shadow касиети

text-shadow касиети текстке көлөкө берет. Маани катары ал касиет боштук менен бөлүнгөн 4 параметрди же эч кандай көлөкө бербей турган (демейки мааниси) none ачкыч сөзүн кабыл алат.

Синтаксис

cssселектор {
  text-shadow: x_жылыш y_жылыш чачыроо түс;
}
cssселектор {
text-shadow: none;
}

Параметрлер

Параметр Сүрөттөмө
x жылыш X огу боюнча көлөкөнүн жылышын аныктайт.
Оң маани оңго, терс маани солго жылышат.
y жылыш Y огу боюнча көлөкөнүн жылышын аныктайт.
Оң маани ылдый, терс маани жогору жылышат.
чачыроо Көлөкөнүн чачыроо даражасын аныктайт.
Мааниси канчалык чоң болсо, көлөкө ошончолук чачыраак болот.
Милдеттүү эмес параметр. Берилбесе, көлөкө так болот.
түс Көлөкөнүн түсүн каалаган түс бирдиктеринде аныктайт.
Милдеттүү эмес параметр. Берилбесе, көлөкөнүн түсү тексттин түсү менен дал келет.

Октор боюнча жылыштар жана чачыроо пайыздардан башка каалаган өлчөм бирдиктеринде белгиленет.

Мисал

Келгиле, көлөкөнү ылдый жана солго жылдырып, кичинекей чачыроо кошолу:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

Мисал . Так көлөкө

Эми көлөкөнү кызыл түскө айландырып, ылдый жана солго жылдыралы, бирок чачыроону алып салалы - көлөкө так болот:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-shadow: 10px 10px red;
}

Результат:

Мисал . Тегиз көлөкө

Азыр көлөкө жылышпаган, бирок ага чачыроо кошулган:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

Ошондой эле караңыз

  • box-shadow касиети,
    ал контейнерге көлөкө берет