Stilieties savus attēlus un izmantojiet stilus
Daudzi cilvēki izmanto CSS, lai pielāgotu tekstu, mainītu fontu, krāsu, izmēru un daudz ko citu. Bet viena lieta, ko daudzi cilvēki bieži aizmirst, ir tas, ka jūs varat izmantot arī CSS ar attēliem.
Mainīt attēlu pats
CSS ļauj jums pielāgot, kā attēls lapā parādās. Tas var patiešām noderīgi, lai jūsu lapas atbilstu. Nosakot stilu visos attēlos, jūs izveidojat savu attēlu standarta izskatu. Dažas lietas, ko varat darīt:
- Attēlu robežai vai kontūrai pievienojiet
- Noņemiet krāsaino malu ap saistītajiem attēliem
- Attēlu platuma un / vai augstuma pielāgošana
- Pievienojiet pilienu ēnu
- Pagrieziet attēlu
- Mainiet stilu, kad attēls ir virzīts pāri
Piešķirt jūsu attēlam robežu ir lieliska vieta, kur sākt. Bet jums vajadzētu apsvērt vairāk nekā tikai robeža - domājiet par visu attēla malu un pielāgot margins un polsterējumu, kā arī. Attēls ar plānu melnu pāri izskatās jauki, taču, pievienojot dažas polsteres starp robežu un attēlu, var izskatīties vēl labāk.
img {
robeža: 1px ciets melns;
polsterējums: 5 pikseļi;
}
Ja iespējams, vienmēr ir iespējams saistīt ne-dekoratīvos attēlus . Bet, kad jūs to izdarīsiet, atcerieties, ka lielākā daļa pārlūkprogrammu pievieno krāsainu malu ap attēlu. Pat, ja jūs izmantojat iepriekš minēto kodu, lai mainītu robežu, saite ignorēs to, ja vien jūs arī neizdzēsīsit vai nemainīsit saiti. Lai to izdarītu, jums jāizmanto CSS bērnu noteikums, lai noņemtu vai mainītu robežu ap saistītajiem attēliem:
img> a {
robeža: nav;
}
Varat arī izmantot CSS, lai mainītu vai iestatītu attēlu augstumu un platumu. Kaut arī nav ieteicams izmantot pārlūku, lai pielāgotu attēla izmērus lejupielādes ātruma dēļ, tie daudz uzlabo attēlu izmēru maiņu, lai tie joprojām izskatās labi. Un ar CSS jūs varat iestatīt, lai visi jūsu attēli būtu standarta platums vai augstums vai pat iestatītu izmērus, kas ir salīdzināmi ar konteineru.
Atcerieties, ka, mainot attēlus, labākos rezultātus varat mainīt tikai vienā dimensijā - augstumā vai platumā. Tas ļaus, ka attēls saglabā tā malu attiecību, un tas neizskatās dīvaini. Noregulējiet citu vērtību automātiski vai atstājiet to, lai pastāstītu pārlūkprogrammai, lai tā proporcionāli saglabātu.
img {
platums: 50%;
augstums: auto;
}
CSS3 piedāvā risinājumu šai problēmai ar jauno īpašību objektu un objekta stāvokli. Izmantojot šīs īpašības, jūs varēsiet precīzi noteikt attēla augstumu un platumu un to, kā jāizmanto malu attiecība. Tas var radīt burbokontu efektus ap jūsu attēliem vai apgriešanu, lai attēls būtu piemērots nepieciešamo lielumu.
Kaut arī CSS3 objektu un objekta pozīcijas rekvizīti vēl nav plaši atbalstīti, ir arī citas CSS3 īpašības, kuras lielākajā daļā mūsdienu pārlūkprogrammās ir labi atbalstītas un kuras varat izmantot attēlu modificēšanai. Vairumā modernajās pārlūkprogrammās viss darbojas tieši tagad, piemēram, pilienu ēnas, noapaļoti stūri un transformācijas, lai pagrieztu, pārbīstu vai pārvietotu attēlus. Pēc tam jūs varat izmantot CSS pārejas, lai padarītu attēlus mainīt, kad ir peles kursoru pogas, vai noklikšķinājuši, vai arī pēc kāda laika.
Attēlu izmantošana kā fonu
CSS ļauj viegli izveidot fantāzijas fonus ar jūsu attēliem.
Jūs varat pievienot fonus visai lapai vai tikai konkrētam elementam. Lapā ir viegli izveidot fona attēlu ar fona attēla īpašumu:
ķermenis {
fona attēls: url (background.jpg);
}
Mainiet ķermeņa selektoru uz konkrētu lapas elementu, lai novietotu fonu tikai uz vienu elementu.
Vēl viena jautra lieta, ko varat darīt ar attēliem, ir izveidot fona attēlu, kas nerunā ar pārējo lapu, piemēram, ūdenszīmi. Jūs vienkārši izmantojat stila fona pielikumu: fiksēts; kopā ar savu fona attēlu. Citas jūsu fona iespējas ir to pielāgot horizontāli vai vertikāli, izmantojot fona atkārtotu īpašību.
Uzrakstiet fona atkārtojumu: atkārtojiet-x; lai pārklātu attēlu horizontāli un fona atkārtot: repeat-y; lai flīžu vertikāli. Un jūs varat novietot fona attēlu ar fona stāvokli.
Un CSS3 piebilst arī vairāk stilu jūsu fona, kā arī. Jūs varat izstiepties savus attēlus, lai tie atbilstu jebkura izmēra fona vai iestatītu fona attēlu, lai mērotu ar loga izmēru . Jūs varat mainīt pozīciju un pēc tam nokonfigurēt fona attēlu. Bet viena no vislabākajām lietām par CSS3 ir tā, ka tagad varat ielīmēt vairākus fona attēlus, lai izveidotu vēl sarežģītākus efektus.
HTML5 palīdz stilu attēlus
HTML5 attēla elements ir jāapvieno ar jebkādiem attēliem, kas dokumentā var būt atsevišķi. Viens veids, kā domāt par to, ir, ja attēls varētu parādīties papildinājumā, tad tam vajadzētu būt IN FIGURE elementā. Pēc tam varat izmantot šo elementu un FIGCAPTION elementu, lai pievienotu stilus saviem attēliem.