Mange bruker CSS for å justere tekst, endre skrift, farge, størrelse og mer. Men en ting som mange ofte glemmer er at du også kan bruke CSS med bilder.
Endre bildet selv
CSS lar deg justere hvordan bildet vises på siden. Dette kan være veldig nyttig for å holde sidene konsistente. Ved å sette stiler på alle bilder, skaper du et standard utseende for bildene dine. Noen av tingene du kan gjøre:
- Legg til en kant eller omriss rundt bildene
- Fjern den fargede kanten rundt koblede bilder
- Justere bredden og / eller høyden på bildene
- Legg til en skygge
- Roter bildet
- Endre stilene når bildet er svevet over
Å gi bildet ditt en kant er et flott sted å starte. Men du bør vurdere mer enn bare grensen - tenk på hele kanten av bildet ditt og juster margene og polstring også. Et bilde med en tynn svart kant ser fint ut, men å legge litt polstring mellom kanten og bildet kan se enda bedre ut.
Det er en god ide å kobler alltid ikke-dekorative bilder, når mulig. Men når du gjør det, husk at de fleste nettlesere legger til en farget kant rundt bildet. Selv om du bruker koden ovenfor for å endre grensen, vil lenken overstyre den med mindre du fjerner eller endrer grensen på lenken også. For å gjøre dette bør du bruke en CSS-underordnet regel for å fjerne eller endre grensen rundt koblede bilder:
Du kan også bruke CSS til å endre eller stille inn høyden og bredden på bildene dine. Selv om det ikke er en god idé å bruke nettleseren til å justere bildestørrelser på grunn av nedlastingshastigheter, blir de mye bedre til å endre størrelse på bilder slik at de fremdeles ser bra ut. Og med CSS kan du stille inn at bildene dine skal ha en standard bredde eller høyde eller til og med sette dimensjonene til å være relativt til beholderen.
Husk at når du endrer størrelse på bilder, for best resultat, bør du bare endre størrelse på en dimensjon - høyden eller bredden. Dette vil sikre at bildet beholder sideforholdet, og så ser ikke rart ut. Sett den andre verdien til auto eller la det være å fortelle nettleseren å holde størrelsesforholdet konsistent.
CSS3 tilbyr en løsning på dette problemet med de nye egenskapene objekt-passform og objekt-posisjon. Med disse egenskapene vil du kunne definere eksakt bildehøyde og bredde og hvordan størrelsesforholdet skal håndteres. Dette kan skape letterboxing-effekter rundt bildene dine eller beskjæring for å få bildet til å passe i ønsket størrelse.
Det er andre CSS3-egenskaper som støttes godt i de fleste nettlesere som du kan bruke til å endre bildene dine også. Ting som fallskygger, avrundede hjørner og transformasjoner for å rotere, skjev eller flytte bildene dine, fungerer alle nå i de fleste moderne nettlesere. Du kan deretter bruke CSS-overganger for å få bildene til å endres når du holder markøren over, eller klikker på eller like etter en periode.
Bruke bilder som bakgrunn
CSS gjør det enkelt å lage fancy bakgrunner med bildene dine. Du kan legge til bakgrunner til hele siden eller til bare et bestemt element. Det er enkelt å lage et bakgrunnsbilde på siden med bakgrunnsbilde eiendom:
Endre kropp velger til et bestemt element på siden for å sette bakgrunnen på bare ett element.
En annen morsom ting du kan gjøre med bilder er å lage et bakgrunnsbilde som ikke ruller med resten av siden - som et vannmerke. Du bruker bare stilen bakgrunn-vedlegg: fast; sammen med bakgrunnsbildet ditt. Andre alternativer for bakgrunnen inkluderer å gjøre dem fliser bare vannrett eller vertikalt ved hjelp av bakgrunn-gjenta eiendom. Skrive bakgrunn-gjenta: gjenta-x; for å flislegge bildet horisontalt og bakgrunn-gjenta: gjenta-y; å flislegge vertikalt. Og du kan plassere bakgrunnsbildet ditt med bakgrunn-posisjon eiendom.
Og CSS3 legger også til flere stiler for bakgrunnen din. Du kan strekke bildene dine slik at de passer til hvilken som helst bakgrunnsstørrelse, eller angi at bakgrunnsbildet skaleres til vindusstørrelsen. Du kan endre posisjon og deretter klippe bakgrunnsbildet. Men en av de beste tingene med CSS3 er at du nå kan lag flere bakgrunnsbilder for å skape enda mer intrikate effekter.
HTML5 hjelper stilbilder
De FIGUR element i HTML5 skal plasseres rundt alle bilder som kan stå alene i dokumentet. En måte å tenke på det er hvis bildet kan vises i et vedlegg, så bør det være inne i FIGUR element. Du kan deretter bruke det elementet og TEGNING element for å legge til stiler i bildene dine.