CSS və Şəkillərdən istifadə edərək Fancy Başlanğıc Çapları Yaratma haqqında məlumat əldə edin
Paraqraflarınız üçün xülya başlanğıc qapaqları yaratmaq üçün CSS- dən necə istifadə edəcəyinizi öyrənin. Başlanğıc kapağınız üçün qrafik bir şəkil istifadə etmək üçün sadə bir şəkil əvəzləmə texnikası da var.
Başlanğıc Çapların əsas tərzləri
Sənədlərdə ilkin başlıqların üç əsas üslubu vardır:
- qaldırıldı - ən çox yayılmış, ilk məktub daha böyük və cari mətnlə eyni həddədir.
- azalıb - ilk məktubun daha böyük olduğu və mətnin birinci xəttinin altına düşdüyü olduqca yayılmışdır. Aşağıdakı mətn sonra ətrafında gedir.
- bitişik - ilk məktub mətnin qalan hissəsinin yanında bir sütunda yerləşir. Bu, çapdan daha çox Web dizaynından çoxdur.
İlkin başlıq və ya açılan qapaqlar çox tanışdır. Mətnin başqa uzun və darıxdırıcı təbəqələrini bəzəmək üçün gözəl bir yoldur. Və CSS mülkiyyəti ilə: ilk məktub, ilk məktubları meraklısı etmək üçün necə asanlıqla müəyyən edə bilərsiniz.
Sadə bir Başlanğıc Çap Yarat
Sadə bir qaldırılmış başlanğıc kapağı yaratmaq üçün lazım olan bütün, ilk paraqraf elementi ilə paranınızın ilk məktubunu daha böyük ölçüsündə etməkdir:
p: ilk məktub {font-size: 3em; }Ancaq bir çox brauzerlər ilk məktubun satırdakı mətnin qalan hissəsindən daha böyük olduğunu görürlər. Beləliklə, onlar birinci sinfi üçün deyil, xəttin qalan hissəsi kimi önə çıxırlar. Xoşbəxtlikdən, bu ilk satır elementi və line-height xüsusiyyətləri ilə düzəldilməsi asandır:
p: ilk məktub {font-size: 3em; } p: birinci satır {line-height: 1em; }Mətniniz üçün doğru ölçüsü tapana qədər sənədinizdə xətt boyu ilə oynayır.
İlk başlığınızla oynayın
Bir başlanğıc başlığı yaratmaq necə başa düşdükdən sonra onu fərqləndirmək üçün xülya paltarları ilə bəzəyə bilərsiniz. Rənglər, fon rəngləri, sərhədlər və ya hər hansı bir xəyal qırıqlığı ilə oynayır. Çox sadə bir üslub sizin yazı tipinizin və fon rəngi rənglərini yalnız ilk məktub üçün tərtib etməkdir:
p: ilk məktub {font-size: 300%; background-color: # 000; rəng: #fff; } p: birinci satır {line-height: 100%; }Başqa bir hiylə ilk xətt mərkəzindədir. Mətn xəttinin ortasında düzəldilməsə, bu, CSS ilə çətin ola bilər. Amma bəzi dəyərlər ilə oynayarkən, ilk məktub ortada görünməsi üçün kifayət qədər ilk satıra girə bilərsiniz. Düzgün görünənədək, yalnız paraqrafın mətn indentisində faizlə oynamaq:
p: ilk məktub {font-size: 300%; background-color: # 000; rəng: #fff; } p: birinci satır {line-height: 100%; } p {text-indent: 45% ; }Bitişik İlk Başlıklar CSS ilə çətindir
Müxtəlif brauzerlər şriftləri fərqli şəkildə göstərdikləri üçün, bitişik ilkin başlıqlar CSS ilə çətin ola bilər. CSS-də bitişik bir papaq yaratmaq arxasında fikir, mətn indentini ilk satırda (solda) itələmək üçün mənfi dəyərdən istifadə etməkdir. Həmin bəndin sol marjını müəyyən miqdarda dəyişmək lazımdır. Paraqraf yaxşı görünənə qədər bu nömrələrlə oynayır.
p {text-indent: -2.5em; margin-left: 3em; } p: ilk məktub {font-size: 3em; } p: birinci satır {line-height: 100%; }Həqiqi Başlanğıc Şapka Fancy Getting
Süslü başlanğıc kapağı yaratmanın ən yaxşı yolu fontun daha çox dekorativ font ailəsinə dəyişdirilməsidir. Bir ümumi şriftin ardından bir dizi şrift istifadə edirsinizsə, bu, başlanğıc kapağınızın, müştərilərinizin erişilebilirlik ve kullanışlılık sorunlarına girmeden bunu görebilmesini sağlayacak şekilde gösterilmesini garantileyecektir.
p: ilk məktub {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: birinci satır {line-height: 100%; }Və hər zamanki kimi, bütün bu təklifləri paraqrafa reklam üslubunun ilk başlığı yaratmaq üçün birlikdə yerləşdirə bilərsiniz.
Qrafik Baş Qapaq istifadə
Bütün bunlardan sonra, hələ də ilk başlıqlarınızın səhifəyə necə baxdığınızı sevməsəniz, aradığınız dəqiq təsiri əldə etmək üçün qrafikaya müraciət edə bilərsiniz. Düz qrafiklərə doğru hərəkət etməyinizdən əvvəl, bu metodun çatışmazlıqlarından xəbərdar olmalıdır:
- Şəksiz müştərilər ilkin kapağı görməyəcək və şəkinin dəyişdirildiyi gizli mətni görə bilməz. Bu paraqrafa əlçatmaz və ya oxumaq çətin ola bilər.
- Şəkillər həmişə bir səhifənin yüklənmə vaxtına əlavə olunur. Bir çox başlanğıc başlığı varsa, bir çox insanın özünü hiss etməyəcəyi bir şey üçün yükləmə müddətini əhəmiyyətli dərəcədə artıra bilərsiniz.
- Bəzi brauzerlər həm gizli ilk məktəni, həm də görüntüyü göstərəcək - paraqraf mətnini tək görünə bilər.
- Bu seçimi avtomatlaşdırmaq çox çətindir, çünki ilk məktubun düzgün qrafikdən istifadə etdiyini tam olaraq bilmək lazımdır. Belə ki, paraqrafın hər dəfə redaktə edildiyində, yeni bir qrafik yaratmaq lazım ola bilər.
Birincisi, ilk məktubun qrafikini yaratmalısınız. Photoshop'u "Edwardian Script ITC" yazısı ilə L hərfini yaratmaq üçün istifadə etdim. Mən bunu böyük ölçüyə - 300pt ölçüyə çevirdim. Sonra məktubun ətrafındakı çıplak minimuma aşağı enmə və şəkil genişliyi və boyu qeyd etdilər.
Sonra mənim paraqrafım üçün "capL" bir sinif yaratdım. Burada istifadə edəcəyimiz təsvirin, aparıcı (line-height) və s.
Paraqrafın mətn indent və padding-topunu təyin etmək üçün şəkil genişliyi və yüksəkliyindən istifadə etməlisiniz. L mənim üçün mənə 95px girinti və 72px padding lazım idi.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: no-təkrar; mətn indent: 95px; padding-top: 72px; }Amma bu hamısı deyil. Buranı tərk etsəniz, ilk məktub paraqrafda təkrarlanır - əvvəlcə qrafiklə, sonra isə mətndə. Beləliklə, mən ilk "elementar" elementi ilə bir ədəd əlavə etdim və brauzerin bu məktubu göstərməməsini dedi:
span.initial {display: none; }Və qrafik sonra düzgün göstərilir. Mətn düzəldilmiş məktubu almaq üçün bənddə mətn indent ilə oynaya bilər, ancaq onu göstərmək istəyə bilərsiniz.