Styling av bilder i CSS

Når det gjelder å forbedre skjønnheten i webdesignet, tenker vi ofte å legge til bilder på nettstedet vårt. Men bare å legge til bilder er ikke nok, derfor må du style dem på forskjellige måter for å få dem til å se mer tiltalende. CSS gir mange egenskaper som du kan bruke til å legge til styling til bilder.

Dette innlegget opplyser om hvordan du styler bilder i CSS. I denne guiden vil du gå gjennom følgende:

1. Hvordan lage sirklede bilder
2. Hvordan lage avrundede hjørnebilder
3. Hvordan lage responsive bilder
4. Hvordan du sentrerer bilder
5. Hvordan lage gjennomsiktige bilder
6. Hvordan du plasserer tekst på bilder
7. Hvordan legge til filter til bilder
8. Hvordan lage hover overlegg på bilder
9. Hvordan vippe bilder

La oss komme i gang.

Hvordan lage sirklede bilder

For å få bildene dine til å vises som kretser, bruk CSS Border-Radius-eiendommen. Nedenfor har vi presentert deg et eksempel på et sirklet bilde.

Html

Her har vi ganske enkelt lagt til et bilde i SRC -attributtet til taggen.

CSS

IMG
Border-Radius: 50%;
Bredde: 200px;
Høyde: 200px;

Å sette grensen-radius til 50% vi gjør bildet til en sirkel. Du kan endre verdien hvis du ønsker å gjøre det til en oval eller mindre avrundet.

Produksjon

Bildet ble sirklet med suksess.

Hvordan lage avrundede hjørnebilder

CSS Border-Radius-eiendommen kan også brukes til å gjøre hjørnet av bilder avrundet, her er hvordan du gjør det.

CSS

IMG
Border-Radius: 10px;
Bredde: 200px;
Høyde: 200px;

Her gir vi grense-radiusverdien i piksler for å gjøre hjørnene avrundet.

Produksjon

Hjørnene på bildet er avrundet.

Hvordan lage responsive bilder

Bilder som er responsive, justerer størrelsen i henhold til nettleservinduet. Det under-nevnte eksemplet viser hvordan du gjør det.

Html

I koden ovenfor har vi ganske enkelt lagt til et bilde.

CSS

IMG
Maks bredde: 100%;
Høyde: Auto;

For å gjøre bildet responsivt, sett maksimal bredde til 100% og høyden til Auto.

Produksjon

Bildet endrer bredden i henhold til størrelsen på nettleservinduet.

Hvordan du sentrerer bilder

For å plassere et bilde i sentrum, vis det som et blokknivåelement og sett marginene til Auto. Tenk på eksemplet nedenfor.

CSS

IMG
Display: Block;
margin-venstre: auto;
Margin-høyre: auto;
Bredde: 300px;

For å sentrere et bilde viser vi ganske enkelt det som et blokknivåelement og setter høyre og venstre marginer til Auto.

Produksjon

Bildet har blitt midt justert.

Hvordan lage gjennomsiktige bilder

Hvis du ønsker å gjøre bildene dine gjennomsiktige, bruk CSS Opacity -egenskapen. Jo mindre verdien av opacity -egenskapen, jo mer er gjennomsiktigheten til bildet.

CSS

IMG
Opacitet: 0.3;
Bredde: 300px;

I koden ovenfor ble opaciteten til bildet satt til 0.3.

Produksjon

Bildet ble gjort gjennomsiktig vellykket.

Hvordan du plasserer tekst på bilder

Bruk CSS Position -egenskapen til å plassere tekst på visse posisjoner på bildene. De forskjellige stillingene du kan plassere teksten på bildet er som følger.

1. Øverst til venstre
2. Nede til venstre
3. Senter
4. Øverst til høyre
5. Nede til høyre

Her har vi demonstrert ved hjelp av et eksempel.

Html

Dette er Eiffeltårnet

I koden ovenfor har vi opprettet en div container og plassert bildet og en annen div -beholder inni den.

CSS

.div
Posisjon: relativ;

.øverst til venstre
Posisjon: Absolutt;
Topp: 5px;
Venstre: 5px;
Font-størrelse: 20px;
Font-stil: kursiv;

IMG
Bredde: 400px;
Opacitet: 0.5;

Den første div har fått en relativ stilling slik at den andre diven som holder teksten kan plasseres inni den. Ved hjelp av Topleft -klassen tildeler vi den andre diven en absolutt posisjon og gir den litt lengde fra toppen og venstre, dessuten gir viss skriftstørrelse og stil til teksten.

Produksjon

Teksten er lagt til på bildet øverst til venstre.

Hvordan legge til filtre til bilder

For å legge filter til bilder som uskarphet eller metning, bruk filteregenskapen. Kontakt eksemplet nedenfor:

CSS

IMG
Bredde: 300px;

.inverter
Filter: inverter (100%);

Her bruker vi invert () -metoden på filteregenskapen for å legge til visuelle effekter til bildet.

Produksjon

Visuelle effekter ble lagt til med suksess til bildet.

Noen andre metoder som du kan bruke på filteregenskapen for å legge til forskjellige visuelle effekter er:

• uklarhet(),
• kontrast(),
• lysstyrke (),
• Grayscale (),
• mett (),
• opacitet (), etc.

Hvordan vippe bilder

Å snu et bilde når brukeren bringer musen over det kan være en interessant ting å gjøre. For å gjøre dette, bruk CSS Transform -eiendommen.

CSS

IMG: Hopp
Transform: Scaley (-1);
Bredde: 300px;

Her vipper vi bildet langs Y-aksen ved hjelp av SKALEY () -metoden for å transformere eiendommer.

Produksjon

Bildet ble vendt over y-aksen.

Konklusjon

Styling av bilder som vises på nettstedet ditt er svært viktig, og dette kan gjøres ved hjelp av forskjellige CSS -egenskaper. Flere ting du kan gjøre for å style bildene dine er som gjør dem til en sirkel, gjør hjørnene avrundet eller gjør dem til miniatyrbilde. Dessuten kan du gjøre bildene dine responsive, eller legge til tekst eller visse visuelle effekter på dem. I dette innlegget har vi vist mange måter du kan style bildene dine ved hjelp av CSS, sammen med relevante eksempler.