CSS စာသားအရိပ်
စာသားအရိပ်
ပိုင်ဆိုင်မှုသည် စာသားသို့ အ text-shadowရိပ်ထည့်သည်။
၎င်း၏အရိုးရှင်းဆုံးအသုံးပြုမှုတွင်၊ သင်သည် အလျားလိုက်အရိပ် (2px) နှင့် ဒေါင်လိုက်အရိပ် (2px) ကိုသာ သတ်မှတ်သည်-
စာသားအရိပ်အကျိုးသက်ရောက်မှု။
ဥပမာ
h1
{
text-shadow: 2px 2px;
}
ထို့နောက် အရိပ်တွင် အရောင် (အနီရောင်) ထည့်ပါ။
စာသားအရိပ်အကျိုးသက်ရောက်မှု။
ဥပမာ
h1
{
text-shadow: 2px 2px red;
}
ထို့နောက် အရိပ်သို့ မှုန်ဝါးသည့်အကျိုးသက်ရောက်မှု (5px) ထည့်ပါ-
စာသားအရိပ်အကျိုးသက်ရောက်မှု။
ဥပမာ
h1
{
text-shadow: 2px 2px 5px red;
}
နောက်ထပ် Text Shadow နမူနာများ
ဥပမာ ၁
အဖြူရောင်စာသားပေါ်ရှိ စာသားအရိပ်-
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
ဥပမာ ၂
အနီရောင်နီယွန်တောက်ပသော စာသားအရိပ်-
h1 {
text-shadow: 0 0 3px #ff0000;
}
ဥပမာ ၃
အနီရောင်နှင့် အပြာရောင်နီယွန်တောက်ပသော စာသားအရိပ်-
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
ဥပမာ ၄
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;
}
အကြံပြုချက်- ဖောင့်များ၊ စာသားအရွယ်အစားနှင့် စာသားပုံစံကို မည်သို့ပြောင်းလဲရမည်ကို လေ့လာရန် ကျွန်ုပ်တို့၏ CSS Fonts အခန်းသို့ သွား ပါ။
အကြံပြုချက်- မတူညီသော စာသားအကျိုးသက်ရောက်မှုများအကြောင်း လေ့လာရန် ကျွန်ုပ်တို့၏ CSS Text Effects အခန်းသို့ သွားပါ ။
CSS Text Properties အားလုံး
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Specifies how to align the last line of a text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |