10 neticami CSS triki, lai pārveidotu jūsu tīmekļa izkārtojumus

Ikviens, kam ir pieredze tīmekļa dizainā, neatkarīgi no tā, vai esat izmantojis vietņu veidotājus vai izveidojis vietni no nulles, par CSS, visticamāk, jau ir dzirdējis. Šo neticami jaudīgo rīku var izmantot, lai pārveidotu jūsu tīmekļa izkārtojumus, dodot jums iespēju kontrolēt savu vietni un sasniegt savu radošo redzējumu. Bet kā jūs varat izmantot kaskādes stila lapas, lai atraisītu savas nākamās vietnes potenciālu?

Šajā rokasgrāmatā būs tikai detalizēti aprakstīti vairāki CSS rekvizīti, kas visi ir izmantoti, lai izveidotu galveni, kas redzama attēlā. Jūs varat atrast šo projektu šeit CodePen, dodot jums iespēju to izmēģināt pašiem.

CSS attēlu manipulācijas

Pirmais solis, kas mums jāveic, lai izveidotu galvenes sadaļu, ir attēlu pievienošana lapai. Lai sasniegtu šo mērķi, varat izmantot dažādas metodes, tāpēc mēs esam apskatījuši populārākās, kā arī dažus trikus, kas palīdzēs manipulēt ar attēliem.

1. CSS fona attēls

Mēs vēlamies, lai galvenē būtu pilnekrāna fona attēls, un fona attēla CSS rekvizīts ir ideāls. Pirmkārt, mums ir jāizveido konteiners mūsu attēlam (un pārējiem elementiem galvenē).

Mēs sākām, pievienojot div tagu ar "header" kā klasi, kam sekoja tās iestatīšana augstums līdz 100vh un tas ir platums līdz 100vw; tādējādi mēs iegūstam lodziņu, kas ir tieši tāda paša izmēra kā skata logs. Mēs arī pievienojām CSS kārtulu lapas pamattekstam ar to pārplūde iestatīta uz slēptu un tas ir piemales iestatītas uz 0 pikseļiem.

Ja konteiners ir ievietots, mēs varam pievienot fona attēlu, un, lai sasniegtu šo mērķi, mums ir nepieciešami trīs dažādi CSS noteikumi. Pirmajam, fona attēlam, ir nepieciešams URL, lai tas darbotos kā fona attēla avots, un šim nolūkam esam izmantojuši parocīgo Unsplash katalogu. Mums ir arī jāiestata fona izmērs līdz vākam un fona pozīcija uz leju, taču, lai iegūtu labākos rezultātus, iespējams, vēlēsities ar tiem eksperimentēt.

2. CSS fona sajaukšanas režīms

CSS sapludināšanas režīmi ļauj sapludināt attēlus un tekstu, līdzīgi kā sajaukšanas funkcija programmā, piemēram, Adobe Photoshop. Lai sapludināšanas režīmi darbotos ar mūsu fona attēlu, mēs iestatījām fona krāsa līdz daļēji caurspīdīgai baltai pirms pievienošanas sajaukšanas režīmam, kuru vēlējāmies izmantot.

Pēc šī fona sajaukšanas režīms tika iestatīts uz mīkstu gaismu, ļaujot mums padarīt attēlu mīkstāku.

3. CSS klipu ceļš

Nākamajam trikam mēs izmantosim noteikumu, ko sauc par klipceļu. Izmantojot img HTML tagus, varat iestatīt ceļu, kas paslēps daļu attēlu, ar kuriem strādājat. Šim nolūkam varat izvēlēties izmantot vispārīgas formas, taču varat arī izmantot SVG ģenerēšanas lietotni, lai izveidotu sarežģītāku dizainu.

Mēs pievienojām div tagu ar "flex_image_box", lai tas darbotos kā konteiners trim attēliem, izmantojot displeja CSS rekvizītu, lai pārvērstu to par flexbox (par to mēs runāsim vēlāk). Div tagā tika pievienoti trīs img tagi, kuru ID iestatīti kā "img1", "img2" un "img3". Iestatīšana katra attēla platums līdz 600 pikseļiem, mēs spējam augstuma rekvizītu atstājiet tukšu nemainot attēlu malu attiecību; tagad ir pienācis laiks pievienot mūsu klipu ceļu!

Lai izveidotu trīs trīsstūrus, mēs izmantojām to pašu daudzstūra klipu ceļu img1 un img3 ar apgrieztu versiju img2. Mums bija arī jāspēlē ar mūsu flex-box konteinera novietojumu, lai pārliecinātos, ka attēli ekrānā atrodas pareizajā pozīcijā. Mūsu klipu ceļa noteikumus var redzēt zemāk.

4. CSS necaurredzamība

Necaurredzamība nosaka jebkura HTML elementa caurspīdīguma līmeni. Mēs iestatījām mūsu attēlu necaurredzamība līdz 90%, padarot tos nedaudz necaurspīdīgus, lai tie labi saplūstu ar fonu.

CSS adaptīvs teksts un attēli

Mēs jau esam izpētījuši mākslu veidojot satriecošas atsaucīgas vietnes, izmantojot HTML, CSS un JavaScript pagātnē, taču mēs varam balstīties uz jums jau saprotamiem principiem, sniedzot dziļāku ieskatu prasmēs, kas jums nepieciešamas, lai apgūtu vietnes izkārtojumus.

1. CSS reaģējošās/relatīvās vienības

CSS vienības, piemēram, px, pt un cm, ir absolūtas vienības, un tas nozīmē, ka tīmekļa pārlūkprogramma tās atveidos vienādā izmērā neatkarīgi no tās aizņemtā loga platuma un augstuma. Relatīvās vienības ir atšķirīgas, veidojot augstumus un garumus, kas ir saistīti ar citiem mērījumiem, piemēram, pārlūkprogrammas logu vai vecākelementu. Tālāk norādītās relatīvās vienības tiek plaši izmantotas un ir būtiskas adaptīvam tīmekļa dizainam.

• em: šo vienību parasti izmanto ar tekstu. Tas ir saistīts ar pašreizējā elementa fonta lielumu, veidojot 4em četras reizes lielāku par iestatīto fonta lielumu.
• rem: tāpat kā em, rem ir relatīvs attiecībā pret elementa fonta lielumu; saknes elements hierarhijā tiek izmantots, lai definētu izvades izmēru.
• vw/vh: Nosakot platumu un augstumu, pamatojoties uz skata loga lielumu, 2vw ir vienāds ar 2% no pārlūkprogrammas platuma, bet 2vh ir vienāds ar 2% no pārlūkprogrammas augstuma.
• %: % vienība aprēķina izmērus, pamatojoties uz elementa vecākelementa lielumu.
• vmin/vmax: šīs vienības rada izmērus attiecībā pret 1% no skata loga mazākajiem vai lielākajiem izmēriem, nodrošinot elementiem līdzekļus, lai tiešā veidā reaģētu uz pārlūkprogrammas loga izmēru.

2. CSS fonta lielums

Šo rekvizītu var iestatīt, izmantojot noklusējuma vērtības, kas ir iepriekš noteiktas vietnes galvenajā stila lapā vai lietotāja tīmekļa pārlūkprogrammā. Šīs vērtības ietver medium, xx-small, x-small, small, large, x-large un xx-large, un vidēja ir iestatīta kā noklusējuma vērtība jebkuram tekstam, kuram nav fonta izmēra CSS taga. Alternatīvi, izmantojot fonta izmēra CSS rekvizītu, var izmantot relatīvās vērtības, un tas ir metode, ko esam izmantojuši, lai nodrošinātu, ka mūsu galvenes sadaļas teksta izmērs ir piemērots jebkuram skata logs.

Mēs savam HTML pievienojām divus virsrakstu tagus, ļaujot projektam pievienot tekstu. Viena ir galvenā lielā galvene, bet otra ir apakšvirsraksts, un tās abas izmanto relatīvas vienības.

Saistīts: Kā mainīt HTML fonta lielumu CSS

3. CSS platums un augstums

Visiem HTML elementiem ir norādīti augstuma un platuma izmēri neatkarīgi no tā, vai tie ir div, img, a vai cita veida tagi. Šīs dimensijas var automātiski iestatīt uz noklusējuma vērtībām, taču tās var arī diktēt tīmekļa dizaineri, izmantojot pareizos noteikumus; šai galvenē esam izmantojuši abas šīs metodes.

Fona attēlam ir izmantotas atsaucīgas vienības, kuru augstums ir iestatīts uz 100 vh un platums — 100 vw, taču mēs esam izmantojuši arī absolūtās vienības saviem trim attēliem. Ir vērts izpētīt un eksperimentēt ar CSS platuma un augstuma vienībām, izmantojot tādas opcijas kā "mantot", nodrošinot nozīmē izmantot vecākelementa izmērus, un ir daudz citu triku, piemēram, šo, ko varat izmantot.

4. CSS sajaukšanas-sajaukšanas režīms

CSS sajaukšanas režīms ir ļoti līdzīgs fona sajaukšanas režīmam, tikai to var lietot jebkuram elementam, nevis tikai fonam. Mēs esam izmantojuši šo īpašumu savā H1 virsrakstā, lai pievienotu tekstūru un padarītu projektu interesantāku. Mēs sākām, uzstādot mūsu teksta krāsa uz melnu, kam seko iestatīšana jaukšanas-sajaukšanas režīms, lai pārklātu.

Ir vērts izpētīt dažādās sajaukšanas iespējas, kas jums ir pieejamas, strādājot ar tekstu, jo foni ar unikāliem krāsu profiliem atšķirīgi reaģēs uz jūsu izmantotajiem iestatījumiem.

5. CSS teksta transformācija

CSS teksta pārveidošana ir gudrs īpašums, kas ļauj dizaineriem mainīt teksta reģistru savās vietnēs, neietekmējot to, kā meklētājprogrammas to lasa. Piemēram, mums ir iestatiet teksta pārveidošanu uz lielajiem burtiem mūsu H1 virsrakstā, padarot katru burtu ar lielo burtu neatkarīgi no tā, kā mēs to ievadām savā HTML.

CSS pārpildes rekvizīti

HTML bieži var šķist stingrs ietvars, kas nosaka stingras robežas jūsu vietņu saturam, taču tas nenotiek, ja tiek izmantoti pārpildes rekvizīti.

CSS pārpilde un teksta pārpilde

Pārpilde un teksta pārpilde ir ļoti līdzīgas CSS īpašības. Pārpilde var tikt piemērota jebkuram elementam, ļaujot jums kontrolēt saturu, kas spēj izvairīties no tā robežām. Teksta pārpilde ir līdzīga, lai gan tā attiecas tikai uz tekstu un sniedz iespēju kārtulām pievienot papildu parametrus. Šim projektam esam izmantojuši tikai pārpildīšanu (to izmantojām, lai ierobežotu mūsu lapas pamatteksta izmēru), bet par teksta pārpildīšanu varat lasīt W3Skolas vietne.

CSS izmantošana jūsu tīmekļa izkārtojumiem

CSS ir neticami spēcīgs rīks, kas ļauj tīmekļa dizaineriem un izstrādātājiem izveidot satriecošas vietnes, izmantojot kodu. Mēs aicinām jūs apskatīt CodePen, ko sniedzām raksta sākumā, jo tas sniegs jums vēl dziļāku ieskatu par visu šo rīku darbību. Turklāt jūs varat spēlēt ar mūsu izveidoto galveni, lai pievienotu savu pēdējo pieskārienu.

8 svarīgi CSS padomi un triki, kas jāzina katram izstrādātājam

Vai izmantojat šīs galvenās CSS metodes ātrai darbplūsmai un skaistam tīmekļa dizainam?

Lasiet Tālāk

Par autoru