Paljud inimesed kasutavad CSS teksti kohandamiseks, fondi, värvi, suuruse ja muu muutmiseks. Kuid üks asi, mida paljud inimesed sageli unustavad, on see, et saate CSS-i kasutada ka piltidega.
Kujutise enda muutmine
CSS võimaldab teil kohandada seda, kuidas pilt lehel kuvatakse. See võib olla teie lehtede järjepidevuse tagamiseks tõesti kasulik. Kõigile piltidele stiilide määramisega loote oma piltidele standardse ilme. Mõned asjad, mida saate teha:
- Lisage piltide ümber ääris või kontuur
- Eemaldage lingitud piltide ümber värviline ääris
- Piltide laiuse ja / või kõrguse reguleerimine
- Lisage varju
- Pöörake pilti
- Stiilide muutmine kui pilt on hõljutatud
Pildile piiri andmine on suurepärane koht alustamiseks. Kuid peaksite arvestama mitte ainult piiriga - mõelge kogu pildi servale ja reguleerige veeriseid ja polsterdus samuti. Õhuke musta äärisega pilt näeb kena välja, kuid ääre ja pildi vahele mõne polstriga lisamine võib veelgi parem välja näha.
See on hea mõte linkige alati mitte dekoratiivsed pildid
, kui see on võimalik. Kuid kui seda teete, pidage meeles, et enamik brausereid lisab pildi ümber värvilise piiri. Isegi kui kasutate piiri muutmiseks ülaltoodud koodi, tühistab link selle, kui te ei eemalda ega muuda ka lingi piiri. Selleks peate lingitud piltide ümbruse eemaldamiseks või muutmiseks kasutama CSS-i alamreeglit.CSS-i abil saate oma piltide kõrgust ja laiust muuta või määrata. Kuigi allalaadimiskiiruse tõttu pole pildi suuruse kohandamiseks brauserit kasutada, on piltide suuruse muutmine palju parem, nii et need näeksid endiselt head välja. CSS-i abil saate oma piltidele seada standardse laiuse või kõrguse või isegi määrata mõõtmed konteineri suhtes.
Pidage meeles, et piltide suuruse muutmisel peaksite parimate tulemuste saavutamiseks muutma ainult ühe dimensiooni suurust - kõrgust või laiust. See tagab pildi kuvasuhte säilimise ja ei tundu seega imelik. Määrake teine väärtus väärtuseks automaatne või jätke see brauserile ütlema, et kuvasuhe oleks ühtlane.
CSS3 pakub sellele atribuudile probleemile lahenduse objektile sobiv ja objekti-positsiooni. Nende omadustega saate määratleda täpse pildi kõrguse ja laiuse ning selle, kuidas kuvasuhet tuleks käsitseda. See võib teie piltide ümber tekitada postkastiefekte või kärpida, et pilt sobiks vajaliku suurusega.
On ka teisi CSS3 atribuute, mida enamikus brauserites hästi toetatakse, mida saate kasutada ka oma piltide muutmiseks. Sellised asjad nagu varjud, ümarad nurgad ja teisendused piltide pööramiseks, kallutamiseks või teisaldamiseks toimivad kõik enamikus kaasaegsetes brauserites. Seejärel saate CSS-i üleminekute abil muuta pilte, kui need hõljutakse kursori kohal, klõpsatakse neid või vahetult pärast teatud ajavahemikku.
Piltide kasutamine taustadena
CSS-i abil on lihtne oma piltidega väljamõeldud taustu luua. Sa saad lisage taustad kogu lehele või lihtsalt konkreetse elemendi juurde. Lehega on taustaga pildi loomine taustapilt vara:
Muuda keha valija konkreetse lehe elemendi juurde, et panna taust vaid ühele elemendile.
Veel üks lõbus asi, mida saate piltidega teha, on luua taustapilt, mis ei keri ülejäänud lehega - nagu vesimärk. Sa lihtsalt kasutad stiili tausta kinnitus: fikseeritud; koos oma taustpildiga. Teiste taustade valikute hulka kuuluvad nende horisontaalseks või vertikaalseks paaniks muutmine taust-kordus vara. Kirjutage taust-kordus: kordus-x; pilti horisontaalselt paanida ja taust-kordus: kordus-y; vertikaalselt plaatida. Ja saate oma taustpildi paigutada nupuga taust-positsioon vara.
Ja CSS3 lisab rohkem stiile ka teie taustale. Saate oma pilte venitada nii, et see sobiks mis tahes suurusega taustaga, või määrata taustapildi akna suurusega skaalale. Saate asukohta muuta ja seejärel taustpildi klippida. Kuid CSS3 üks parimaid külgi on see, et saate nüüd veelgi keerukamate efektide loomiseks mitu taustapilti kihistada.
HTML5 aitab kujundada pilte
The JOONIS HTML5-element tuleks paigutada kõigi piltide ümber, mis võivad dokumendis eraldi olla. Üks võimalus sellele mõelda on see, kui pilt võiks ilmuda lisas, siis peaks see olema pildi sees JOONIS element. Seejärel saate kasutada seda elementi ja JÕUSTUMINE piltidele stiilide lisamiseks.