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







        

          
          

		  
10 Open Source CMS voor het bouwen van e-commercesites
            
Er zijn een aantal oplossingen voor het bouwen van een e-commerce website die alle hulpprogramma's en functies bevatten voor gemakkelijk online winkelen, zoals productcatalogus, voorraadbeheer, winkelwagentje en betalingsgateways.U kunt kiezen voor de gehoste e-Commerce route, bijvoorbeeld door te shoppen op Shopify of BigCommerce, die uw websites hosten binnen hun server, uw website instellen, onderhouden en upgraden, op voorwaarde dat u bent geabonneerd op hun service (meestal maandelijks) 
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
Hoe te filteren en de DOM-boom met JavaScript doorkruisen
            
Wist u dat er een JavaScript-API bestaat waarvan de enige missie is om uit te filteren en te herhalen via de knooppunten die we van een DOM-structuur willen? In feite zijn er niet één, maar er zijn twee van dergelijke API's: NodeIterator en TreeWalker . Ze lijken erg op elkaar, met enkele bruikbare verschillen. 
			
(Technische en ontwerptips)