Stíll myndirnar þínar og notaðu myndir í stílum
Margir nota CSS til að stilla texta, breyta leturgerð, lit, stærð og fleira. En eitt sem margir gleyma oft er að þú getur notað CSS með myndum eins og heilbrigður.
Breyting á myndinni sjálfu
CSS gerir þér kleift að stilla hvernig myndin birtist á síðunni. Þetta getur verið mjög gagnlegt til að halda síðum þínum í samræmi. Með því að stilla stíl á öllum myndum skapar þú venjulegt útlit fyrir myndirnar þínar. Sumt af því sem þú getur gert:
- Bættu við landamæri eða útlínur í kringum myndirnar
- Fjarlægðu lituðu landamærin í kringum tengdum myndum
- Stilla breidd og / eða hæð myndanna
- Bæta við dropaskugga
- Snúðu myndinni
- Breyttu stíll þegar myndin er sveiflast yfir
Að gefa myndina landamæri er frábær staður til að byrja. En þú ættir að íhuga meira en bara landamærin - hugsa um alla brún myndarinnar og stilla á jaðri og padding eins og heilbrigður. Mynd með þunnt svört landamæri lítur vel út, en bætir einhverjum púði milli landamæranna og myndin getur litið betur út.
img {
landamæri: 1px solid svartur;
padding: 5px;
}
Það er góð hugmynd að alltaf tengja ekki skreytingar myndir , þegar mögulegt er. En þegar þú gerir það, mundu að flestir vöfrar bæta við lituðum landamærum í kringum myndina. Jafnvel þótt þú notir ofangreindan kóða til að breyta landamærunum, þá mun hlekkurinn hunsa það nema þú fjarlægir eða breytir landamærunum á tengilinn eins og heilbrigður. Til að gera þetta ættirðu að nota CSS barnalög til að fjarlægja eða breyta landamærunum í kringum tengdum myndum:
img> a {
landamæri: enginn;
}
Þú getur líka notað CSS til að breyta eða stilla hæð og breidd myndanna. Þó að það sé ekki góð hugmynd að nota vafrann til að stilla myndastærðir vegna niðurhalshraða þá verða þau miklu betra að breyta stærð mynda þannig að þau líti enn vel út. Og með CSS getur þú stillt myndirnar þínar á öllum staðalbreidd eða hæð eða jafnvel stillt málin að hlutfallslega við ílátið.
Mundu að þegar þú breytir stærð mynda, til að ná sem bestum árangri, ættirðu aðeins að breyta um eina vídd - hæð eða breidd. Þetta mun enusre að myndin heldur hlutföllum sínum og það lítur ekki út fyrir að vera skrýtið. Stilltu annað gildi í sjálfvirkt farartæki eða farðu það út til að segja vafranum að halda hlutföllum í samræmi.
img {
breidd: 50%;
hæð: sjálfvirkt;
}
CSS3 býður upp á lausn á þessu vandamáli með nýju eiginleikum mótmæla og mótstöðu. Með þessum eiginleikum verður þú að geta skilgreint nákvæma myndhæð og breidd og hvernig hluthæðin ætti að meðhöndla. Þetta gæti búið til bréfshlutaáhrif í kringum myndirnar þínar eða cropping til að fá myndina til að passa í þann stærð sem krafist er.
Þó að CSS3 mótmæla- og hlutastaðareiginleikar séu ekki mikið studdar ennþá eru aðrar CSS3 eiginleikar sem eru vel studdar í flestum nútíma vöfrum sem hægt er að nota til að breyta myndunum þínum. Hlutir eins og droparskuggi, ávalar horn og umbreytingar til að snúa, skera eða hreyfa myndirnar þínar virkar núna í flestum nútíma vafra. Þú getur síðan notað CSS umbreytingar til að gera myndirnar breytilegar þegar sveiflast yfir, eða smellt á, eða bara eftir nokkurn tíma.
Notkun mynda sem bakgrunn
CSS gerir það auðvelt að búa til ímyndaða bakgrunn með myndunum þínum.
Þú getur bætt við bakgrunni á öllu síðunni eða aðeins tiltekið atriði. Það er auðvelt að búa til bakgrunnsmynd á síðunni með bakgrunnsmyndinni:
líkami {
bakgrunnsmynd: url (background.jpg);
}
Breyttu líkamsvelinum við tiltekna hluti á síðunni til að setja bakgrunninn á einni einingu.
Annar skemmtilegt hlutur sem þú getur gert með myndum er að búa til bakgrunnsmynd sem ekki skrunar við afganginn af síðunni - eins og vatnsmerki. Þú notar bara stíllinn bakgrunnur-viðhengi: fastur; ásamt bakgrunnsmyndinni þinni. Aðrir valkostir fyrir bakgrunn þinn eru að gera þá flísar bara lárétt eða lóðrétt með því að nota bakgrunns-endurtaka eignina.
Skrifa bakgrunnur-endurtaka: endurtaka-x; að flísar myndina lárétt og bakgrunnur-endurtaka: endurtaka-y; að flísar lóðrétt. Og þú getur staðsetur bakgrunnsmyndina þína með bakgrunnsstöðu eignarinnar.
Og CSS3 bætir einnig við fleiri stíll fyrir bakgrunn þinn. Hægt er að teygja myndirnar þínar til að passa hvaða stærð bakgrunn sem er eða setja bakgrunnsmyndina í mælikvarða með gluggastærðinni . Þú getur breytt stöðu og klippið síðan bakgrunnsmyndina. En ein besta af CSS3 er að þú getur nú lagað margar bakgrunnsmyndar til að búa til enn flóknari áhrif.
HTML5 hjálpar Style Images
Myndin í HTML5 ætti að vera sett í kringum myndir sem geta verið einir innan skjalsins. Ein leið til að hugsa um það er að ef myndin gæti birst í viðauka þá ætti það að vera innan myndarhlutans. Þú getur þá notað þessi þáttur og FIGCAPTION þátturinn til að bæta stílum við myndirnar þínar.