10 uskumatut CSS-i nippi oma veebipaigutuste muutmiseks

Igaüks, kellel on veebidisaini alal kogemusi, olenemata sellest, kas olete kasutanud DIY veebisaitide koostajaid või loonud saidi nullist, on tõenäoliselt CSS-ist varem kuulnud. Seda uskumatult võimsat tööriista saab kasutada teie veebipaigutuste muutmiseks, andes teile võimaluse oma veebisaiti kontrollida ja oma loomingulist visiooni saavutada. Kuid kuidas saate kasutada kaskaadlaadilehti oma järgmise veebisaidi potentsiaali avamiseks?

See juhend kirjeldab ainult CSS-i atribuute, mida on kasutatud ülaloleval pildil nähtava päise loomiseks. Selle projekti leiate siit CodePen, mis annab teile võimaluse seda ise proovida.

CSS-pildi manipuleerimine

Esimene samm, mida peame oma päise jaotise koostamiseks tegema, on lehele piltide lisamine. Selle eesmärgi saavutamiseks saate kasutada mitmesuguseid meetodeid, seega oleme käsitlenud kõige populaarsemat ja paari nippi, mis aitavad teil oma piltidega manipuleerida.

1. CSS-i taustpilt

Soovime, et meie päis oleks täisekraanil töötav taustpilt ja taustpildi CSS-i atribuut on ideaalne. Esiteks peame oma pildi (ja ülejäänud päises olevate elementide) jaoks looma konteineri.

Alustasime div-märgendi lisamisega, mille klassiks oli "päis", millele järgnes selle määramine kõrgus kuni 100vh ja selle laius kuni 100vw; see annab meile kasti, mis on vaateavaga täpselt sama suur. Lisasime ka CSS-i reegli lehe keha jaoks koos selle ülevool peidetud ja selle veerised on seatud 0 pikslile.

Kui konteiner on paigas, saame lisada taustapildi ja selle eesmärgi saavutamiseks vajame kolme erinevat CSS-i reeglit. Esimene, taustpilt, vajab URL-i, mis toimiks taustapildi allikana, ja oleme selleks kasutanud käepärast Unsplashi kataloogi. Samuti peame määrama tausta suurus kaaneni ja taust-asend alla, kuid parimate tulemuste saamiseks võiksite nendega katsetada.

2. CSS-i taust-segamisrežiim

CSS-i segamisrežiimid võimaldavad pilte ja teksti segada, sarnaselt tarkvaraga, nagu Adobe Photoshop, segamisfunktsiooniga. Segamisrežiimide koostamiseks meie taustpildiga määrasime taustavärv kuni poolläbipaistev valge enne segamisrežiimi lisamist, mida soovisime kasutada.

Pärast seda, tausta segamise režiim määrati pehmeks valguseks, mis võimaldab pilti pehmendada.

3. CSS-i lõiketee

Järgmise triki jaoks kasutame reeglit nimega lõiketee. Img HTML-märgendite kasutamisel saate määrata tee, mis peidab osa piltidest, millega töötate. Võite kasutada selleks üldisi kujundeid, kuid keerukama kujunduse loomiseks võite kasutada ka SVG-d genereerivat rakendust.

Lisasime div-märgendi "flex_image_box", et see toimiks kolme pildi konteinerina, kasutades kuvatava CSS-i atribuuti, et muuta see flexboxiks (sellest räägime hiljem). Div-sildi sisse lisati kolm img-märgendit, mille ID-deks määrati "img1", "img2" ja "img3". Seadistades iga pildi laius kuni 600 pikslit, me suudame jätke kõrguse atribuut tühjaks ilma piltide kuvasuhet muutmata; nüüd on aeg lisada meie klipitee!

Kolme kolmnurga loomiseks kasutasime img1 ja img3 jaoks sama hulknurga lõiketeed ning img2 jaoks kasutasime ümberpööratud versiooni. Samuti pidime mängima oma flex-box konteineri paigutusega, et veenduda, kas pildid on ekraanil õiges asendis. Meie lõiketee reegleid näete allpool.

4. CSS-i läbipaistmatus

Läbipaistmatus määrab mis tahes HTML-elemendi läbipaistvuse taseme. Panime paika meie piltide läbipaistmatus 90%, muutes need kergelt läbipaistmatuks, et need taustaga kenasti sulanduksid.

CSS-ile reageeriv tekst ja pildid

Oleme selle kunsti juba uurinud hämmastavate tundlike veebisaitide loomine HTML-i, CSS-i ja JavaScripti abil minevikus, kuid saame tugineda põhimõtetele, millest te juba aru saate, pakkudes sügavamat ülevaadet oskustest, mida vajate oma veebisaidi kujunduse valdamiseks.

1. CSS-i reageerivad/suhtelised üksused

CSS-i ühikud, nagu px, pt ja cm, on absoluutsed ühikud ja see tähendab, et veebibrauser renderdab need sama suurusega olenemata kasutatava akna laiusest ja kõrgusest. Suhtelised ühikud on erinevad, andes kõrgused ja pikkused, mis on võrreldes muude mõõtmistega, näiteks brauseriakna või põhielemendiga. Allolevaid suhtelisi ühikuid kasutatakse tavaliselt ja need on tundliku veebidisaini jaoks hädavajalikud.

• em: seda üksust kasutatakse tavaliselt tekstiga. See on võrreldes praeguse elemendi fondi suurusega, muutes 4em määratud fondi suurusest neli korda suuremaks.
• rem: nagu em, on rem suhteline elemendi fondi suuruse suhtes; hierarhia juurelementi kasutatakse väljundi suuruse määratlemiseks.
• vw/vh: Laiuse ja kõrguse määramisel vaateava suuruse põhjal võrdub 2vw 2% brauseri laiusest, samas kui 2vh võrdub 2% brauseri kõrgusest.
• %: % ühik arvutab mõõtmed elemendi vanema suuruse põhjal.
• vmin/vmax: need üksused toodavad mõõtmeid, mis on suhtelised 1% vaateava väikseimast või suurimast mõõtmest, pakkudes elementidele vahendeid, mis reageerivad otse brauseriakna suurusele.

2. CSS-i fondi suurus

Seda atribuuti saab määrata vaikeväärtustega, mis on eelnevalt määratud veebisaidi peamise laaditabeli või kasutaja veebibrauseri poolt. Nende väärtuste hulka kuuluvad medium, xx-small, x-small, small, big, x-large ja xx-large, kusjuures keskmine on seatud vaikeväärtuseks iga teksti jaoks, millel puudub fondisuuruse CSS-märgend. Teise võimalusena saab fondi suuruse CSS-i atribuudi kasutamisel kasutada suhtelisi väärtusi ja see on meetod, mida oleme kasutanud tagamaks, et meie päise jaotises olev tekst on mis tahes jaoks sobiva suurusega vaateava.

Lisasime oma HTML-i kaks pealkirja silti, mis võimaldavad meil projektile teksti lisada. Üks on peamine suur päis, teine ​​aga alampäis ja mõlemad kasutavad suhtelisi ühikuid.

Seotud: Kuidas muuta HTML-i fondi suurust CSS-is

3. CSS laius ja kõrgus

Kõigil HTML-i elementidel on kõrguse ja laiuse mõõtmed, olenemata sellest, kas need on div, img, a või muud tüüpi sildid. Neid mõõtmeid saab automaatselt seada vaikeväärtustele, kuid neid võivad õigeid reegleid kasutades dikteerida ka veebidisainerid; oleme selle päise jaoks kasutanud mõlemat meetodit.

Taustpildi jaoks on kasutatud tundlikke ühikuid, mille kõrguseks on seatud 100vh ja laiuseks 100vw, kuid oleme oma kolme pildi jaoks kasutanud ka absoluutühikuid. Tasub uurida ja katsetada CSS-i laiuse ja kõrguse ühikuid, kasutades selliseid valikuid nagu "pärimine", mis pakub tähendab põhielemendi mõõtmete omaksvõtmist ja on palju muid selliseid nippe, mida saate kasutada.

4. CSS-i segamise-segamise režiim

CSS-i segamise-segamise režiim on väga sarnane tausta segamise režiimiga, ainult seda saab rakendada mis tahes elemendile, mitte ainult tausta jaoks. Oleme kasutanud seda omadust oma H1 pealkirjas tekstuuri lisamiseks ja projekti huvitavamaks muutmiseks. Alustasime oma seadmisega teksti värv mustaks, millele järgneb sega-sega-režiim ülekatteks.

Tasub uurida erinevaid segamisvalikuid, mis teil tekstiga tegelemisel on, kuna ainulaadsete värviprofiilidega taustad reageerivad teie kasutatavatele sätetele erinevalt.

5. CSS-teksti teisendus

CSS-i tekstiteisendus on nutikas omadus, mis võimaldab kujundajatel muuta oma veebisaitidel oleva teksti väiketähti, ilma et see mõjutaks seda, kuidas otsingumootorid seda loevad. Näiteks meil on määrake tekstiteisendus suurtähtedeks meie H1 päises, muutes iga tähe suureks olenemata sellest, kuidas me selle oma HTML-i sisestame.

CSS-i ületäitumise atribuudid

HTML võib sageli tunduda jäik raamistik, mis seab teie veebisaitide sisule ranged piirid, kuid see ei kehti juhul, kui kasutatakse ületäitumise atribuute.

CSS-i ületäitumine ja teksti ületäitmine

Ületäitumine ja teksti ületäitmine on väga sarnased CSS-i omadused. Ületäitmist saab rakendada mis tahes elemendile, andes teile kontrolli sisu üle, mis suudab oma piire ületada. Teksti ületäitmine on sarnane, kuigi see kehtib ainult teksti kohta ja annab teile võimaluse lisada reeglitele täiendavaid parameetreid. Oleme selle projekti jaoks kasutanud ainult ületäitmist (kasutasime seda oma lehe keha suuruse piiramiseks), kuid teksti ületäitumise kohta saate lugeda W3Schools veebisait.

CSS-i kasutamine veebipaigutuste jaoks

CSS on uskumatult võimas tööriist, mis võimaldab veebidisaineritel ja arendajatel luua koodi abil vapustavaid veebisaite. Soovitame teil heita pilk CodePenile, mille me artikli alguses esitasime, kuna see annab teile veelgi sügavama ülevaate kõigi nende tööriistade toimimisest. Lisaks saate mängida meie loodud päisega, et lisada oma viimistlust.

8 olulist CSS-i nõuannet ja nippi, mida iga arendaja peaks teadma

Kas kasutate neid peamisi CSS-i meetodeid kiire töövoo ja kauni veebikujunduse jaoks?

Loe edasi

Autori kohta