Text-Effect
The shadow text-effect draws a sharp shadow around the text.
Usage
![]()
The above effect has been realized for the screen's title with the following settings:
title {
text-effect: shadow;
text-shadow-color: black; /* = default */
layout: horizontal-center | horizontal-expand;
font {
face: proportional;
size: large;
style: bold;
color: #eef1e5;
}
background {
type: simple;
color: #ffffffff;
}
}
Specific design attributes of shadow text-effect:
| CSS Attribute | Default | Values | Explanation |
|---|---|---|---|
| text-shadow-color | black | color definition |
The color of the shadow.
text-shadow-color: #333; |
| text-shadow-orientation | bottom-right | bottom-right, bottom-left, top-right, top-left, bottom, top, right, left |
Position of the shadow relative to the text.
text-shadow-orientation: bottom-left; |
| text-shadow-x | 1 | integer |
Sets the x-orientation in pixels of a shadow for the shadow font-effect.
The text-shadow-orientation attribute is ignored when the x value is set directly.
Positive x-values move the shadow towards the right.
text-shadow-x: -1; |
| text-shadow-y | 1 | integer |
Sets the y-orientation in pixels of a shadow for the shadow font-effect.
The text-shadow-orientation attribute is ignored when the y value is set directly.
Positive y-values move the shadow towards the bottom.
text-shadow-y: 2; |