Naucz się używać CSS tworzyćfantazyjny początkowe czapki dla twoich akapitów. Istnieje nawet prosta technika zastępowania obrazu, dzięki której można użyć obrazu graficznego do początkowej czapki.
Podstawowe style początkowych czapek
Istnieją trzy podstawowe style inicjałów w dokumentach:
- Podniesiony - najczęstszy, gdzie pierwsza litera jest większa i znajduje się w tym samym wierszu, co aktualny tekst.
- porzucone - również dość powszechne, gdzie pierwsza litera jest większa i opada poniżej pierwszego wiersza tekstu. Poniższy tekst unosi się wokół niego.
- Sąsiadujący - gdzie pierwsza litera znajduje się w jednej kolumnie obok reszty tekstu. Jest to bardziej powszechne w druku niż w projektowaniu stron internetowych.
Czapki początkowe lub wpuszczane są bardzo znajome. Są świetnym sposobem na ubieranie długich i nudnych fragmentów tekstu. A dzięki właściwości CSS: first-letter, możesz łatwo zdefiniować, jak sprawić, by Twoje pierwsze litery były bardziej wyszukane.
Utwórz prostą czapkę początkową
Wszystko, co musisz zrobić, aby utworzyć prosty podniesiony inicjał, to powiększyć pierwszą literę akapitu za pomocą pseudoelementu pierwszej litery:
p: pierwsza litera { rozmiar czcionki: 3em; }
Ale wiele przeglądarki zobacz, że pierwsza litera jest większa niż reszta tekstu w wierszu, więc interlinia jest równa temu, co miałoby sens dla tej pierwszej litery, a nie reszty wiersza. Na szczęście można to łatwo naprawić za pomocą pseudoelementu pierwszej linii i właściwości line-height:
p: pierwsza litera { rozmiar czcionki: 3em; }
p: pierwszy wiersz { wysokość wiersza: 1em; }
Baw się wysokością linii w dokumencie, aż znajdziesz odpowiedni rozmiar tekstu.
Graj z początkowym limitem
Gdy zrozumiesz, jak stworzyć początkową czapkę, możesz ubrać ją w fantazyjne ubrania, aby się wyróżniała. Baw się kolorami, kolorami tła, obramowaniami lub czymkolwiek, co Ci się podoba. Dość prosty styl polega na odwróceniu kolorów czcionki i koloru tła tylko dla pierwszej litery:
p: pierwsza litera {
rozmiar czcionki: 300%;
kolor tła: #000;
kolor: #fff;
}
p: pierwszy wiersz { wysokość wiersza: 100%; }
Kolejną sztuczką jest wyśrodkowanie pierwszej linii. Może to być trudne w przypadku CSS, ponieważ środek linii tekstu może być inny, jeśli Twój układ jest elastyczny. Ale po zabawie z wartościami możesz wciąć swój pierwszy wiersz na tyle, aby pierwsza litera wydawała się być pośrodku. Po prostu pobaw się wartością procentową wcięcia tekstu akapitu, aż będzie wyglądać dobrze:
p: pierwsza litera {
rozmiar czcionki: 300%;
kolor tła: #000;
kolor: #fff;
}
p: pierwszy wiersz { wysokość wiersza: 100%; }
p { wcięcie tekstu: 45%; }
Sąsiednie początkowe czapki są trudne z CSS
Sąsiednie wersaliki początkowe mogą być trudne w CSS, ponieważ różne przeglądarki wyświetlają czcionki w różny sposób. Ideą stojącą za tworzeniem sąsiedniego cap w CSS jest użycie właściwości text-indent w pierwszym wierszu, aby wypchnąć go (po lewej) na wartość ujemną. Musisz także zmienić lewy margines tego akapitu o pewną wartość. Baw się tymi liczbami, aż akapit będzie wyglądał dobrze.
p {
wcięcie tekstu: -2.5em;
margines lewy: 3em;
}
p: pierwsza litera { rozmiar czcionki: 3em; }
p: pierwszy wiersz { wysokość wiersza: 100%; }
Naprawdę wymyślne początkowe czapki
Najlepszym sposobem na stworzenie fantazyjnego inicjału jest zmiana czcionki na bardziej dekoracyjną rodzinę czcionek. Jeśli używasz seria czcionek po którym następuje a ogólna czcionka, pomoże to zagwarantować, że początkowy limit będzie dobrze widoczny, aby klienci mogli go zobaczyć, bez wchodzenia w problemy z dostępnością i użytecznością.
p: pierwsza litera {
rozmiar czcionki: 3em;
rodzina czcionek: "Edwardian Script ITC", "Brush Script MT", kursywa;
}
p: pierwszy wiersz { wysokość wiersza: 100%; }
I, jak zwykle, możesz połączyć wszystkie te sugestie, aby utworzyć wstępny limit, który będzie pasował do Twojego akapitu.
Korzystanie z graficznego początkowego nasadki
Jeśli mimo wszystko nadal nie podoba Ci się wygląd początkowych czapek na stronie, możesz skorzystać z grafiki, aby uzyskać dokładnie taki efekt, jakiego szukasz. Zanim jednak zdecydujesz się przejść od razu do grafiki, powinieneś zdać sobie sprawę z wad tej metody:
- Klienci bez obrazów nie zobaczą początkowego ograniczenia i mogą nie widzieć ukrytego tekstu zastępowanego obrazem. Może to sprawić, że akapit będzie niedostępny lub w najlepszym przypadku trudny do odczytania.
- Obrazy zawsze dodają się do czasu pobierania strony. Jeśli masz dużo początkowych limitów, możesz znacznie wydłużyć czas pobierania, ponieważ wiele osób uznałoby to za nieistotne.
- Niektóre przeglądarki wyświetlają zarówno ukrytą pierwszą literę, jak i obraz, co może sprawić, że tekst akapitu będzie wyglądał dziwnie.
- Bardzo trudno jest zautomatyzować tę opcję, ponieważ musisz dokładnie wiedzieć, jaka jest pierwsza litera, aby użyć właściwej grafiki. Tak więc za każdym razem, gdy akapit jest edytowany, może być konieczne utworzenie nowej grafiki.
Najpierw musisz stworzyć grafikę pierwszej litery. Użyliśmy Photoshopa do stworzenia litery L z czcionką „Edwardian Script ITC”. Zrobiliśmy to ogromne — 300pt. Następnie przycięliśmy obraz do absolutnego minimum wokół litery i odnotowaliśmy szerokość i wysokość obrazu.
Następnie stworzyliśmy klasę "capL" dla naszego akapitu. Tutaj definiujemy, jakiego obrazu użyć, interlinię (wysokość linii) i tak dalej.
Musisz użyć szerokości i wysokości obrazu, aby ustawić wcięcie tekstu i dopełnienie akapitu. Dla naszego obrazu L potrzebowaliśmy wcięcia 95px i wypełnienia 72px.
p.capL {
wysokość linii: 1em;
obraz w tle: url (capL.gif);
powtarzanie w tle: bez powtórzeń;
wcięcie tekstu: 95px;
dopełnienie górnej części: 72px;
}
Ale to nie wszystko. Jeśli to tam zostawisz, pierwsza litera zostanie zduplikowana w akapicie, najpierw z grafiką, a następnie w tekście. Dodaliśmy więc span wokół tego pierwszego elementu z klasą „initial” i powiedzieliśmy przeglądarce, aby nie wyświetlała tej litery:
span.initial { wyświetlanie: brak; }
Grafika jest wtedy wyświetlana poprawnie. Możesz bawić się wcięciem tekstu w akapicie, aby tekst był dopasowany do litery, tak jak chcesz, aby był wyświetlany.