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); } 







        

          
          

		  
10 Gratis HTML5 Video Konverteringsverktøy
            
Borte er dagene da du måtte flytte bilder på nettstedet ditt, måtte du bruke GIF eller Adobe Flash. Fremveksten av HTML 5 og dens multimediefunksjoner har gjort det mulig for designere å gjøre uten Adobe Flash eller tunge, langsomt lastende GIF-animasjoner, og i stedet bruke den innfødte HTML5-videospilleren. Imid
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
En guide til Essential Tumblr Etiquette: Do's & Don'ts
            
Tumblr er mer enn bare et annet sosialt nettverksside - det er et fellesskap. Til tross for mangfoldet i samfunnsinteresser, fungerer alle disse fellesskapene på samme sett med akseptert, uansett uoffisiell etikette på Tumblr. Visse regler regulerer disse praksisene, og selv om de ikke er offisielle, kan det bli ubehagelig hvis ikke fulgt.S
			
(Tekniske og design tips)