Stiilige oma pilte ja kasutage pilte stiilides
Paljud kasutavad teksti kohandamiseks CSS-i , teksti muutmist, värvi, suurust ja muud. Kuid üks asi, mida paljud inimesed sageli unustavad, on see, et saate kasutada CSS-i ka piltidega.
Pildi enda muutmine
CSS võimaldab teil reguleerida, kuidas kujutis kuvatakse lehel. See võib olla tõesti kasulik, kui hoiate oma lehed kokku. Seadistades stiilid kõigil piltidel, loote piltide standardvaade. Mõned asjad, mida saate teha:
- Lisage pilte piiri või joonise ümber
- Eemalda lingitud piltide ümber värvitud piir
- Piltide laiuse ja / või kõrguse reguleerimine
- Lisage tilk varju
- Pööra pilti
- Muutke stiilid, kui pilt on hõljunud
Teie pildi andmine piiriks on suurepärane koht alustamiseks. Aga peate kaaluma rohkem kui piiri - mõtle oma pildi kogu servale ja kohandage ka marginaale ja polsterdust . Väikese mustad piirjooni kujutis näeb kena välja, kuid piiri ja pildi vahele lisamine võib olla isegi parem.
img {
piiri: 1px tahke must;
padding: 5px;
}
Võimaluse korral on hea mõte alati dekoratiivsete piltide linkimiseks . Aga kui teed, peate meeles pidama, et enamik brausereid lisavad kujutise ümber värvipiiri. Isegi kui kasutate piiri muutmiseks ülaltoodud koodi, tühistab see link selle, kui te ei eemalda ega muudate ka lingi piiri. Selleks peate kasutama CSS-i lapse reeglit lingitud piltide piiri eemaldamiseks või muutmiseks:
img> a
piir: ükski;
}
Saate kasutada ka CSS-i, et muuta või määrata piltide kõrgus ja laius. Kuigi pole mõtet kasutada brauserit, et kohandada kujutise suurust allalaadimiskiiruste tõttu, muutuvad nad kujutise muutmiseks palju paremaks, et need ikkagi hea välja näeksid. CSS-i abil saate määrata, et kõik pildid oleksid tavaline laius või kõrgus või et isegi mõõdud oleksid konteineri suhtes võrdväärsed.
Pidage meeles, et parimate tulemuste saavutamiseks peate suurendama piltide suurust ainult ühe mõõtme suuruse muutmiseks - pikkus või laius. See kindlustab, et kujutisel on oma kuvasuhe ja seega ei tundu see imelik. Määrake teine väärtus automaatseks või jätke see välja, et öelda brauserile, et kuvasuhe püsiks.
img {
laius: 50%;
kõrgus: auto;
}
CSS3 pakub sellele probleemile lahenduse uute omaduste objekti sobivuse ja objektiasendiga. Nende omadustega saate määratleda täpse kujutise kõrgus ja laius ning kuvari suhe käsitsemisel. See võib luua pildikuvasid või kärpida, et pilt sobiks vajaliku suurusega.
Kuigi CSS3 objekti sobivuse ja objekti positsiooni omadused pole veel laialdaselt toetatud, on ka teisi CSS3-omadusi, mida enamikus kaasaegsetes brauserites toetatakse, mida saate piltide muutmiseks kasutada. Enamikus kaasaegsetes brauserites toimivad kõik nagu kohe varjude, ümardatud nurkade ja teisenduste abil, et pöörata, nihutada või teisaldada pilte. Seejärel saate kasutada CSS-i üleminekuid, et pilte muuta, kui need hõljuvad üle või klikkinud või lihtsalt mõne aja pärast.
Piltide kasutamine taustpildina
CSS-i abil on lihtne piltidega luua fantastilisi taustapilte.
Saate lisada tausta kogu lehele või lihtsalt kindlale elemendile. Taustapildi vara lehel on hõlpsasti taustapildi loomine:
keha {
taustavärv: url (background.jpg);
}
Muuda keelevalijat lehe konkreetsele elemendile, et asetada taust ainult ühele elemendile.
Teine lõbus asi, mida saate kujutistega teha, on luua taustpildi, mis ei liiguta ülejäänud lehega - nagu vesimärk. Kasutate lihtsalt stiili taustapilti: fikseeritud; koos taustpildiga. Taustteabe muud valikud hõlmavad nende faile ainult horisontaalselt või vertikaalselt, kasutades taust-korduse omadust.
Tausta korrata: repeat-x; pilt pilt horisontaalselt ja taust-korrata: repeat-y; pinnakate vertikaalselt. Ja saate oma taustapildi asetada taustaasendisse.
Ja CSS3 lisab teie taustale rohkem stiile. Saate oma pilte venitada nii, et see sobiks mistahes formaadis taustaga, või määrata taustapildi skaala akna suuruse järgi . Saate positsiooni muuta ja seejärel taustapilti klipistada. Kuid CSS3-i üks parimaid asju on selles, et saate nüüd luua mitu taustapilti, et luua veelgi keerukamaid efekte.
HTML5 aitab stiilseid pilte
Joonise element HTML5 peaks asetama ümber kõik pildid, mis võivad dokumendis üksi olla. Üks võimalus seda mõelda on see, kui pilt võib lisas näha, siis peaks see olema joonise elemendi sees. Seejärel võite selle elemendi ja FIGCAPTION elemendi lisada oma piltidele stiile.