Stavak Dropcap s elementima CSS-a prvog reda i prvog slova

Postoji nekoliko CSS selektora ili svojstava za koje mislim da se rijetko koriste u divljini, ali zapravo postoje od dana CSS1; neke od njih uključuju :prvi red i :prvo slovo pesudo-elementi.

Kako koristiti?

Ti pseudoelementi u osnovi rade slično njihovim braćom i sestrama -: prije i poslije - i mislim da su također prilično izravni. :prvo slovo će ciljati prvo slovo ili znak odabranog elementa, to pseudo elemenata obično se koristi za stvaranje tipografskog učinka poput kapice. Evo kako se to radi.

 p: prvo slovo font-size: 50px;  

Ovaj kod rezultira sljedećom prezentacijom.

Treba napomenuti nekoliko stvari, međutim, ovaj efekt će se primijeniti samo kada prvom znaku ne prethodi drugi element, na primjer, slika. Osim toga, kada imamo neke iste ciljane elemente u nizu, to će također utjecati na sve njih.

Nadalje, u smislu :prvi red, ovaj pseudo elemenata će ciljati prvi redak ciljanog elementa, ovaj primjer pokazuje kako smo podebljali prvi redak odlomka.

 p: prva linija font-weight: bold;  

Kao kod prethodnika :prvo slovo, to će također utjecati na sve prve retke u elementima stavka koji se nalaze na stranici.

Dakle, u stvarnim slučajevima, kada općenito želimo dodati kapu ili izmijeniti prvu liniju samo na prvom paragrafu trebamo biti specifičniji - ili dodavanjem dodatnog atributa klase ili primjenom tih pseudo-elemenata zajedno s : Prvo dijete ili : Prvi od tipa Tako je.

 p: prvo dijete: prvo slovo font-size: 50px;  p: prvo dijete: prva linija font-weight: bold;  

Eto, dotični paragraf je sada samo prvi.

Pseudo-elementi na djelu

U redu, pokušajmo sada osmisliti bolji izgled stavka koristeći pseudo-elemente. Ali prije nego što počnemo trebamo poseban font za našu kapu i ovdje je moj izbor: Hominis Paula Lloyda. Zatim definiramo novu obitelj fontova u stilu, kako slijedi.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); format src: url ('fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') format ('woff'), url ('fonts / HOMINIS-webfont.ttf ') format (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); težina fonta: normalna; font-style: normal;  

Zatim postavljamo zadanu obitelj fontova za paragrafe.

 p boja: # 555; obitelj fonta: 'Georgia', Times, serif; visina linije: 24px;  

U ovom primjeru koristit ćemo : Prvo dijete birač da biste ciljali prvi stavak i primijenili ukrasne stilove kako bi izgledao istaknutije:

 p: prvo dijete (padding: 30px; granica lijevo: 5px solid # 7f7664; boja pozadine: # f5f4f2; visina linije: 32px; kutija-sjena: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); pozicija: relativna;  

Zatim dodamo kapu kapima :prvo slovo, povećajte veličinu fonta i dodijelite mu novu obitelj fontova;

 p: prvo dijete: prvo slovo font-size: 72px; plutajući: lijevo; obloga: 10px; visina: 64px; obitelj fonta: 'HominisNormal'; boja pozadine: # 7F7664; margin-right: 10px; boja: bijela; granični polumjer: 5px; visina linije: 70px;  

Istaknut ćemo i prvi redak :prvi red, tako.

 p: prvo dijete: prva linija font-weight: bold; veličina fonta: 24px; boja: # 7f7664;  

Na kraju, želimo dodati prvi dekorativni atribut uz uporabu spajalice :nakon pseudo elemenata.

 p: prvo dijete: poslije background: url ("… / images/paper-clip.png") svitak bez ponavljanja 0 0 transparentan; sadržaj: ""; prikaz: inline-blok; visina: 100px; položaj: apsolutni; desno: -5px; vrh: -35px; širina: 100px;  

To je sve što nam treba, sada bi naš paragraf trebao izgledati mnogo bolje;

Možete pogledati i demonstraciju uživo sa sljedećih veza:

• Prikaži demo
• Preuzimanje izvora

Konačna misao

Kao što smo ranije spomenuli u ovom postu, ti pseudoelementi, konkretno :prvo slovo i :prvi red je uključen od CSS1, stoga su i podržani čak iu programu Internet Explorer 8 ranije.

Ipak, koliko ja znam, oni se u velikoj mjeri ne provode u divljini. Nadamo se da će vas ovaj vodič na neki način potaknuti da isprobate ove CSS značajke na vašoj web-lokaciji.