15 Korisni CSS trikovi koje ste možda previdjeli

Ako ste neko vrijeme radili kao frontend web developer, postoji velika vjerojatnost da ste imali trenutak kada ste pokušavali saznati kako kodirati nešto i shvatiti nakon malo googlinga, “postoji CSS za to”. Da niste, dobro ste spremni.

Ovaj post je zbirka takvih CSS kodova, koji vam mogu dati značajke kao što je okretanje elementa ljepljiv, dati vam crtkane linije podcrtavanje mogućnosti, tok teksta stranice u posebnom obliku, ili postići paralaksu učinak. Neki od njih su široko podržani, dok su drugi na putu za punu podršku svih preglednika.

1. Naslovi i podnaslovi brojeva

   Recimo da imate skup zaglavlja i podnaslova u dokumentu i da ih numerirate ručno ili putem skripte. Umjesto toga, možete koristiti CSS brojače da biste to učinili. Ovdje već postoji detaljan post. A budući da je iz CSS2 specifikacija, možete se kladiti da ga podržavaju svi preglednici, osim možda IE 6.

2. Začinite ravničarske podcjene

   Ponekad želimo naglasiti lijepom točkastom ili isprekidanom linijom umjesto čvrstom. Budući da nema mogućnosti za to, zadovoljit ćemo se border-bottom. Ali border-bottom nije dobro rješenje ako tekst koji podcrtavate oblaže.

   CSS3 je odredio ne jedno nego tri nova svojstva za dekoraciju teksta text-decoration boji, text-decoration linije, i text-decoration stilu koji se može skratiti u staro dobro text-decoration.

   Možete ih koristiti za podcrtavanje stila, preklapanje, čak i za treptanje teksta i još mnogo toga. Od travnja 2015. samo Firefox podržava ovo svojstvo, ali ga možete omogućiti “eksperimentalne značajke web-platforme” da biste ga upotrebljavali u Chromeu.

3. Citiranje ponude

   Prije svega, nema potrebe da se gnjavite s upisivanjem ispravnih kovrčavih citata za kratke citate jer postoji HTML za to: koja označava umetnute ponude.

   oznaka također vodi brigu o navođenju unutarnjih citata s pojedinačnim navodnicima. Dakle, gdje je “za to postoji 'CSS'” trenutak u ovome?

   Recimo da ne želite da zadani dvostruki navodnici ili imate više od jedne razine ugniježđenih navodnika, možete definirati postavke citata za element citata pomoću CSS-a pomoću CSS2 citati svojstvo.

4. Upravljanje nepobitnim tablicama

   Možda ste naišli na veliki stol s različitim sadržajem sadržaja po ćeliji koji odbija ostati unutar širine koju ste naveli, bez obzira na to što pokušate. Ukrotite taj stol stolni izgleda svojstvo (za jednaku visinu stupca, slijedite ovu vezu).

   Da budemo precizniji, popravak je u raspored tablice: fiksno; vrijednost. Kada dodijelite fiksni raspored za tablicu, tablica i širina ćelije određuju se širinom tablice ili prvog retka ćelija (koje može definirati korisnik), a ne sadržajem. To podržavaju svi preglednici.

5. Neka bude ljepljivo

   Ljepljivi elementi su elementi na stranici koja se neće pomicati izvan pogleda. Drugim riječima, drži se na vidljivom području (okvir za prikaz ili okvir za pomicanje). Ovo možete stvoriti pomoću CSS-a položaj: ljepljiv;.

   Oni djeluju kao relativno postionirani elementi prije bilo kojeg pomicanja, a kasnije kao fiksni elementi kada se dosegne prag pomicanja. Zasad, samo Firefox podržava.

6. Primite tekst u obliku

   Želite li da tekst na vašoj stranici lijepo zavije nad nekom slikom koju ste prikazali pored nje? Možete isprobati Oblici CSS-a. Da bismo implementirali CSS oblike, možemo koristiti tri svojstva oblik-vanjski, oblik-margin i Oblik slika praga. Od travnja 2015. CSS Oblici su podržani od strane webkit preglednici.

7. Obavezna polja

   Ako imate obrazac postoji velika vjerojatnost da su neka polja u njemu obavezna, dok druga nisu. Morat ćete obavijestiti korisnike koji je koji. CSS za to jest :potreban : izborni pseudo klase. Podržavaju ih svi moderni preglednici.

8. Izbirljiva s bojama

   Ako vam se ne sviđa određena boja, kao što je plava, možemo obojiti odabrano područje s nekom drugom bojom i ::izbor pseudo element je CSS za to. To podržavaju svi moderni preglednici.

9. Jesam li provjerio?

   U slučaju da je označen potvrdni okvir, bilo bi lijepo imati još jednu oznaku osim malene kvačice unutar zadanog potvrdnog okvira kako bi se označilo da je stavka označena.

   Postoji CSS za ono što iskorištava vezu između neposrednih braće i sestara, dva elementa jedan uz drugi. CSS ima susjedni selektor koji označava plus + i možemo ga upotrijebiti za ciljanje oznake pokraj okvira za izbor. Ali što je s ciljanjem najprije označenog potvrdnog okvira? Tu je Isprobali pseudo klasa za to.

10. Poput zbirke priča

    Onda, ne bi li bilo lijepo kad bi prvi “O” u “Jednom davno” izgleda lijepo? Možemo učiniti da izgleda lijepo, nakon svega postoji CSS za to. Ovdje je mjesto gdje ::prvo slovo pseudo element dolazi u pomoć. Ona cilja prvo slovo prvog retka ciljanog elementa. Više o tome pročitajte ovdje.

11. Želite li znati više?

    Element može imati klasu X ili podatke Y ili neku drugu vrijednost za atribut. Ako ikada trebamo prikazati takvu atributnu vrijednost elementa u blizini, možemo koristiti Sadržaj: attr (X). Dohvaća vrijednost atributa X elementa, a zatim je možemo prikazati pored elementa.

12. Malo više lijevi

    Centriranje elemenata za CSS početnike je pravi podvig. Različiti elementi zahtijevaju drugačiji skup svojstava CSS-a za njihovo centriranje. Razmotrit ćemo jedan primjer od mnogih koji je dostupan u World Wide Webu, tako da se možete ponovno sjetiti da postoji CSS za centriranje stvari.

13. Otkriti format datoteke veza

    Jeste li ikada vidjeli malu sliku u blizini veze koja pokazuje što je ta veza? PDF? ili DOC? Da, postoji CSS da to postigne. sadržaj: url () je ono što ćemo koristiti za prikaz slike iza veza.

14. Utjecaj paralakse

    Učinak paralakse je učinak koji se koristi za opisivanje naizgled sporog kretanja pozadine u odnosu na prednji plan. Taj je učinak popularan na web-lokacijama koje implementiraju pomicanje paralakse. Postoje različiti načini za njegovu implementaciju, primjer u nastavku radi u Firefoxu s pozadina-privitak: fiksna;.

15. Snaga CSS animacija

    Vjerojatno nije ogroman “postoji CSS za to” trenutak, jer ste svi vjerojatno već svjesni CSS animacija. Ali mali podsjetnik nije štetan. Postoje mnoge koristi za CSS animacije, ali ovdje je jedan za jednostavnu vježbu bojanje.

Sada pročitajte: 50 korisnih CSS isječaka Svaki dizajner bi trebao imati