CSS va tasvirlarni ishlatish bilan boshlang'ich yangiliklarni qanday yaratishni bilib oling
O'zingizning paragraflaringiz uchun fantastika boshlang'ich kupligini yaratish uchun CSS- dan qanday foydalanishni bilib oling. Dastlabki qopqog'ingiz uchun grafik tasvirni ishlatish uchun oddiy tasvirni o'zgartirish usuli ham mavjud.
Dastlabki yangiliklarning asosiy uslublari
Hujjatlarda dastlabki qopqoqning uchta asosiy uslubi mavjud:
- eng keng tarqalgan, birinchi harf katta va joriy matn bilan bir qatorda.
- birinchi harf kattaroq bo'lgan va matnning birinchi qatoridan pastga tushgan juda keng tarqalgan. Quyidagi matn atrofida suzadi.
- ulashgan joy - bu birinchi harf matnning qolgan qismidagi bir ustunda joylashgan. Bu veb-dizayndan ko'ra ko'proq bosib chiqarilgan.
Birinchi qopqoq yoki tomchi qopqoqlar juda tanish. Ular matnning boshqa uzoq va zerikarli sathlarini kiyishning ajoyib usuli. CSS-mulki bilan: birinchi harf, siz qanday qilib birinchi harflar bilan qiziqishni qanday qilib belgilashingiz mumkin.
Oddiy dastlabki qopqoqni yarating
Oddiy boshlang'ich qopqoqni yaratish uchun kerak bo'lgan yagona narsa, sizning xatning birinchi harfini birinchi harfli soxta element bilan kattaroq hajmda qilishdir:
p: birinchi harf {font-size: 3em; }Biroq, ko'plab brauzerlar birinchi harfni satrdagi matnning qolgan qismidan kattaroq ekanligini ko'radilar, shuning uchun ular boshlang'ichni birinchi harf uchun mos keladigan narsaga tenglashtiradilar, boshqa qatorlarni ham emas. Yaxshiyamki, bu birinchi qatorli pseudo-element va line-height xususiyati bilan tuzatish oson:
p: birinchi harf {font-size: 3em; } p: birinchi qatorli {satr balandligi: 1em; }Matn uchun to'g'ri o'lchamni topmaguningizcha hujjatingizdagi chiziq balandligi bilan o'ynang.
Dastlabki qopqog'ingiz bilan o'ynang
Bir marta boshlang'ich qopqoqni qanday yaratishni bilib olganingizdan so'ng, siz uni diqqatni jalb qilish uchun kiyinib kiyinishingiz mumkin. Ranglar, orqa fon ranglari, chegara va nima bilan shug'ullanishingiz sizning tasavvuringizga ta'sir qiladi. Juda oddiy uslub shrift turini va fon rangi rangini faqat birinchi harf uchun qaytarishdir:
p: birinchi harf (font-hajmi: 300%; fon rangi: # 000; rang: #fff; } p: birinchi satr {line-height: 100%; }Yana bir hiyla - birinchi qatorni markazlashtirmoq. Bu sizning tartibingiz moslashuvchan bo'lsa, matn satrining o'rtasidan farq qilishi mumkin, chunki bu CSS bilan qiyin bo'lishi mumkin. Lekin ba'zi qadriyatlar bilan o'ynab, birinchi qatorni o'rtada birinchi harfni ko'rsatadigan darajada chizishingiz mumkin. Faqat paragrafning matnning pastki qismidagi foiz bilan to'g'ri o'ynaguncha o'ynang:
p: birinchi harf (font-hajmi: 300%; fon rangi: # 000; rang: #fff; } p: birinchi satr {line-height: 100%; } p {text-indent: 45% ; }Qo'shni boshlang'ich yangiliklari CSS bilan qattiq
Ba'zi brauzerlar shriftlarni boshqacha ko'rsatganligi sababli, qo'shni dastlabki papkalar CSS bilan qiyinlashishi mumkin. CSS-ga ulashgan qopqoqni yaratish g'oyasi matnni chiziqli xususiyatni birinchi satrda (chapda) salbiy qiymatdan chiqarish uchun ishlatishdir. Shuningdek, ushbu xatning chap chegarasini ba'zi miqdorda o'zgartirishingiz kerak bo'ladi. Paragraf yaxshi ko'rinmaguncha ushbu raqamlar bilan o'ynang.
p {text-indent: -2.5em; margin-left: 3em; } p: birinchi harf {font-size: 3em; } p: birinchi satr {line-height: 100%; }Haqiqatdan ham boshlang'ich yangiliklarni qabul qilish
Chiroyli boshlang'ich qopqoqni yaratishning eng yaxshi usuli shriftni yanada bezakli shrift oilasiga o'zgartirishdir. Agar bir nechta shriftlardan foydalansangiz, shrift shrifti bilan boshlansa , u dastlabki qopqoq sizning mijozlaringizni ko'rishlari mumkinligini kafolatlashga yordam beradi.
p: birinchi harf {font-size: 3em; shrift-oilasi: "Edwardian Script ITC", "Brush Script MT", cursive; } p: birinchi satr {line-height: 100%; }Va odatdagidek, siz barcha takliflarni birgalikda sizning xatboshiligingiz uchun uslubiy uslubni yaratadigan dastlabki qopqoqni yaratishingiz mumkin.
Grafik boshlang'ich qopqog'idan foydalanish
Agar bundan keyin siz hali ham dastlabki papkangizni sahifaga qanday qarashni yoqtirmasangiz, siz qidirayotgan aniq ta'sirni olish uchun grafikaga murojaat qilishingiz mumkin. Ammo to'g'ri grafikaga o'tishga qaror qilishdan oldin, ushbu usulning kamchiliklarini bilishingiz kerak:
- Tasvirsiz mijozlar dastlabki qopqoqni ko'rmaydi va tasvirni o'zgartiradigan maxfiy matnni ko'ra olmaydi. Bu xatni xatoga yo'l qo'yilmasligi yoki eng yaxshi o'qilishi mumkin.
- Rasmlar doimo sahifaning yuklab olish vaqtiga qo'shiladi. Agar sizda boshlang'ich koptoklar ko'p bo'lsa, ko'pchilikning sezgir bo'lmagan narsalar uchun yuklab olish vaqtini sezilarli darajada oshirishingiz mumkin.
- Ba'zi brauzerlar ham parol matnini g'alati ko'rishga imkon beradigan ikkita yashirin harf va tasvirni ko'rsatadilar.
- Ushbu parametrni avtomatlashtirish juda qiyin, chunki siz to'g'ri harfni ishlatishingiz uchun birinchi harfni aniq bilishingiz kerak. Ya'ni, xatboshi har safar tahrirlangan bo'lsa, siz yangi grafik yaratishingiz mumkin.
Birinchidan, birinchi harfning grafikasini yaratishingiz kerak. "Eduard skripti ITC" shrifti bilan L harfini yaratish uchun fotoshopdan foydalanganman. Men uni katta o'lchamda - 300pt o'lchamda qildim. So'ngra, tasvirni har bir harf atrofida eng past darajaga tushirdim va rasm kengligi va balandligini qayd qildim.
So'ngra men xat mening uchun "capL" sinfini yaratdim. Bu erda qaysi tasvirni ishlatishni, etakchi (chiziqli-balandligi) va boshqalarni aniqlayman.
Paragrafning matnli va pastki qismini o'rnatish uchun tasvir kengligi va balandligini ishlatishingiz kerak. Mening L rasmim uchun 95px chertmoq va 72px bo'shliq kerak edi.
p.capL {line-height: 1em; background-image: url (capL.gif); fon-takrorlash: no-repeat; matnli indent: 95px; padding-to'p: 72px; }Lekin bu hammasi emas. Agar u erda qoldirib qo'ysangiz, unda birinchi harf paragrafda takrorlanadi - avval grafik bilan, keyin matnda. Shunday qilib, men birinchi elementni "boshlang'ich" sinf bilan birlashtirdim va brauzerda ushbu maktubni ko'rsatmasligini aytdim:
span.initial {displey: yo'q; }Grafika keyinchalik to'g'ri ko'rinadi. Siz xatni matnga o'ng tomonga o'ngga olish uchun xatboshidagi matnli chiziq bilan o'ynashingiz mumkin, ammo uni ko'rsatishni xohlaysiz.