Përmbajtje
- 01. Eksploroni mënyrat e përzierjes CSS
- 02. Shtoni një maskë
- 03. Mos kini frikë nga prerja
- 04. Mendoni jashtë kutisë
- 05. Provo SVG për animacion
- 06. Bëni pak zhurmë
- 07. Bëhuni krijues me kolazhin
- 08. Mos harroni mbështetjen e shfletuesit
Mësoni truket e reja CSS është një nga mënyrat më të mira për të tronditur modelin tuaj të internetit. Nëse keni qenë duke punuar në industrinë e internetit për një kohë, mund të ndiheni se jeni gjithmonë duke koduar ose duke dizajnuar të njëjtat paraqitje. Trendet vijnë dhe shkojnë, por shumica e siteve duken të njëjta - duke përdorur rrjetin me 12 kolona, paraqitjet me dy kolona dhe tre kolona dhe forma të ngjashme. Jo vetëm që po bëhet pak e mërzitshme për t’u parë, por përvoja e përdoruesit nuk është aq e shkëlqyeshme.
Një mënyrë për ta ndryshuar atë është të merrni frymëzim nga fushat ose zonat që shkojnë përtej dizajnit dixhital. Pse të mos përdorni dizajne të shtypura ose editoriale për faqen tuaj në internet? Ju mund të prishni zakonet e vjetra me vetitë e reja të CSS që hapin një botë të re mundësish. Ju mund të përdorni një ndërtues të denjë për të frymëzuar.
Nëse dëshironi më shumë këshilla për krijimin e faqes në internet, shihni udhëzuesin tonë për paraqitjen e përsosur të faqes në internet, ose pastroni Dizajnin Atomik. Plus, këtu janë këshillat e përvojës së përdoruesit që duhet të dini.
- 30 mjete për krijimin e faqeve në internet për të shpejtuar rrjedhën tuaj të punës në 2018
Një revolucion CSS është duke u zhvilluar - mjete si Flexbox ose CSS Grid ofrojnë mënyra të thjeshta për të ndërtuar faqosje interesante. Duke përdorur CSS, ju mund të krijoni në stile vizuale që tejkalojnë ato me të cilat mund të njiheni.
Në këtë artikull, ne do të ndajmë disa këshilla të CSS që do t'ju ndihmojnë të thyeni formën në faqosjet e faqes suaj të internetit, me vetëm disa rreshta të kodit.
01. Eksploroni mënyrat e përzierjes CSS
Imazhet duotone dhe efektet e ngjyrosësit janë disa nga tendencat më të nxehta të dizajnit të uebit. Ata janë shumë të popullarizuar në të gjithë faqen e internetit falë Spotify, i cili i zbaton ato në mënyrë kohezive. Tani më në fund mund të ndaloni krijimin e shumë versioneve me ngjyra të ndryshme të aseteve tuaja dhe t'i zbatoni efektet direkt në shfletues.
Përdorimi i mënyrave të përzierjes CSS nuk është vetëm një mënyrë e shkëlqyeshme për të unifikuar pamjen e përmbajtjes në të gjitha faqet e internetit, por gjithashtu ju mundëson të vendosni versione të ndryshme me ngjyra të një imazhi, duke ndryshuar vetëm një vlerë në CSS: ngjyrën. Ka 15 vlera të mundshme të mënyrës së përzierjes, duke përfshirë ekranin, mbivendosjen, ndriçimin dhe errësimin.
Ekzistojnë disa metoda të implementimit, varësisht nga lloji i elementit në të cilin dëshironi të aplikoni efektin. Për shembull, mund të përdorni setin e imazhit të sfondit dhe ngjyrës së sfondit në mënyrën e përzierjes së sfondit të kontejnerit: errësohet;, ose krijoni një mbivendosje me pseudo-elemente (d.m.th. : para dhe : pas) në mbështjellësin e imazhit në mënyrë që të merrni një efekt ngjyrosës.
Për të arritur një efekt të kënaqshëm duoton, rekomandohet që të përdorni një imazh bardh e zi me kontrast të lartë. Ju mund ta bëni këtë duke aplikuar filtra CSS për të vendosur shkallën gri dhe një nivel të lartë kontrasti.
Një tjetër pronë e ftohtë është mode-përzierje-përzierje, e cila ju lejon të përzieni përmbajtjen e elementit me përmbajtjen ose sfondin e prindit të tij të drejtpërdrejtë. Kjo funksionon veçanërisht mirë në mbishkrimet e mbivendosura. Ju mund të pyesni pse në këtë rast ne nuk rregullojmë vetëm errësirën - përgjigjja është e thjeshtë: ne lehtë mund të humbasim gjallërinë e ngjyrave duke përdorur vetëm transparencën.
Epoka e imazheve që mund të redaktohen direkt në shfletuesin tuaj të internetit po vjen, por nuk mund të harrojmë pajtueshmërinë e shfletuesit - mbështetja është e kufizuar për modalitetet e përzierjes për momentin. Dhe për t'i mbajtur ato imazhe të sigurta, sigurohuni që të eksploroni mundësitë tuaja të ruajtjes së reve.
02. Shtoni një maskë
Maskimi i tregon shfletuesit tuaj se cilat elemente të aseteve duhet të jenë të dukshme dhe është shumë e dobishme për ndërtimin e formave dhe paraqitjeve krijuese. Maskimi mund të bëhet në tre mënyra: duke përdorur një imazh raster (p.sh. format PNG me pjesë transparence), gradientët CSS ose elementet SVG.
Vini re se ndryshe nga një imazh tipik raster, SVG mund të shkallëzohet ose transformohet pa një humbje të konsiderueshme të cilësisë.
img {mask-image: url (‘mask.png ') linear-gradient (-45deg, rgba (0,0,0,1) 20%, rgba (0,0,0,0) 50%); mask-imazh: url (# maskim); / * duke iu referuar elementit të gjeneruar dhe përcaktuar në kodin SVG * /}
Importantshtë e rëndësishme të përmendet që Firefox mbështet vetëm atë të fundit, kështu që ne duhet të përdorim një element të maskës SVG. Po sikur të përdorim një imazh raster me nivele transparence? Pjesët transparente të imazhit nuk do të shihen - kështu që me fjalë të tjera, fragmentet e errëta do të shfaqen, duke fshehur pjesët e tjera.
Maskimi është veçanërisht i fuqishëm sepse ju mundëson të aplikoni të njëjtat veti në imazhet e sfondit, duke përcaktuar pozicionin, madhësinë dhe përsëritjen e tyre.
Një rast i shkëlqyeshëm i përdorimit për maskimin e CSS është në artikujt që kombinojnë tekst dhe imazhe. Kontejnerët dhe imazhet e parregullta janë shumë të popullarizuara në shtyp, por të lodhshme dhe kohë për t’u zbatuar në internet. Por falë maskimit, jo më shumë!
Ju gjithashtu mund të argëtoheni duke përdorur nivelet e transparencës për të prerë një pjesë të imazheve të animuara (p.sh. skedarët GIF). Sidoqoftë, kur përdorni këto veti, mos harroni për mbështetjen ndër-shfletuese dhe shtoni parashtesa të shitësit.
03. Mos kini frikë nga prerja
Një tjetër tipar i shkëlqyeshëm është prerja e CSS. Kufiri i një forme quhet klip-shteg (të mos ngatërrohet me pronën e klipit të amortizuar), dhe prerja përcakton se cila zonë e imazhit duhet të jetë e dukshme. Prerja është e ngjashme me prerjen e një copë letre - gjithçka jashtë shtegut do të fshihet, ndërsa gjithçka brenda shtegut do të jetë e dukshme.
rruga e klipit: rrethi (rrezja në x, y); rruga e klipit: url (# prerja); / * duke iu referuar elementit SVG * /
Për shembull, nëse një funksion rrethi vendos një maskë prerëse mbi pjesën e sipërme të një imazhi, ju do të shihni vetëm pjesën e imazhit brenda këtij rrethi.
Gjëja më interesante është se ne mund të përdorim funksionet e formave dhe SVG si shtigje klipesh, gjë që na jep shumë mundësi - për shembull, ne mund t'i animojmë ato në forma formuese. Shikoni këtë artikull nga Chris Coyier rreth krijimit të JPG-së transparente duke përdorur shtegun e klipit SVG.
Nëse po pyesni se cili është ndryshimi midis prerjes dhe maskimit, atëherë mos harroni se maskat janë imazhe dhe klipet janë vetëm rrugë vektoriale. Vlen të përmendet se maskimi do të konsumojë më shumë kujtesë, pasi jeni duke punuar me një imazh të plotë, kështu që gjithçka duhet të bëhet piksel për pixel.
Kjo është arsyeja pse rekomandohet që të përdorni maska kur dëshironi një efekt të pjesshëm të transparencës; nëse doni skaje të freskëta, është më mirë të përdorni shtigjet e klipit.
04. Mendoni jashtë kutisë
Forma-jashtë dhe formë-brenda në shpëtim! Kush tha që kontejnerët e tekstit gjithmonë duhet të jenë drejtkëndëshe? Le të dalim nga kutia, fjalë për fjalë, dhe të zbulojmë forma të reja duke i bërë faqet tona më të pasura dhe më pak të mbushura. forma e jashtme dhe tiparet e formës së brendshme ju lejojnë të përfundoni përmbajtjen tuaj nëpër shtigjet e personalizuara në CSS.
Atëherë si funksionon? Thjesht aplikoni kodin e mëposhtëm në imazhin e dhënë lundrues ose enë:
forma jashtë: rrethi (50%); / * përmbajtja do të rrjedhë rreth rrethit * /
Importantshtë e rëndësishme të theksohet se prona e notuesit dhe dimensionet e elementit - lartësia dhe gjerësia - duhet të përcaktohen, përndryshe kjo nuk do të funksionojë. Për formën me të cilën mund të shkoni rreth (), poligonin (), fut () ose elips ().
Një vlerë tjetër e mundshme është url () funksioni Në këtë rast, kjo mundëson që prona formë-jashtë të përcaktojë një formë të elementit bazuar në imazh. Ju mund të zgjidhni të përdorni url () funksion në vend të poligonin () kur keni një grafik veçanërisht të sofistikuar me shumë kthesa dhe pika, dhe dëshironi që përmbajtja të mbështjellë pa probleme.
Nëse dëshironi të krijoni më shumë hapësirë midis elementit tuaj dhe përmbajtjes, përdorni formë-diferencë pronë, e cila do të veprojë ashtu si një diferencë. Funksionet e formës mund të animohen, por vetëm për shumëkëndëshat e përcaktuar - url () funksioni për fat të keq nuk është në gjendje të animohet.
Mbështetje e shfletuesit për formë-jashtë është i kufizuar për momentin, por mbani gishtat kryq për zbatimin e shpejtë të tij në shfletuesit e tjerë.
05. Provo SVG për animacion
Të them të drejtën, nuk mund ta imagjinoj webin e sotëm pa SVG (grafikë vektorë të shkallëzuar). Emri i tij flet vetë - shkallëzohet, kështu që u përgjigjet të gjitha shqetësimeve në lidhje me krijimin e përgjegjshëm të faqes në internet. Grafiku SVG do të jetë i freskët pa marrë parasysh rezolucionin e ekranit të pajisjes në të cilën shikohet.
Përveç shkallëzueshmërisë, ekziston një tjetër tipar që duhet t'ju inkurajojë të luani me SVG: aftësia për të manipuluar SVG me CSS. Nëse nuk e keni provuar kurrë zhytjen në animacione CSS dhe kodin SVG, duhet ta provoni tani - është e pabesueshme se sa shpejt mund të arrini efekte të mahnitshme.
Ju mund të mendoni se në disa raste është më e lehtë të përdorni imazhe raster, megjithatë, SVG ka një avantazh të madh mbi imazhet e zakonshëm. Fjalët e përfshira në SVG ruhen në teksti> etiketoni dhe kështu mbeteni tekst, gjë që e bën atë të kërkueshëm, të selektueshëm dhe të arritshëm. Kjo gjithashtu do të thotë që ju mund ta redaktoni atë direkt në kod. Sidoqoftë, duhet të kujtojmë të vendosim fytyrën e shkronjave për t'u siguruar që shkronja do të jepet.
Animimi i SVG me CSS është si animimi i çdo elementi tjetër në HTML - mund të bëhet me tranzicione, transformime dhe animacione të kornizave kyçe. Pasi të njiheni me kodin SVG, pjesa tjetër është e drejtpërdrejtë dhe shumë intuitive, sepse në thelb e bëni ashtu si do ta bënit në HTML.
Gjëja më interesante për SVG është që ju të mund të kapni çfarëdo pjese që dëshironi dhe ta bëni atë të gjallërohet me animacionet CSS. Kjo do të thotë që ne mund të krijojmë disa efekte dinamike shumë interesante, jo domosdoshmërisht duke përdorur JavaScript. SVG ka DOM API-në e vet, kështu që në fakt i gjithë kodi SVG mund të inspektohet lehtësisht duke përdorur DevTools, të cilin unë fuqimisht rekomandoj ta përdorni gjatë eksplorimit të kësaj teme.
06. Bëni pak zhurmë
Vitet 1980 dhe 1990 janë kthyer! Glitch - estetika e kaosit, zhurmës dhe bllokimit - po bëhet një trend i njohur i dizajnit këtë vit. Kremtimi i defekteve, dështimeve dhe gabimeve mund të shihet në internet gjithashtu. Nëse dëshironi të luani me perspektivë dhe të jeni vizualisht më kaotik, mund ta bëni kaq lehtë duke transformuar dhe anuar elementët e faqes tuaj.
Shembulli i përsosur se si ta bëni atë në CSS mund të gjendet në CodePen të Kapitenit Anonim, i cili paraqet tekst të animuar të anuar. Një linjë kodi bën magjinë:
shndërroni: shkalla e anuar (60deg, -30deg )Y (.66667);
07. Bëhuni krijues me kolazhin
Projektimet e frymëzuara nga kolazhi po shijojnë momentin e tyre në artet pamore - ndërsa hulumtuan këtë artikull, puna e Rosanna Webster dhe Barrakuz menjëherë më vodhi zemrën - madje edhe në internet ata po marrin gjithnjë e më shumë vëmendje. Nëse dyshoni, shikoni në faqen kryesore të MailChimp (më poshtë). E vutë re kolazhin?
Qasja tradicionale është thjesht të bashkangjitni imazhe raster që janë përgatitur në një redaktues grafik, por me teknikat që kam diskutuar në këtë artikull, është e mundur të krijoni efekte të ngjashme duke përdorur vetitë CSS. Mund të përgatisni madje kolazhe që përshtaten vërtet me kërkesat e internetit - dhe janë të shkallëzueshme, të animuara dhe interaktive.
Unë kam përgatitur disa shembuj duke përdorur të gjitha këto veti të këndshme CSS, kështu që ju mund të shihni se si ato mund të kombinohen për të arritur një stil të ngjashëm me kolazhin në internet. Shikoni shembujt e mi.
08. Mos harroni mbështetjen e shfletuesit
Nëse ndiheni të përmbajtur kur doni të përdorni vetitë CSS për të cilat dyshoni se nuk mbështeten nga të gjithë shfletuesit, @ mbeshtetjet rregulli është atje për t'ju ndihmuar. @ mbeshtetjet ju lejon të kontrolloni mbështetjen e shfletuesit për pronën CSS: çifte vlerash.
Kodi që është përfshirë në @ mbeshtetjet blloku do të jepet vetëm nëse këto kushte janë të vërteta, përndryshe kodi nuk është lexuar nga shfletuesi. Në një rast kur shfletuesi nuk e kupton @ mbeshtetjet, nuk gjeneron as një pjesë të caktuar të kodit.
@supports (mix-blend-mode: overlay) {.example {mix-blend-mode: overlay; }}
Kombinimi i veçorive të tilla si mënyrat e përzierjes, maskimi, prerja, format CSS dhe fuqia e SVG na jep një grup të shkëlqyeshëm mjetesh për të rritur kreativitetin tonë dhe për të dalë nga norma. Me këto mjete kemi një mundësi për të krijuar një version në internet të gjërave që aktualisht i shohim të shtypura.
Megjithëse disa prona mund të kenë ende probleme me pajtueshmërinë e shfletuesve (nëse keni shumë probleme, merrni parasysh një shërbim më të fortë të pritjes në internet), mos hezitoni të luani me ta. Megjithëse mbështetja e shfletuesit mund të jetë e kufizuar tani, kjo ka të ngjarë të mos jetë kështu në të ardhmen. Justshtë vetëm çështje kohe.
Ky artikull u botua fillimisht në revistën net.
