15 Koristni CSS triki, ki bi jih lahko spregledali

Če ste že nekaj časa delali kot razvijalec spletnih strani, obstaja velika verjetnost, da ste imeli trenutek, ko ste skušali ugotoviti, kako lahko nekaj kodirate in se udejanjite po malem Googlingu, “za to obstaja CSS”. Če tega ne bi storili, se boste kmalu.

Ta objava je zbirka takih kod CSS, ki vam lahko dajo funkcije, kot je lepljenje elementa, omogočajo poudarjene črte, podajajo besedilo vaše strani v posebni obliki ali dosežejo paralaksni učinek. Nekatere od njih so široko podprte, druge pa so na poti za popolno podporo vseh brskalnikov.

1. Številčne oznake in podštevilke

   Recimo, da imate v dokumentu niz naslovov in podnaslovov in jih oštevilčujete ročno ali prek skripta. V ta namen lahko uporabite števce CSS. Tukaj je že poglobljena objava. In ker je iz specifikacij CSS2, lahko stavite, da ga podpirajo vsi brskalniki, razen morda IE 6.

2. Začinite navadne poudarke

   Včasih želimo poudariti z lepo pikčasto ali črtkano črto namesto trdne. Ker za to ni možnosti, se moramo zadovoljiti obrobno-dno. Toda obrobno-dno ni dobra rešitev, če besedilo, ki ga podčrtate, obdaja.

   CSS3 ni podal nobene, ampak tri nove lastnosti za dekoracijo besedila barva besedila-dekoracije, text-decoration-line, in slog dekoracije besedila ki se lahko shorthanded v dobri stari dekoracija besedila.

   Te lahko uporabite za podčrtavanje sloga, prekrivanje, celo za utripanje besedila in še več. Od aprila 2015 to lastnost podpira samo Firefox, vendar ga lahko omogočite “funkcije eksperimentalne spletne platforme” za uporabo v Chromu.

3. Citiranje citata

   Prvič, ni potrebe, da bi se ukvarjali s tipkanjem pravilnih zavihanih citatov za kratke citate, ker obstaja HTML za to: oznaka, ki označuje navidezne kotacije.

   The oznaka skrbi tudi za navajanje notranjih kotacij z enojnimi narekovaji. Torej, kje je “za to obstaja „CSS“” trenutek v tem?

   Recimo, da ne želite, da privzeti dvojni narekovaji ali imate več kot eno stopnjo ugnezdenih narekovajev, lahko določite svoje nastavitve ponudbe za element citata s CSS z uporabo CSS2 ponudb nepremičnine.

4. Upravljanje nepreglednih tabel

   Morda ste naleteli na veliko mizo z različno velikostjo vsebine na celico, ki noče ostati znotraj širine, ki ste jo določili, ne glede na to, kaj poskusite. Pokrijte to mizo z postavitev tabele lastnost (za enako višino stolpca sledite tej povezavi).

   Če želimo biti natančnejši, je popravek v postavitev tabele: fiksna; vrednost. Če za tabelo določite fiksno postavitev, se tabela in širina celice določita s širino tabele ali prve vrstice celic (ki jo lahko določi uporabnik) in ne po vsebini. To podpirajo vsi brskalniki.

5. Make It Sticky

   Lepljivi elementi so elementi na strani, ki se ne bodo premikali iz pogleda. Z drugimi besedami se drži vidnega območja (okno za ogled ali drsenje). To lahko ustvarite z uporabo CSS položaj: lepljiv;.

   Delujejo kot sorazmerno postionirani elementi pred vsakim pomikanjem in pozneje kot fiksni elementi, ko je dosežen prag pomikanja. Za zdaj, samo Firefox podpira.

6. Pridobite besedilo v obliki

   Želite, da se besedilo na vaši strani lepo pregiba nad sliko, ki ste jo prikazali poleg nje? Lahko poskusite Oblike CSS. Za izvedbo CSS oblik lahko uporabimo tri lastnosti oblika zunaj, Oblika-oblika in prag oblike slike. Od aprila 2015 CSS Oblike podpira spletni brskalniki.

7. Obvezna polja

   Če imate obrazec, obstaja velika verjetnost, da so nekatera polja v njem zahtevana, medtem ko drugi niso. Morali boste vedeti, kateri uporabniki so. CSS za to je : potrebno :neobvezno psevdo razrede. Vsi moderni brskalniki jih podpirajo.

8. Izbirčen z barvami

   Če vam ni všeč določena barva, kot je modra, lahko izbrano področje obarvamo z drugo barvo in :: izbor pseudo element je CSS za to. To podpirajo vsi moderni brskalniki.

9. Sem preveril?

   V primeru, da je bilo preverjeno potrditveno polje, bi bilo lepo, če bi imeli drug znak poleg majhne kljukice v potrditvenem polju, ki označuje, da je bil element preverjen.

   Obstaja CSS za tisto, ki izkorišča vez med neposrednimi brati in sestrami, dva elementa drug ob drugem. CSS ima sosednji selektor, ki ga označuje plus + in ga lahko uporabimo za ciljno usmerjanje nalepke poleg potrditvenega polja. Kaj pa najprej s ciljnim potrditvenim poljem? Tukaj je : označeno psevdo razred za to.

10. Like A Storybook

    Potem, ne bi bilo lepo, če bi prvi “O” v “Nekoč” izgleda precej? Lahko naredimo, da bo videti lepa, navsezadnje je CSS za to. Tukaj je kraj :: prva črka psevdo element prihaja v reševanje. Usmerja se v prvo črko prve vrstice ciljnega elementa. Več o tem preberite tukaj.

11. Bi radi vedeli več?

    Element ima lahko atribut razred X ali podatke Y ali kakšno drugo vrednost. Če bomo kdaj morali prikazati tako atributno vrednost elementa v bližini, lahko uporabimo vsebina: attr (X). Pridobi vrednost atributa X elementa, potem pa jo lahko prikažemo poleg elementa.

12. Malo več levi

    Centriranje elementov za začetnike CSS je pravi podvig. Različni elementi zahtevajo drugačen nabor lastnosti CSS, da jih centrirajo. Preučili bomo en primer iz mnogih, ki je na voljo v svetovnem spletu, tako da se lahko še enkrat spomnite, da je CSS osredotočen na stvari.

13. Razkrij obliko datotek povezav

    Si kdaj videl majhno sliko v bližini povezave, ki kaže, kaj je ta povezava? PDF? ali DOC? Da, to je CSS. The vsebina: url () bomo uporabili za prikaz slike za povezavami.

14. Učinek sprožilca paralakse

    Učinek paralakse je učinek, ki se uporablja za opis na videz počasnega gibanja ozadja glede na ospredje. Ta učinek je priljubljen na spletnih mestih, ki izvajajo pomikanje po paralaksi. Obstajajo različni načini za izvedbo, spodnji primer deluje v Firefoxu z priloga v ozadju: fiksna;.

15. Moč animacij CSS

    Verjetno ne veliko “za to obstaja CSS” trenutek, ker ste vsi verjetno že seznanjeni z animacijami CSS. Toda malo opomnika ni škodljivo. Obstaja veliko uporab za animacije CSS, toda tukaj je ena za preprosto vadbo barvanja.

Sedaj preberite: 50 Koristni odlomki CSS Vsak oblikovalec bi moral imeti