15 Kasulikud CSS trikid, mida teil on võimalik näha

Kui olete olnud mõneks ajaks veebipõhine arendaja, on suur tõenäosus, et teil on olnud hetk, kui proovisite teada saada, kuidas midagi kodeerida ja mõnevõrra googlingi järel aru saada, et “selleks on CSS”. Kui sa poleks seda teinud, siis sa lähed juba.

See postitus on selliste CSS-koodide kogum, mis annavad teile selliseid funktsioone nagu elemendi pööramine kleepuvaks, annab kriipsjoonele allajoonimise võimalused, voolab teie lehe teksti erilisel kujul või saavutab parallaksi efekti. Mõned neist on laialdaselt toetatud, samas kui teised on teel kõikidele brauseritele täielikku toetust.

1. Numeratsiooni pealkirjad ja alamrubriigid

   Ütle, et teil on dokumendis pealkirjad ja alamrubriigid ning sa nummerdad neid käsitsi või skripti kaudu. Selle asemel saate seda teha CSS-loenduritega. Siin on juba olemas põhjalik postitus. Ja kuna see pärineb CSS2 spetsifikatsioonist, võite panustada, et seda toetavad kõik brauserid, välja arvatud ehk IE 6.

2. Spice Up Plain Underlines

   Mõnikord tahame rõhutada kena punktiir- või katkendjoonega tahke ühe asemel. Kuna selleks pole mingit valikut, siis me elame piirjoon. Aga piirjoon ei ole hea lahendus, kui tekst, mida alandate.

   CSS3 määras teksti kaunistamiseks mitte ühe, vaid kolm uut omadust teksti-kaunistusvärv, teksti-kaunistus-liin, ja teksti-kaunistamise stiil mis võib olla hea vana teksti kaunistus.

   Neid saab kasutada allakriipsutamise, ülevoolu, isegi teksti vilkumise ja muu kujundamiseks. Alates 2015. aasta aprillist toetab seda funktsiooni ainult Firefox, kuid saate lubada “eksperimentaalsed veebiplatvormi funktsioonid” seda Chrome'is kasutada.

3. Tsitaadi pakkumine

   Kõigepealt ei ole vaja lühikese hinnapakkumise korral õigete lokkide hinnapakkumiste kirjutamise järele, sest HTML-i jaoks on: silt, mis näitab inline noteeringuid.

   The tag ka sisemiste jutumärkide tsiteerimist üksikute jutumärkidega. Niisiis, kus on “selleks on „CSS”” hetkel?

   Võimaldame öelda, et te ei soovi vaikimisi tsiteeritud tsitaate või kui teil on rohkem kui üks sisestatud hinnapakkumiste tase, saate määrata oma tsiteerimissuvandid CSS-i jaoks CSS2 abil tsitaat vara.

4. Nõrkade tabelite haldamine

   Võib-olla olete leidnud suure tabeli erineva sisuga suuruse kohta lahtri kohta, mis keeldub jäämast teie määratud laiusega, olenemata sellest, mida te proovite. Tame seda tabelit tabeli paigutus kinnisvara (võrdse veeru kõrguse puhul järgige seda linki).

   Täpsustamiseks on parandus tabeli paigutus: fikseeritud; väärtus. Kui määrate tabelile fikseeritud paigutuse, määrab tabel ja lahtri laius tabeli laius või esimese lahtrirea (mida saab kasutaja määrata) ja mitte sisu järgi. Seda toetavad kõik brauserid.

5. Tee see kleepuvaks

   Kleepuvad elemendid on lehekülje elemendid, mida ei saa kerida. Teisisõnu jääb see nähtavale alale (vaateava või kerimiskast). Seda saab luua CSS-iga kasutades asend: kleepuv;.

   Nad toimivad suhteliselt positsiooniga elementidena enne mis tahes kerimist ja hiljem sarnaseid fikseeritud elemente, kui on saavutatud kerimislävi. Praeguseks, ainult Firefox toetab seda.

6. Hangi oma tekst kuju

   Kas soovite, et teie lehekülje tekst kõverdaks kenasti mõne selle kõrval kuvatud pildi üle? Võid proovida CSS-kujundid. CSS-vormide rakendamiseks saame kasutada kolme omadust kuju-väljaspool, kuju-marginaal ja kuju-kujutise künnis. Alates 2015. aasta aprillist toetab CSS-kujundeid webkit-brauserid.

7. Kohustuslikud väljad

   Kui teil on vorm, on suur võimalus, et mõned selles valdkonnas on vajalikud, samas kui teised ei ole. Te peate andma kasutajatele teada, milline on see. Selle jaoks on CSS :nõutud : vabatahtlik pseudoklassid. Kõik kaasaegsed brauserid toetavad neid.

8. Värvikad

   Kui sulle ei meeldi teatud värv, nagu sinine, siis saame valitud ala värvida mõne muu värviga ja :: valik pseudoelement on selle jaoks CSS. Seda toetavad kõik kaasaegsed brauserid.

9. Kas ma kontrollisin seda?

   Olukorras, kus märkeruut on kontrollitud, oleks tore, et vaikimisi märkeruudu sees oleks väike märk, et märkida, et üksus on kontrollitud.

   CSS on selle jaoks, mis kasutab vahetu õde-vendade vahelist sidet, kaks elementi kõrvuti. CSS-l on külgneva venna valija, mida tähistab pluss + märk, ja me saame seda kasutada etiketi sihtimiseks märkeruudu kõrval. Aga milline on kontrollitud märkeruudu sihtimine? On olemas : kontrollitud pseudo-klass.

10. Meeldib A Storybook

    Siis ei oleks see tore, kui esimene “O” Euroopa “Üks kord” tundub ilus? Me saame teha selle ilusaks, pärast seda on olemas ka CSS. Siin on koht, kus :: esimene täht pseudoelement jõuab päästa. See on suunatud sihtelemendi esimese rea esimesele tähele. Loe siit lähemalt.

11. Kas soovite rohkem teada?

    Elemendil võib olla atribuudile klass X või andmed Y või mõni muu väärtus. Kui me peame kunagi näitama sellise elemendi atribuudi väärtust selle lähedal, saame seda kasutada sisu: attr (X). See otsib elemendi X atribuudi väärtuse, siis saame seda selle elemendi kõrval näidata.

12. Väike bitt vasakule

    CSS-i algajatele mõeldud elementide tsentreerimine on üsna hulk. Erinevad elemendid nõuavad nende tsentreerimiseks erinevaid CSS-omadusi. Me vaatleme ühte näidet paljudest, mis on saadaval ülemaailmses veebis, et saaksite jälle meelde jätta, et asju CSS keskendub.

13. Avalikustage linkide failivorming

    Kunagi näinud linki lähedal olevat väikest pilti, mis näitab, milline see link on? PDF? või DOC? Jah, selle saavutamiseks on CSS. The sisu: url () mida me kasutame linkide taga oleva pildi kuvamiseks.

14. Parallaaksi efekti käivitamine

    Parallaksifekt on efekt, mida kasutatakse taustal oleva taustaga näiliselt aeglase liikumise kirjeldamiseks. See efekt on populaarne veebisaitidel, mis kasutavad parallaksi kerimist. Selle rakendamiseks on erinevaid viise, alltoodud näide töötab Firefoxis koos tausta-kinnitus: fikseeritud;.

15. CSS-animatsioonide võimsus

    Ilmselt mitte suur “selleks on CSS” hetkeks, sest te kõik olete ilmselt teadlikud CSS-animatsioonidest. Kuid väike meeldetuletus pole kahju. CSS-animatsioonide jaoks on palju võimalusi, kuid siin on üks lihtne värvimine.

Nüüd loe: 50 Kasulikud CSS-i väljavõtted Iga disainer peaks olema