5 CSS Egenskaper du bør vite

Det finnes CSS-egenskaper, for eksempel bakgrunnsbilder, grensebilder, maskerings- og klippingegenskaper, som du direkte kan legge til bilder på nettsider og kontrollere deres oppførsel. Det er imidlertid også mindre ofte nevnt bilde-relaterte CSS egenskaper som fungerer på bilder lagt til med HTML-kode, som den foretrukne måten å legge til bilder på nettsider.

Jobbeskrivelsen til disse sistnevnte egenskapene varierer fra å kontrollere bildeskyggen for å angi skarpheten, slik at vi bedre kan kontrollere utseendet og plasseringen av bilder som er lagt til med stikkord. La oss se dem en etter en.

1. Skarp bilder med image-rendering

Når et bilde er oppskalert, jevner nettleseren bildet, slik at det ikke ser ut pixelert. Men, avhengig av oppløsningen til bildet og skjermen, er dette kanskje ikke det beste til enhver tid. Du kan kontrollere denne nettleserens adferd med egenskapen for image-rendering .

Denne godt støttede egenskapen styrer algoritmen som brukes til å skalere et bilde . De to hovedverdiene er crisp-edges og pixelated .

Den crisp-edges opprettholder fargekontrast mellom piksler . Med andre ord blir det ikke gjort noe glatt på bilder, noe som er flott for pikselkunstverk .

Når pixelated brukes, kan de nærliggende pikslene av en piksel ta opp sitt utseende, slik at det virker som om de danner en stor piksel, perfekt for høyoppløselige skjermbilder.

Hvis du fortsetter å se nærmere på blomsterkantene i GIF nedenfor, kan du se forskjellen mellom et vanlig og et pixelated bilde.

 img {image-rendering: pixelated; } 

Innholdet, cover, fill er alle kjent, vi bruker dem til background-size som styrer hvordan et bakgrunnsbilde fyller opp elementet den tilhører. object-fit er ganske lik den, da den også bestemmer hvordan en bildestørrelse inne i beholderen .

contain inneholder bildet i sin beholder . cover gjør det samme, men hvis bildeforholdet mellom bildet og beholderen ikke stemmer overens, blir bildet klippet . fill fører til at bildet strekker seg og fyller beholderen . scale-down velger den minste versjonen av bildet som skal vises.

 #container {width: 300px; høyde: 300px; } img {bredde: 100%; høyde: 100%; objekt-fit: inneholder; } 

På samme måte som egenskapen til background-size i background-size, er det også en object-position for object-fit .

Egenskapen for object-fit passerer et bilde i en bildebeholder til de oppgitte koordinatene . Koordinatene kan defineres som absolutte lengdeenheter, relative lengdeenheter, søkeord ( top, left, center, bottom og right ), eller en gyldig kombinasjon av dem ( top 20px right 5px, center right 80px ).

 #container {width: 300px; høyde: 300px; } img {bredde: 100%; høyde: 100%; objektposisjon: 150px 0; } 

Vi legger noen ganger til (som er i naturen) ved siden av tekststrenger for mer informasjon eller dekorasjon . I så fall kan det være litt tøft å tilpasse teksten og bildet til ønsket posisjon, hvis du ikke vet hvilken egenskap du skal bruke.

Egenskapen vertical-align er ikke bare for tabellceller alene . Det kan også justere et inlineelement inne i en inline-boks, og kan dermed brukes til å justere et bilde i en tekstlinje . Det tar et rettferdig antall verdier som kan brukes på et inlineelement, så du har mange muligheter å velge mellom.

PDF  5. Skyggebilder med filter: drop-shadow() 
Når det brukes uvanlig i tekst og bokser, kan skygger legge til liv på en nettside. Det samme gjelder for bilder. Bilder med kjerneformer og gjennomsiktige bakgrunner kan ha nytte av drop-shadow CSS-filteret.
Dets argumenter ligner verdiene til skygge-relaterte CSS-egenskaper ( text-shadow, box-shadow ). De to første representerer den vertikale og horisontale avstanden mellom skyggene og bildet, den tredje og fjerde er uskarpheten og spredningsradiusen til skyggen, og den siste er skyggenfarge .
På samme måte som text-shadow, skaper drop-shadow også en skygge som er støpt til tilhørende gjenstand . Så når den er brukt på et bilde, tar skyggen formen av den synlige delen av bildet.
 img {filter: drop-shadow (0 0 5px blue); } 







        

          
          

		  
Hvordan vil du lære webdesign?
            
Er du interessert i å lære webdesign, men ikke sikker på hvilken vei du skal ta? Vel, det er generelt 3 hovedveier der folk i feltet lærer webdesign. Avhengig av omstendighetene kan du finne en bane som er gunstigere enn de to andre.I dette enkle innlegget vil vi diskutere fordelene, ulempene og de store høydepunktene i å lære webdesign gjennom tradisjonell skolegang, mot å ta online kurs mot selvlæring (aka tinkering rundt på nettet). Ved slut
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
10 Effektive studiemetoder for å overbelaste ditt sinn
            
Alle hater tester, klør det, alle hater å studere for tester . Når du forsøker å rettferdiggjøre at du hadde studert det som ble undervist for hele semesteret (eller året), berettiget av den siste avsluttende undersøkelsen, går det ofte feil. Sinnet som går tomt, delvis tilbakekalling og tip-of-the-tongue fenomener, eller fryser opp på det mest avgjørende øyeblikket, er det studentene frykter mest. Hvis dette 
			
(Tekniske og design tips)