Razumijevanje Pseudo-elementa prije i poslije
Cascading Style Sheet (CSS) je prvenstveno namijenjen primjeni stilova u HTML oznaci, ali u nekim slučajevima kada je dodavanje dodatnih oznaka dokumentu suvišno ili nije moguće, zapravo postoji značajka u CSS-u koja nam omogućuje dodavanje dodatnih oznaka bez ometanja stvarni dokument, odnosno pseudo-elementi.
Čuli ste za ovaj pojam, posebno kada ste slijedili neke od naših vodiča.
Zapravo postoji nekoliko CSS članova obitelji koji su klasificirani kao pseudo-elementi kao :prvi red, :prvo slovo, ::izbor, :prije i :nakon. Ali, za ovaj članak, ograničit ćemo našu pokrivenost samo na :prije i :nakon, “pseudo-elementi” ovdje će se posebno odnositi na oboje. Razmotrit ćemo ovu temu iz osnova.
Sintaksa i podrška preglednika
pseudo-elementi od tada su tu CSS1, ali :prije i :nakon o kojima ovdje raspravljamo, pušteni su CSS2.1. Na početku pseudo-elementi koristiti sintaksu s jednom dvotočkom, a zatim kao web evoluirao, u CSS3 pseudo-elementi revidirani su kako bi se koristilo dvostruko koloniranje ::prije & ::nakon - kako bi ga razlikovali pseudo-klase (tj. : hover, :aktivan, i tako dalje).
Međutim, bez obzira na to da li koristite format s jednim ili dvotočkom, preglednici će i dalje prepoznati. Budući da Internet Explorer 8 podržava samo jednožilni format, sigurnije je koristiti jednu dvotočku ako želite širu kompatibilnost preglednika.
Što to radi?
Ukratko, pseudo-elementi će umetnuti dodatni element prije ili nakon element sadržaja, pa kad ih oboje dodamo, oni su tehnički jednaki, sa sljedećom oznakom.
:prije To je glavni sadržaj. :nakon
Ali ti elementi zapravo nisu generirani na dokumentu. Oni su još uvijek vidljivi na površini, ali ih nećete naći na izvoru dokumenta, tako da praktično govore lažan elementi.
Korištenje pseudo-elemenata
koristeći pseudo-elementi relativno je lako; sljedeću sintaksu Selektor: prije će dodati element prije izbornik sadržaja dok je ova sintaksa Selektor: nakon će dodati nakon njega, a za dodavanje sadržaja unutar njih možemo koristiti sadržaj svojstvo.
Na primjer, isječak u nastavku će dodati znak navodnika prije i poslije blockquote.
blockquote: prije sadržaj: otvoreni citat; blockquote: poslije content: close-quote;
Styling pseudo-elementi
Unatoč tome što je lažni element pseudo-elementi zapravo se ponašaju kao “stvaran” element; možemo na njih dodati bilo koju deklaraciju stilova, kao što je promjena boje, dodavanje pozadine, prilagođavanje veličine fonta, poravnavanje teksta unutar njega i tako dalje.
blockquote: prije sadržaj: otvoreni citat; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; pozadina: #ddd; plutajući: lijevo; pozicija: relativna; vrh: 30px; blockquote: poslije content: close-quote; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; pozadina: #ddd; float: desno; pozicija: relativna; dno: 40px;
Određivanje dimenzije
Generirani elementi su po defaultu element inline-level, tako da kada ćemo odrediti visinu i širinu, prvo ga moramo definirati kao blok element pomoću prikaz: blok deklaracija.
blockquote: prije sadržaj: otvoreni citat; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; pozadina: #ddd; plutajući: lijevo; pozicija: relativna; vrh: 30px; granični radijus: 25px; / ** definiraju ga kao element bloka ** / prikaz: blok; visina: 25px; širina: 25px; blockquote: poslije content: close-quote; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; pozadina: #ddd; float: desno; pozicija: relativna; dno: 40px; granični radijus: 25px; / ** definiraju ga kao element bloka ** / prikaz: blok; visina: 25px; širina: 25px;
Priložite pozadinsku sliku
Također možemo zamijeniti sadržaj slikom, a ne samo običnim tekstom. iako sadržaj vlasništvo pruža URL () da biste umetnuli sliku, ali u većini slučajeva radije koristim pozadina imovine za veću kontrolu nad priloženom slikom.
blockquote: prije content: ""; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; plutajući: lijevo; pozicija: relativna; vrh: 30px; granični radijus: 25px; pozadina: url (images / quotationmark.png) -3px -3px #ddd; prikaz: blok; visina: 25px; širina: 25px; blockquote: nakon content: ""; veličina fonta: 24pt; poravnavanje teksta: centar; visina linije: 42px; boja: #fff; float: desno; pozicija: relativna; dno: 40px; granični radijus: 25px; pozadina: url (images / quotationmark.png) -1px -32px #ddd; prikaz: blok; visina: 25px; širina: 25px;
Međutim, kao što možete vidjeti na isječku iznad, još uvijek objavljujemo sadržaj i ovaj put s praznim nizom. sadržaj vlasništvo zahtjev i uvijek se mora primijeniti; u suprotnom pseudo elemenata neće raditi god.
Kombinacija s pseudo-klasama
Iako su drugačiji pseudo, možemo koristiti pseudo-klase zajedno s pseudo-elementi zajedno u jednom CSS pravilu, na primjer, ako želimo uključiti pozadina navodnika Malo tamnije kad prelazimo preko blockquote.
blockquote: hover: after, blockquote: lebdjeti: prije background-color: # 555;
Dodavanje efekta prijelaza
I možemo čak primijeniti tranzicija na njih stvoriti graciozan učinak prijelaza boje.
prijelaz: sve 350ms; -o-prijelaz: sve 350ms; -moz-tranzicija: sve 350ms; -webkit-prijelaz: sve 350ms;
Nažalost, čini se da učinak prijelaza funkcionira samo u najnovijoj verziji Firefoxa. Nadajmo se da će se više preglednika nadoknaditi kako bi se omogućila primjena vlasništva prijelaza pseudo-elementi u budućnosti.
- Demo
- Preuzimanje izvora
Više inspiracije
Kako bismo vas inspirirali, odabrali smo tri izvrsna primjera koja vam mogu dati ideje za vaš web dizajn.
Fascinantne sjene
U ovom tutorialu Paul Underwood je objasnio kako stvoriti realističniji i fascinantniji efekt sjene :prije i :nakon pseudo-elementi. Obje su pozicionirane apsolutno i postavljene u samom stražnjem dijelu negativan z-index vrijednost.
Stacked Image Effect
Koristiti pseudo-elementi za stvaranje neurednog naslaganog efekta slike samo s jednom slikom na oznaci također je moguće. pseudo-elementi se koristi za stvaranje iluzije naslaganih slika na stražnjoj strani stvarne slike pomoću negativnog z-index.
Zaključak
Pseudo-elementi je jednostavno “svjež” i konačno iskoristivi, u osnovi imamo dva bonus elementa za svaki element koji dodamo bez uplitanja u stvarnu HTML strukturu, a zatim ih pretvorimo u gotovo sve što možemo zamisliti.
Zapravo postoje određena poboljšanja pseudo-elementi na kojoj se trenutno radi, kao što je gniježdenje pseudo-elemenata div :: before :: before content: "; i više pseudo-elemenata div :: before (3) content: "; što će očito otvoriti mnogo više mogućnosti u praksi web dizajna u budućnosti. Dok se provode u trenutnim preglednicima, sada ćemo strpljivo čekati.
