Naučte sa, ako vytvoriť originálne čiapky s použitím CSS a obrázkov
Prečítajte si, ako používať CSS na vytvorenie fiktívnych počiatočných limitov pre vaše odseky. Existuje dokonca aj jednoduchá technika na výmenu obrázkov na použitie grafického obrazu pre počiatočnú čiapočku.
Základné štýly počiatočných čiar
V dokumentoch sú tri základné štýly počiatočných čiar:
- zdvihnutá - najbežnejšia, kde je prvé písmeno väčšie a na rovnakom riadku ako aktuálny text.
- klesol - tiež pomerne bežné, kde prvé písmeno je väčšie a klesol pod prvý riadok textu. Nasledujúci text sa potom pláva okolo neho.
- priľahlé - kde prvé písmeno je v jednom stĺpci vedľa zvyšku textu. Toto je bežnejšie v tlači ako pri návrhu webu.
Počiatočné čiapky alebo kvapky sú veľmi dobre známe. Sú to skvelý spôsob, ako obliecť inak dlhé a nudné rozpätia textu. A s vlastníctvom CSS: prvé písmeno, môžete ľahko definovať, ako vytvoriť prvé písmená.
Vytvorte jednoduchý počiatočný uzáver
Všetko, čo musíte urobiť, ak chcete vytvoriť jednoduchý zvýšený počiatočný uzáver, je vytvoriť prvé písmeno vášho odseku väčšieho veľkosti s prvým písmenom pseudo-element:
p: prvé písmeno {font-size: 3em; }Ale veľa prehliadačov vidí, že prvé písmeno je väčšie ako zvyšok textu na riadku, takže robia vedenie rovnaké ako to, čo by malo zmysel pre prvé písmeno, nie zvyšok riadku. Našťastie sa to dá ľahko vyriešiť prvkom pseudo-prvku a vlastnosťou výšky línií:
p: prvé písmeno {font-size: 3em; } p: prvý riadok {line-height: 1em; }Prehrajte s výškou čiary v dokumente, kým nenájdete správnu veľkosť textu.
Hrajte s počiatočnou čiarou
Akonáhle pochopíte, ako vytvoriť počiatočnú čiapku, môžete ju obliecť v luxusných šatách, aby ste vynikli. Zahrajte si s farbami, farbami pozadia, hranicami alebo s akoukoľvek náhodou. Zcela jednoduchý štýl je obrátiť farby písma a farby pozadia iba pre prvé písmeno:
p: prvé písmeno {font-size: 300%; farba pozadia: # 000; farba: #fff; } p: prvý riadok {line-height: 100%; }Ďalším trikom je vystredenie prvého riadku. To môže byť zložité vďaka CSS, pretože v strede textovej čiary môže byť iná, ak je rozloženie flexibilné. Ale pri niektorých hrách s hodnotami môžete odsadiť prvý riadok dosť, aby sa prvé písmeno zdalo byť uprostred. Stačí hrať s percentom na text-odsadenie odseku, kým to nevyzerá správne:
p: prvé písmeno {font-size: 300%; farba pozadia: # 000; farba: #fff; } p: prvý riadok {line-height: 100%; } p {text-odsadenie: 45% ; }Priľahlé počiatočné čiapky sú ťažké s CSS
Priľahlé počiatočné čiapočky môžu byť ťažké s CSS, pretože rôzne prehliadače zobrazujú písma inak. Myšlienka vytvorenia susedného uzáveru v systéme CSS spočíva v tom, že v prvom riadku použijeme vlastnosť text-odsadenie, aby sme ju tlačili von (vľavo) na zápornú hodnotu. Budete tiež musieť zmeniť ľavý okraj tohto odseku o určitú čiastku. Zahrajte si s týmito číslami, až kým sa odsek nezobrazí dobre.
p {text-odsadenie: -2,5; margin-left: 3m; } p: prvé písmeno {font-size: 3em; } p: prvý riadok {line-height: 100%; }Získanie naozaj fantázie počiatočné čiapky
Najlepším spôsobom, ako vytvoriť fantastickú počiatočnú čiapočku, je zmena písma na ozdobnejšiu rodinu písiem. Ak použijete sériu písiem, po ktorom nasleduje všeobecné písmo , pomôže to zaručiť, že vaša počiatočná čiapočka bude dobre zobrazená, aby to mohli vidieť vaši zákazníci bez toho, aby ste sa dostali do problémov s prístupnosťou a použiteľnosťou.
p: prvé písmeno {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", kurzíva; } p: prvý riadok {line-height: 100%; }A ako obvykle, môžete dať všetky tieto návrhy dohromady, aby ste vytvorili počiatočnú hranicu, ktorú štýly reklám prispôsobia vášmu odseku.
Použitie grafického počiatočného uzáveru
Ak sa po tom všetkom stále nepáči, ako sa na stránke zobrazujú vaše počiatočné čiapky, môžete využiť grafiku, aby ste dosiahli presný efekt, ktorý hľadáte. Ale skôr ako sa rozhodnete premiestniť priamo do grafiky, mali by ste si uvedomovať nevýhody tejto metódy:
- Zákazníci bez obrázkov nebudú vidieť počiatočnú čiaru a pravdepodobne neuvidia skrytý text, ktorý obrázok nahrádza. To môže urobiť tento odsek neprístupný alebo vôbec ťažko čitateľný.
- Obrázky vždy pridávajú k času načítania stránky. Ak máte veľa počiatočných čiar, môžete podstatne zvýšiť čas sťahovania, čo by bolo podľa mnohých ľudí zanedbateľné.
- Niektoré prehliadače zobrazia skryté prvé písmeno a obrázok - čo môže spôsobiť, že text odstavca je nepárny.
- Je veľmi ťažké túto možnosť automatizovať, pretože musíte presne vedieť, čo je prvé písmeno, aby ste použili správnu grafiku. Takže pri každej úprave odseku budete možno musieť vytvoriť novú grafiku.
Najprv musíte vytvoriť grafiku prvého písmena. Používal som Photoshop na vytvorenie písmena L písmenom "Edwardian Script ITC". Urobil som to obrovský - veľkosť 300pt. Potom som orezal obrázok do holého minima okolo písmena a poznamenal si šírku a výšku záberu.
Potom som pre svoj odsek vytvoril triedu "capL". Tu definujem, ktorý obrázok sa má používať, vedúci (výška) a tak ďalej.
Na nastavenie odsadenia textu a zarážky a výplne je potrebné použiť šírku a výšku obrázka. Pre môj L obraz potrebujem 95px indent a 72px padding.
p.capL {riadok-výška: 1em; obrázok-pozadie: url (capL.gif); opakovanie pozadia: opakovanie; textová zarážka: 95px; polstrovanie: 72px; }Ale to nie je všetko. Ak tam necháte, prvé písmeno bude duplikované v odseku - najprv s grafikou a potom v texte. Takže som pridal prvý prvok do triedy "initial" - a povedal prehliadaču, aby nezobrazil tento list:
span.initial {zobrazenie: žiadne; }A grafické zobrazenie sa potom zobrazí správne. Môžete hrať s odsadením textu v odseku, aby ste získali text priložený k písmenu, ale chcete, aby sa zobrazil.