CSS ကိုကနဦးစာလုံးကြီး

Fancy ကနဦး CSS ကိုအသုံးပြုခြင်းစာလုံးကြီးနှင့်ပုံများဖန်တီးနည်းကိုလေ့လာပါ

သုံးစွဲဖို့ဘယ်လိုလေ့လာသင်ယူ CSS ကို ဖန်တီးရန် ဖန်စီ သင့်ရဲ့အပိုဒ်များအတွက်ကနဦးထုပ်။ သင့်ရဲ့ကနဦးထုပ်ဘို့ဆိုတာ graphical image ကိုသုံးစွဲဖို့ပင်ရိုးရှင်းသောပုံရိပ်ကိုအစားထိုး technique ကိုရှိပါတယ်။

ကနဦးစာလုံးကြီးများ၏အခြေခံ Styles

စာရွက်စာတမ်းများအတွက်ကနဦးထုပ်သုံးခုအခြေခံစတိုင်များရှိပါတယ်:

• ကြီးပြင်းလာ - ပထမအက္ခရာပိုကြီးပြီးလက်ရှိစာသားကိုကဲ့သို့တူညီသောမျဉ်းပေါ်မှာဘယ်မှာ, အသုံးအများဆုံး။
• ပထမဦးဆုံးအက္ခရာပိုကြီးသည်အဘယ်မှာရှိလည်းမျှမျှတတဘုံနှင့်စာသား၏ပထမဦးဆုံးမျဉ်းအောက်ကိုဆင်းကျဆင်းသွား - ကျဆင်းသွားသည်။ အောက်ပါစာသားကိုထို့နောက်ပတ်လည်ရှိသတဲ့။
• ကပ်လျက် - ပထမအက္ခရာစာသား၏ကျန်အနားမှာတဦးတည်းကော်လံသည်အဘယ်မှာရှိ။ ဒီအက်ဘ်ဒီဇိုင်းထက်ပုံနှိပ်ပိုမိုဘုံဖြစ်ပါတယ်။

ကနဦးထုပ်သို့မဟုတ်တစ်စက်ထုပ်အလွန်အကျွမ်းတဝင်ဖြစ်ကြ၏။ သူတို့ကစာသားမဟုတ်ရင်တာရှည်ခြင်းနှင့်ငြီးငွေ့စရာ span တက်ဝတ်စားဆင်ယင်ဖို့အကောင်းဆုံးနည်းလမ်းဖြစ်ပါသည်။ ထိုအခါ CSS ကိုအိမ်ခြံမြေနှင့်အတူ: ပထမဦးဆုံးအက္ခရာကိုသင်အလွယ်တကူသင့်ရဲ့ပထမဦးဆုံးစာလုံး fancier အောင်ဘယ်လိုသတ်မှတ်နိုင်ပါတယ်။

တစ်ရိုးရှင်းသောကနဦး Cap Create

သင်တစ်ဦးရိုးရှင်းသောထမြောက်တော်မူကနဦးထုပ်ကိုဖန်တီးရန်လုပ်ဖို့လိုအပ်သမျှကိုပထမဦးဆုံးအက္ခရာ Pseudo-ဒြပ်စင်များနှင့်အရွယ်အစားပိုကြီးတဲ့သင့်ရဲ့အပိုဒ်၏ပထမအက္ခရာအောင်ဖြစ်ပါသည်:

p: ပထမဦးဆုံးအက္ခရာ {font-size: 3em; }

သို့သော်များစွာသော browser များ ပထမဦးဆုံးအက္ခရာလိုင်းပေါ်မှာစာသား၏ကျန်ထက်ပိုကြီးတဲ့ဖြစ်ပါသည်, ဒါကြောင့်သူတို့ကပထမဦးဆုံးအစာမလိုင်း၏ကျန်များအတွက်အသိပါစေလိမ့်မယ်အဘယ်အရာကိုမှဦးဆောင်ညီမျှအောင်ကြည့်ပါ။ ကံကောင်းတာကဒီပထမဦးဆုံးလိုင်း Pseudo-ဒြပ်စင်များနှင့်လိုင်း-အမြင့်ပိုင်ဆိုင်မှုနှင့်အတူဖြေရှင်းရန်လွယ်ကူသည်:

p: ပထမဦးဆုံးအက္ခရာ {font-size: 3em; } p: ပထမဦးဆုံးလိုင်း {လိုင်း-အမြင့်: 1em; }

သင်သည်သင်၏စာသားလက်ျာရဲ့အရွယ်အစားကိုရှာဖွေသည်အထိသင့်ရဲ့စာရွက်စာတမ်းအတွင်းလိုင်းအမြင့်နှင့်အတူ Play ။

သင့်ရဲ့ကနဦး Cap နှင့်အတူ Play

သင်တစ်ဦးကနဦးထုပ်ကိုဖန်တီးရန်မည်သို့မည်ပုံနားလည်ပြီးတာနဲ့သင်ကထွက်မတ်တပ်ရပ်စေရန်ဖန်စီအဝတ်အစားတွေထဲမှာဖွင့်ဝတ်စားဆင်ယင်နိုင်ပါ။ အရောင်များ, နောက်ခံအရောင်တွေ, border, ဒါမှမဟုတ်ဘာပဲသင့်ရဲ့ဖန်စီရိုက်နှင့်အတူ Play ။ တစ်ဦးကမျှမျှတတရိုးရှင်းတဲ့စတိုင်ပဲပထမဦးဆုံးအက္ခရာအဘို့သင့်ဖောင်နှင့်နောက်ခံအရောင်များ၏အရောင်များ reverse ဖို့ဖြစ်ပါတယ်:

p: ပထမဦးဆုံးအက္ခရာ {font-size: 300%; background-color: # 000; အရောင်: #fff; } p: ပထမဦးဆုံးလိုင်း {လိုင်း-အမြင့်: 100%; }

နောက်ထပ်လှည့်ကွက်ကပထမဆုံးလိုင်းကိုအဓိကထားဖို့ဖြစ်ပါတယ်။ သင့်ရဲ့ layout ကိုပြောင်းလွယ်ပြင်လွယ်လျှင်စာသားလိုင်း၏အလယ်တွင်ကွဲပြားခြားနားနိုင်ပါတယ်အဖြစ်ဤ CSS နဲ့လှည်နိုင်ပါတယ်။ ဒါပေမဲ့တချို့တန်ဖိုးများနှင့်အတူတစ်ဝှမ်းကစားနေတဲ့နှင့်အတူ, သင်ပထမဦးဆုံးအက္ခရာအလယ်၌ဖြစ်ပေါ်လာစေရန်လုံလောက်သင့်ရဲ့ပထမဦးဆုံးလိုင်း Indent နိုင်ပါတယ်။ မှန်ကြည့်သည်အထိရုံအပိုဒ်၏ text-ကုန်အမှာစာအပေါ်ရာခိုင်နှုန်းနှင့်အတူဆော့ကစား:

p: ပထမဦးဆုံးအက္ခရာ {font-size: 300%; background-color: # 000; အရောင်: #fff; } p: ပထမဦးဆုံးလိုင်း {လိုင်း-အမြင့်: 100%; } p {text-ကုန်အမှာစာ: 45%; }

ကပ်လျက်ကနဦးစာလုံးကြီး CSS နဲ့ခက်များမှာ

မတူညီတဲ့ browser များကွဲပြားခြားနားစာလုံးဖော်ပြရန်ဘာဖြစ်လို့လဲဆိုတော့ကပ်လျက်ကနဦးထုပ် CSS နဲ့ခက်ခဲနိုင်ပါတယ်။ CSS ကိုတစ်ခုကပ်လျက်ဦးထုပ်ကိုနောက်ကွယ်မှစိတ်ကူး (လက်ဝဲမှ) အနှုတ်တန်ဖိုးတစ်ခုကထွက်တွန်းဖို့ကပထမလိုင်းပေါ် text-ကုန်အမှာစာ property ကိုသုံးရန်ဖြစ်ပါသည်။ သင်တို့သည်လည်းအချို့သောငွေပမာဏကအပိုဒ်ရဲ့ဘယ်ဘက် margin ကိုပြောင်းလဲဖို့လိုအပ်ပါလိမ့်မယ်။ အဆိုပါအပိုဒ်ကောင်းသောကြည့်သည်အထိဤနံပါတ်များနှင့်အတူ Play ။

p {text-ကုန်အမှာစာ: -2.5em; margin-left: 3em; } p: ပထမဦးဆုံးအက္ခရာ {font-size: 3em; } p: ပထမဦးဆုံးလိုင်း {လိုင်း-အမြင့်: 100%; }

တကယ်ပဲ Fancy ကနဦးစာလုံးကြီးရယူခြင်း

တစ်ဖန်စီကနဦးထုပ်ကိုဖန်တီးရန်အကောင်းဆုံးနည်းလမ်းတစ်ဦးထက်ပိုအလှဆင်ဖောင်မိသားစုဖို့ font ကိုပြောင်းလဲပစ်ရန်ဖြစ်ပါသည်။ သင်တစ်ဦးကိုသုံးလျှင် ဖောင့်အမျိုးအစားစီးရီး တစ်ခုခြင်းဖြင့်နောက်တော်သို့လိုက် ယေဘုယျဖော , ကသင့်ရဲ့ဖောက်သည်ရယူသုံးရေးနှင့်အသုံးဝင်မှုရှိစေရန်ဆိုင်ရာကိစ္စရပ်များသို့လာပြီခြင်းမရှိဘဲ, ကမြင်တွေ့နိုင်တယ်ဒါကြောင့်သင့်နဦးထုပ်ကောင်းကောင်းပြအာမခံကူညီပေးပါမည်။

p: ပထမဦးဆုံးအက္ခရာ {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT" Cursive; } p: ပထမဦးဆုံးလိုင်း {လိုင်း-အမြင့်: 100%; }

နှင့်အညီ, ခါတိုင်းလိုအဖြစ်, သင်သည်သင်၏အပိုဒ်တစ်ခုကနဦးထုပ်ကြော်ငြာများစတိုင်ကိုဖန်တီးရန်အတူတကွသမျှသောဤအကြံပြုချက်များထားနိုင်ပါတယ်။

တစ်ဦး Graphical ကနဦး Cap အသုံးပြုခြင်း

အားလုံးသောနောက်, သင်ဆဲသင့်ရဲ့ကနဦးထုပ်စာမျက်နှာပေါ်တွင်ကြည့်ရှုပုံကိုမကြိုက်ဘူး, အကယ်. သင်ရှာနေအတိအကျအကျိုးသက်ရောက်မှုရဖို့ဂရပ်ဖစ်နှုနျးနိုငျသညျ။ သငျသညျဂရပ်ဖစ်မှဖြောင့်ရွှေ့ဖို့ဆုံးဖြတ်မတိုင်မီသို့သော်, သင်သည်ဤနည်းလမ်း၏အားနည်းချက်များသတိထားရပါမည်:

• ပုံရိပ်တွေမပါဘဲဖောက်သည်ကနဦးထုပ်ကိုမမွငျပါလိမ့်မယ်, နှင့်ပုံရိပ်ကိုအစားထိုးကြောင်းဝှက်ထားသောစာသားကိုမမြင်ရပေမည်။ ဒါကအပိုဒ်တပိုင်တနိုင်, ဒါမှမဟုတ်ဖတ်ရှုဖို့မှာအကောင်းဆုံးခက်ခဲစေနိုင်ပါတယ်။
• ပုံရိပ်တွေအမြဲတမ်းစာမျက်နှာ၏ download, အချိန်ထည့်ပါ။ သငျသညျကနဦးထုပ်တွေအများကြီးရှိသည်ဆိုလျှင်, သင်သိသိသာသာများစွာသောလူအရေးဖြစ်ပါသည်ခံစားရမယ်လို့တစ်ခုခုဒေါင်းလုဒ်အချိန်တိုးမြှင့်ပေးနိုင်သည်။
• အဆိုပါအပိုဒ်စာသားကိုထူးဆန်းကြည့်ရှုစေနိုငျသော - အခြို့သော browser များက hidden ပထမဦးဆုံးအက္ခရာနှင့်ပုံရိပ်နှစ်ခုလုံးကိုပြပေးလိမ့်မယ်။
• သင်မှန်ကန်သောဂရပ်ဖစ်အသုံးပြုနိုင်အောင်ပထမဦးဆုံးအက္ခရာတစ်ခုဖြစ်သည်အတိအကျအရာကိုသိရန်ရှိသည်က, ဤ option ကိုအလိုအလျောက်ရန်အလွန်ခဲယဉ်းပါတယ်။ ဒါကြောင့်အပိုဒ် edited ဖြစ်ပါတယ်အခါတိုင်း, သငျသညျသစ်တစ်ခုဂရပ်ဖစ်ဖန်တီးရန်လိုအပ်ပေမည်။

ပထမဦးစွာသင်ပထမဦးဆုံးအက္ခရာများ၏ဂရပ်ဖစ်ဖန်တီးရန်လိုအပ်သည်။ ငါ font ကို "Edwardian Script ITC" နဲ့စာ L ကိုဖန်တီးရန်အတွက် Photoshop ကိုအသုံးပြုခဲ့သည်။ အရွယ်အစား 300pt - ငါကကြီးမားဖန်ဆင်းတော်မူ၏။ ငါထို့နောက်အက္ခရာန်းကျင်ရှင်းလင်းသောနိမ့်ဆုံးမှ image ကိုနှိမ့်ချလှီးဖြတ်ခြင်းနှင့်ပုံရိပ်ကို width နဲ့ height မှတ်ချက်ချသည်။

ထိုအခါငါသည်ငါ့အပိုဒ်တစ်လူတန်းစား "capL" ကိုဖန်တီးခဲ့တယ်။ ငါဒါပေါ်မှာအဘယ် image ကိုသုံးစွဲဖို့သတ်မှတ်ဦးဆောင် (လိုင်း-အမြင့်), နှင့်နေရာအရပ်ဖြစ်၏။

သင်ကအပိုဒ်ရဲ့စာသားကုန်အမှာစာနှင့် padding ကို-ထိပ်တန်းတင်ထားရန် image ကို width နဲ့ height ကိုအသုံးပြုရန်လိုအပ်ပါတယ်။ ငါ၏အ L ကိုပုံရိပ်အဘို့ငါ 95px ကုန်အမှာစာနှင့် 72px padding ကိုလိုအပ်ခဲ့ပါတယ်။

p.capL {လိုင်း-အမြင့်: 1em; နောက်ခံ-image: url (capL.gif); နောက်ခံ-ထပ်: မထပ်; text-ကုန်အမှာစာ: 95px; padding ကို-top: 72px; }

သို့သော်ရှိသမျှသောမဟုတ်ဘူး။ ထို့နောက်စာသားထဲမှာ, ဂရပ်ဖစ်နှင့်အတူပထမဦးဆုံး - သင်အဲဒီမှာသူကစွန့်ခွာလျှင်, ပထမဦးဆုံးစာအပိုဒ်အတွက်ကော်ပီပွားယူပါလိမ့်မယ်။ ဒါကြောင့်ငါ "ကနဦးက" အတန်းအစားနဲ့ပထမဦးဆုံးဒြပ်စင်ပတ်လည် span ဆက်ပြောသည် - နှင့်စာတစ်စောင်ကိုမပြဖို့ browser ကိုပြောသည်:

span.initial {display: none; }

ထိုအခါဂရပ်ဖစ်ပြီးတော့မှန်မှန်ကန်ကန်ဖော်ပြပေးမှာဖြစ်ပါတယ်။ သင်သို့သော်သင်ကပြသချင်ပါတယ်, စာသားညာဘက်မှာစာကိုမှတက် snugged ရရန်အပိုဒ်အပေါ် text-ကုန်အမှာစာနှင့်အတူဆော့ကစားနိုင်ပါတယ်။