Arddull Eich Delweddau a Defnyddio Delweddau mewn Styles
Mae llawer o bobl yn defnyddio CSS i addasu testun, gan newid y ffont, y lliw, y maint a mwy. Ond un peth y mae llawer o bobl yn ei anghofio yn aml yw y gallwch chi ddefnyddio CSS gyda delweddau hefyd.
Newid y Ddelwedd Ei Hun
Mae CSS yn eich galluogi i addasu sut mae'r ddelwedd yn dangos ar y dudalen. Gall hyn fod yn ddefnyddiol iawn i gadw'ch tudalennau yn gyson. Trwy osod arddulliau ar bob delwedd, byddwch yn creu edrych safonol ar gyfer eich delweddau. Rhai o'r pethau y gallwch chi eu gwneud:
- Ychwanegu ffin neu amlinelliad o gwmpas y delweddau
- Tynnwch y ffin lliw o amgylch delweddau cysylltiedig
- Addasu lled a / neu uchder y delweddau
- Ychwanegu cysgod galw heibio
- Cylchdroi'r ddelwedd
- Newid yr arddulliau pan fydd y ddelwedd yn mynd heibio
Mae rhoi'ch delwedd i ffin yn lle gwych i ddechrau. Ond dylech ystyried mwy na dim ond y ffin - meddyliwch am ymyl gyfan eich delwedd ac addaswch yr ymylon a'r padlo hefyd. Mae delwedd gyda ffin denau du yn edrych yn braf, ond yn ychwanegu peth padl rhwng y ffin a gall y ddelwedd edrych yn well fyth.
img {
ffin: 1px du soled;
padio: 5px;
}
Mae'n syniad da bob amser i gysylltu delweddau anaddas , pan fo modd. Ond pan wnewch chi, cofiwch fod y rhan fwyaf o borwyr yn ychwanegu ffin lliw o gwmpas y ddelwedd. Hyd yn oed os ydych chi'n defnyddio'r cod uchod i newid y ffin, bydd y ddolen yn goresgyn hynny oni bai eich bod yn dileu neu newid y ffin ar y ddolen hefyd. I wneud hyn, dylech ddefnyddio rheol plentyn CSS i ddileu neu newid y ffin o amgylch delweddau cysylltiedig:
img> a {
ffin: dim;
}
Gallwch hefyd ddefnyddio CSS i newid neu osod uchder a lled eich delweddau. Er nad yw'n syniad gwych defnyddio'r porwr i addasu maint y delweddau oherwydd cyflymder lawrlwytho, maent yn gwella'n well wrth newid maint delweddau fel eu bod yn dal i edrych yn dda. A chyda CSS gallwch chi osod eich delweddau i bob un yn lled neu uchder safonol neu hyd yn oed osod y dimensiynau i fod yn gymharol â'r cynhwysydd.
Cofiwch, pan fyddwch yn newid maint y delweddau, ar gyfer y canlyniadau gorau, dim ond un dimensiwn y dylid ei newid - yr uchder neu'r lled. Bydd hyn yn golygu nad yw'r ddelwedd yn cadw ei gymhareb agwedd, ac felly nid yw'n edrych yn rhyfedd. Gosodwch y gwerth arall i fod yn awtomatig neu ei adael i ddweud wrth y porwr i gadw'r gymhareb agwedd yn gyson.
img {
lled: 50%;
uchder: auto;
}
Mae CSS3 yn cynnig ateb i'r broblem hon gyda'r eiddo newydd sy'n gwrthrych-ffitio a gosod gwrthrych. Gyda'r eiddo hyn, byddwch yn gallu diffinio'r union uchder a lled delwedd a sut y dylid trin y gymhareb agwedd. Gallai hyn greu effeithiau blwch llythyrau o gwmpas eich delweddau neu gropio i gael y ddelwedd i gyd-fynd â'r maint sydd ei angen.
Er nad yw'r eiddo CSS3 gwrthrych-ffitio ac eiddo gwrthrych yn cael ei gefnogi'n eang eto, mae yna eiddo CSS3 eraill sy'n cael eu cefnogi'n dda yn y rhan fwyaf o borwyr modern y gallwch eu defnyddio i addasu eich delweddau. Mae pethau fel cysgodion gollwng, corneli crwn, a thrawsnewidiadau i gylchdroi, ysgubo, neu symud eich delweddau i gyd yn gweithio ar hyn o bryd yn y rhan fwyaf o borwyr modern. Yna gallwch chi ddefnyddio trosglwyddiadau CSS i wneud y delweddau'n newid pan fyddant yn cael eu trosglwyddo, neu eu clicio, neu ddim ond ar ôl cyfnod o amser.
Defnyddio Delweddau fel Cefndiroedd
Mae CSS yn ei gwneud hi'n hawdd creu cefndiroedd ffansi gyda'ch delweddau.
Gallwch ychwanegu cefndiroedd i'r dudalen gyfan neu i dim ond elfen benodol. Mae'n hawdd creu delwedd gefndir ar y dudalen gyda'r eiddo cefndir-ddelwedd:
corff {
cefndir-ddelwedd: url (background.jpg);
}
Newid y dewiswr corff i elfen benodol ar y dudalen i roi cefndir ar un elfen yn unig.
Un peth hwyl arall y gallwch chi ei wneud gyda delweddau yw creu delwedd gefndir nad yw'n sgrolio gyda gweddill y dudalen - fel dyfrnod. Rydych chi'n defnyddio'r arddull cefndir arddull: sefydlog; ynghyd â'ch delwedd gefndirol. Mae opsiynau eraill ar gyfer eich cefndiroedd yn cynnwys eu gwneud yn debyg yn lorweddol neu'n fertigol gan ddefnyddio'r eiddo cefndir-ailadroddus.
Ysgrifennwch gefndir-ailadrodd: ailadrodd-x; i deilsio'r ddelwedd yn llorweddol a chefndir-ailadrodd: ailadrodd-y; i deilsio'n fertigol. A gallwch chi osod eich delwedd cefndir gyda'r eiddo cefndirol.
Ac mae CSS3 yn ychwanegu mwy o arddulliau i'ch cefndir hefyd. Gallwch chi ymestyn eich delweddau i ffitio unrhyw gefndir maint neu osod y ddelwedd gefndir i raddfa gyda maint y ffenestr . Gallwch chi newid y sefyllfa ac yna clipio'r ddelwedd gefndirol. Ond un o'r pethau gorau am CSS3 yw y gallwch chi bellach haenu delweddau cefndir lluosog i greu effeithiau hyd yn oed yn fwy cymhleth.
Mae HTML5 yn Helpu Delweddau Arddull
Dylid gosod yr elfen FIGUR yn HTML5 o gwmpas unrhyw ddelweddau sy'n gallu sefyll ar eu pen eu hunain yn y ddogfen. Un ffordd i feddwl amdano yw pe gallai'r ddelwedd ymddangos mewn atodiad, yna dylai fod y tu mewn i'r elfen FFIGUR. Yna gallwch ddefnyddio'r elfen honno a'r elfen FIGCAPTION i ychwanegu arddulliau i'ch delweddau.