5 CSS-eigenschappen die u moet weten

Er zijn CSS-eigenschappen, zoals achtergrondafbeeldingen, randafbeeldingen, maskering en clippingeigenschappen, waarmee u afbeeldingen rechtstreeks aan webpagina's kunt toevoegen en hun gedrag kunt beheren. Er zijn echter ook minder vaak voorkomende beeldgerelateerde CSS-eigenschappen die werken op afbeeldingen die zijn toegevoegd met de HTML-tag, de voorkeursmanier om afbeeldingen toe te voegen aan webpagina's.

De taakomschrijving van deze laatste eigenschappen varieert van het besturen van de schaduw van de afbeelding tot het instellen van de scherpte, zodat we het uiterlijk en de positie van de afbeeldingen die met de label. Laten we ze een voor een bekijken.

1. Verscherp afbeeldingen met image-rendering

Wanneer een afbeelding wordt opgeschaald, maakt de browser de afbeelding vloeiender, zodat deze er niet korrelig uitziet. Maar, afhankelijk van de resolutie van het beeld en het scherm, is dit misschien niet altijd het beste. U kunt dit browsergedrag beheren met de eigenschap voor het weergeven van image-rendering .

Deze goed ondersteunde eigenschap bestuurt het algoritme dat wordt gebruikt om een ​​afbeelding te schalen . De twee belangrijkste waarden zijn crisp-edges en pixelated .

De waarde voor crisp-edges behoudt het kleurcontrast tussen pixels . Met andere woorden, er worden geen afbeeldingen verzacht, wat geweldig is voor pixelillustraties .

Wanneer pixelated wordt gebruikt, kunnen de pixels in de buurt van een pixel zijn uiterlijk krijgen, waardoor het lijkt alsof ze samen één grote pixel vormen, ideaal voor schermen met een hoge resolutie.

Als je goed blijft kijken naar de bloemranden in de onderstaande GIF, zie je het verschil tussen een gewone en een pixelated afbeelding.

 img {image-rendering: pixelated; } 

2. Strek afbeeldingen met een object-fit

De waarden voor contain, cover, fill zijn allemaal bekend, we gebruiken ze voor de eigenschap op de background-size die bepaalt hoe een achtergrondafbeelding het element opvult waartoe het behoort. De object-fit eigenschap lijkt redelijk op deze, omdat deze ook bepaalt hoe een afbeelding binnen de container wordt geplaatst .

De contain waarde bevat de afbeelding binnen de container . cover doet hetzelfde, maar als de beeldverhouding van de afbeelding en de container niet overeenkomt, wordt de afbeelding afgekapt . fill zorgt ervoor dat de afbeelding wordt uitgerekt en de container wordt gevuld . scale-down kiest de kleinste versie van de afbeelding die moet worden weergegeven.

 #container {width: 300px; hoogte: 300 px; } img {width: 100%; hoogte: 100%; object-fit: bevatten; } 

3. Verschuif afbeeldingen met object-position van het object-position

Net als bij de aanvullende background-position eigenschap van de background-size, is er ook een object-position voor object-fit .

De eigenschap object-fit verplaatst een afbeelding in een afbeeldingscontainer naar de gegeven coördinaten . De coördinaten kunnen worden gedefinieerd als absolute lengte-eenheden, relatieve lengte-eenheden, trefwoorden ( top, left, center, bottom en right ), of een geldige combinatie hiervan ( top 20px right 5px, center right 80px ).

 #container {width: 300px; hoogte: 300 px; } img {width: 100%; hoogte: 100%; objectpositie: 150 px 0; } 

4. Plaats afbeeldingen met vertical-align

We voegen er soms aan toe (die inline van nature zijn) naast tekstreeksen voor toegevoegde informatie of decoratie . In dat geval kan het een beetje lastig zijn om de tekst en het beeld in de gewenste positie te brengen, als u niet weet welke eigenschap u moet gebruiken.

De eigenschap vertical-align is niet exclusief voor tabelcellen alleen . Het kan ook een inline-element in een inline-kader uitlijnen en kan dus worden gebruikt om een afbeelding in een tekstregel uit te lijnen . Het kost een behoorlijk aantal waarden die op een inline-element kunnen worden toegepast, zodat u uit veel opties kunt kiezen.

PDF  5. Schaduw afbeeldingen met filter: drop-shadow() 
Wanneer schaduwen onopvallend in tekst en vakken worden gebruikt, kunnen ze leven toevoegen aan een webpagina. Hetzelfde geldt voor in afbeeldingen. Afbeeldingen met kernvormen en transparante achtergronden kunnen profiteren van het CSS-filter met de drop-shadow .
De argumenten zijn vergelijkbaar met de waarden van de schaduwgerelateerde CSS-eigenschappen ( text-shadow, box-shadow ). De eerste twee vertegenwoordigen de verticale en horizontale afstand tussen de schaduwen en de afbeelding, de derde en vierde zijn de vervaging en de gespreide straal van de schaduw, en de laatste is de schaduwkleur .
Net als text-shadow creëert drop-shadow ook een schaduw die is gevormd naar het bijbehorende object . Dus, wanneer het wordt toegepast op een afbeelding, neemt de schaduw de vorm aan van het zichtbare gedeelte van de afbeelding.
 img {filter: slagschaduw (0 0 5px blauw); } 







        

          
          

		  
Schuine randen maken met CSS
            
In dit bericht gaan we bekijken hoe we een gehoekt randeffect (horizontaal) op een webpagina kunnen maken. Kortom, het ziet er ongeveer zo uit:Met een licht gebogen rand zou onze weblay-out er minder stijf en saai uit moeten zien. Om dit te doen, zullen we de pseudo-elementen gebruiken: ::before and ::after en CSS3 Transform 
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
40 gratis infographic sjablonen om te downloaden
            
Infographics zijn tegenwoordig erg populair. Ze helpen lezers grote hoeveelheden informatie te begrijpen en te onthouden in een leuke, boeiende vorm. Omdat infographics vrij grote grafische afbeeldingen zijn en een combinatie van grafieken, grafieken, afbeeldingen, typografie, tekstinformatie, enz . Bevatten, hebben ze veel tijd en moeite nodig om helemaal opnieuw te worden gemaakt
			
(Technische en ontwerptips)