Daudzi cilvēki izmanto CSS lai pielāgotu tekstu, mainot fontu, krāsu, izmēru un daudz ko citu. Bet viena lieta, ko daudzi cilvēki bieži aizmirst, ir tā, ka jūs varat izmantot CSS arī ar attēliem.
Attēla maiņa pati par sevi
CSS ļauj pielāgot attēla parādīšanu lapā. Tas var būt patiešām noderīgi, lai jūsu lapas būtu konsekventas. Iestatot visu attēlu stilus, jūs izveidojat saviem attēliem standarta izskatu. Dažas lietas, ko varat darīt:
- Ap attēliem pievienojiet apmali vai kontūru
- Noņemiet krāsaino apmali ap saistītajiem attēliem
- Attēlu platuma un / vai augstuma pielāgošana
- Pievienojiet pilienu ēnu
- Pagrieziet attēlu
- Mainiet stilus kad attēls ir virzīts virs
Piešķirt savam attēlam robežu ir lieliska vieta, kur sākt. Bet jums vajadzētu ņemt vērā ne tikai robežu - padomājiet par visu sava attēla malu un pielāgojiet piemales un polsterējums arī. Attēls ar plānu melnu apmali izskatās jauki, taču, pievienojot nelielu polsterējumu starp apmali un attēlu, tas var izskatīties vēl labāk.
Tā ir laba ideja
vienmēr saistiet nedekoratīvus attēlus, kad iespējams. Bet, kad to izdarīsit, atcerieties, ka lielākā daļa pārlūkprogrammu ap attēlu pievieno krāsainu apmali. Pat ja jūs izmantojat iepriekš minēto kodu, lai mainītu robežu, saite to ignorēs, ja vien jūs nenoņemsit vai nemainīsit arī saites robežu. Lai to izdarītu, jāizmanto CSS pakārtotā kārtula, lai noņemtu vai mainītu apmali ap saistītajiem attēliem:Varat arī izmantot CSS, lai mainītu vai iestatītu attēlu augstumu un platumu. Lai gan lejupielādes ātruma dēļ nav lieliska ideja izmantot pārlūkprogrammu attēlu izmēru pielāgošanai, tie daudz labāk attēlo izmērus, lai tie joprojām izskatītos labi. Izmantojot CSS, attēlus var iestatīt kā standarta platumu vai augstumu vai pat iestatīt izmērus attiecībā pret konteineru.
Atcerieties, ka, mainot attēlu lielumu, lai iegūtu labākos rezultātus, mainiet tikai vienas dimensijas lielumu - augstumu vai platumu. Tas nodrošinās, ka attēls saglabā savu malu attiecību, un tāpēc tas neizskatās dīvaini. Iestatiet citu vērtību auto vai atstājiet to ārā, lai pārlūkam teiktu, ka malu attiecība ir nemainīga.
CSS3 piedāvā šīs problēmas risinājumu ar jaunajiem īpašumiem objekts un objekta-pozīcijas. Izmantojot šīs īpašības, jūs varēsiet noteikt precīzu attēla augstumu un platumu un to, kā jārīkojas ar malu attiecību. Tas var radīt pastkastes efektus ap jūsu attēliem vai apgriešanu, lai attēls atbilstu vajadzīgajam izmēram.
Ir arī citas CSS3 īpašības, kuras lielākajā daļā pārlūkprogrammu ir labi atbalstītas un kuras varat izmantot arī savu attēlu modificēšanai. Tādas lietas kā ēnas, noapaļoti stūri un pārveidojumi, lai pagrieztu, šķībinātu vai pārvietotu attēlus, šobrīd darbojas lielākajā daļā mūsdienu pārlūkprogrammu. Pēc tam jūs varat izmantot CSS pārejas, lai attēli mainītos, kad tie ir novietoti virs peles, uz kuriem noklikšķina vai tieši pēc kāda laika.
Attēlu izmantošana kā fonus
CSS ļauj viegli izveidot iedomātu fonu ar saviem attēliem. Jūs varat pievienot fonus visai lapai vai tikai uz konkrētu elementu. Lapā ir viegli izveidot fona attēlu, izmantojot fona attēls īpašums:
Nomaini ķermeņa atlasītāju uz konkrētu lapas elementu, lai fonu ievietotu tikai vienam elementam.
Vēl viena jautra lieta, ko varat darīt ar attēliem, ir izveidot fona attēlu, kas neritina ar pārējo lapu, piemēram, ūdenszīmi. Jūs vienkārši izmantojat stilu fona stiprinājums: fiksēts; kopā ar fona attēlu. Citas jūsu fona opcijas ietver to, ka tie tiek veidoti tikai horizontāli vai vertikāli, izmantojot fona atkārtojums īpašums. Rakstiet fona atkārtojums: atkārtojiet x; lai nofilmētu attēlu horizontāli un fona atkārtojums: atkārtojiet y; flīzēt vertikāli. Un jūs varat novietot fona attēlu, izmantojot background-position īpašums.
Un CSS3 pievieno vairāk stilu arī jūsu fonam. Jūs varat izstiept attēlus, lai tie atbilstu jebkura izmēra fonam, vai iestatīt fona attēlu mērogot atbilstoši loga izmēram. Jūs varat mainīt pozīciju un pēc tam sagriezt fona attēlu. Bet viena no labākajām lietām CSS3 ir tā, ka tagad varat kārtot vairākus fona attēlus, lai izveidotu vēl sarežģītākus efektus.
HTML5 palīdz stilizēt attēlus
The Attēls HTML5 elements jāievieto ap visiem attēliem, kas dokumentā var atrasties atsevišķi. Viens veids, kā domāt par to, ir, ja attēls varētu parādīties pielikumā, tad tam vajadzētu atrasties Attēls elements. Pēc tam varat izmantot šo elementu un UZTURĒŠANA elements, lai attēliem pievienotu stilus.