Akapit Dropcap z elementami pierwszej linii i pierwszej litery CSS

Istnieje kilka selektorów CSS lub właściwości, które moim zdaniem są rzadko używane na wolności, ale faktycznie istnieją od czasów CSS1; niektóre z nich zawierają :Pierwsza linia i : pierwsza litera elementy pesudo.

Jak używać?

Te pseudoelementy w zasadzie działają podobnie jak ich rodzeństwo -: przed i: po - i myślę, że są również całkiem proste. The : pierwsza litera będzie to pierwsza litera lub znak wybranego elementu pseudoelement jest powszechnie używany do tworzenia efektu typograficznego, takiego jak zakrętka. Oto jak to się robi.

 p: first-letter font-size: 50px;  

Ten kod powoduje następującą prezentację.

Należy zwrócić uwagę na kilka rzeczy, jednak efekt ten będzie miał zastosowanie tylko wtedy, gdy pierwszy znak nie jest poprzedzony innym elementem, na przykład obrazem. Dodatkowo, gdy mamy niektóre z tych samych docelowych elementów z rzędu, wszystkie z nich również zostaną dotknięte.

Dalej, jeśli chodzi o :Pierwsza linia, to pseudoelement wyceluje w pierwszą linię elementu docelowego, poniższy przykład pokazuje, jak pogrubimy pierwszą linię akapitu.

 p: first-line font-weight: bold;  

Podobnie jak poprzedni kod : pierwsza litera, wpłynie to również na wszystkie pierwsze wiersze elementów akapitu na stronie.

Tak więc w rzeczywistych przypadkach, kiedy generalnie chcemy dodać drop cap lub zmienić pierwszą linię tylko w pierwszym akapicie musimy być bardziej konkretni - albo przez dodanie dodatkowego atrybutu klasy albo zastosowanie tych pseudoelementów wraz z :pierworodny lub : pierwszy w swoim rodzaju selektor, tak.

 p: first-child: first-letter font-size: 50px;  p: first-child: first-line font-weight: bold;  

Idziemy, dotknięty akapit jest teraz tylko pierwszym.

Pseudo-elementy w pracy

W porządku, spróbujmy teraz zaprojektować lepszy wygląd akapitu, używając pseudoelementów. Ale zanim zaczniemy, potrzebujemy specjalnej czcionki do naszej drop cap i oto mój wybór: Hominis by Paul Lloyd. Następnie definiujemy nową rodzinę czcionek w arkuszu stylów w następujący sposób.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url (format 'fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), format url ('fonts / HOMINIS-webfont.woff') ('woff'), url ('czcionki / HOMINIS-webfont.ttf ') format („truetype”), url (format „fonts / HOMINIS-webfont.svg # HominisNormal”) („svg”); waga czcionki: normalna; styl czcionki: normalny;  

Następnie ustawiamy domyślną rodzinę czcionek dla akapitów.

 p color: # 555; font-family: „Georgia”, Times, serif; line-height: 24px;  

W tym przykładzie użyjemy :pierworodny selektor do celowania w pierwszy akapit i stosowania stylów dekoracyjnych, aby wyglądał bardziej widocznie:

 p: first-child padding: 30px; border-left: 5px solid # 7f7664; kolor tła: # f5f4f2; line-height: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); pozycja: względna;  

Następnie dodajemy drop cap używając : pierwsza litera, powiększ rozmiar czcionki, a także przypisz do niej nową rodzinę czcionek;

 p: first-child: first-letter font-size: 72px; float: left; padding: 10px; wysokość: 64px; font-family: „HominisNormal”; kolor tła: # 7F7664; margines prawy: 10px; kolor biały; border-radius: 5px; line-height: 70px;  

Podkreślimy również pierwszą linię z :Pierwsza linia, tak.

 p: first-child: first-line font-weight: bold; rozmiar czcionki: 24px; kolor: # 7f7664;  

Na koniec chcemy dodać dekoracyjny atrybut do pierwszego akapitu za pomocą spinacza do papieru :po pseudoelement.

 p: first-child: after background: url ("… /images/paper-clip.png") przewijanie bez powtórzenia 0 0 przezroczyste; zawartość: " "; wyświetlacz: blok śródliniowy; wysokość: 100px; pozycja: absolutna; po prawej: -5px; top: -35px; szerokość: 100px;  

To cały potrzebny nam kod, teraz nasz akapit powinien wyglądać znacznie lepiej;

Możesz także zobaczyć prezentację na żywo z poniższych linków:

• Wyświetl demo
• Pobierz źródło

Końcowa myśl

Jak wspomnieliśmy wcześniej w tym poście, te pseudoelementy, a konkretnie : pierwsza litera i :Pierwsza linia został dołączony od CSS1, dlatego też są one wcześniej obsługiwane nawet w Internet Explorerze 8.

O ile mi wiadomo, nie są one tak szeroko wdrażane na wolności. Mamy więc nadzieję, że ten poradnik w jakiś sposób zainspiruje Cię do wypróbowania tych funkcji CSS na swojej stronie.