5 Proprietà CSS che dovresti sapere

Esistono proprietà CSS, come immagini di sfondo, immagini dei bordi, mascheratura e proprietà di ritaglio, con le quali è possibile aggiungere direttamente immagini alle pagine Web e controllarne il comportamento. Tuttavia, ci sono anche meno citate proprietà CSS legate alle immagini che funzionano su immagini aggiunte con il Tag HTML, che è il modo preferito di aggiungere immagini alle pagine web.

La descrizione del lavoro di queste ultime proprietà varia dal controllo dell'ombra dell'immagine all'impostazione della nitidezza, aiutandoci a controllare meglio l'aspetto e la posizione delle immagini aggiunte con il etichetta. Vediamoli uno per uno.

1. Migliora le immagini con il image-rendering

Quando un'immagine viene ingrandita, il browser smussa l'immagine, quindi non sembra pixelata. Ma, a seconda della risoluzione dell'immagine e dello schermo, questo potrebbe non essere il migliore in ogni momento. È possibile controllare questo comportamento del browser con la proprietà di image-rendering delle image-rendering .

Questa proprietà ben supportata controlla l'algoritmo utilizzato per ridimensionare un'immagine . I suoi due valori principali sono crisp-edges e pixelated .

Il valore dei crisp-edges mantiene il contrasto cromatico tra i pixel . In altre parole, per le immagini non viene eseguito alcun livellamento, il che è ottimo per la grafica pixel .

Quando viene utilizzato pixelated, i pixel vicini di un pixel potrebbero assumere il suo aspetto, facendo sembrare che insieme formano un grande pixel, ideale per gli schermi ad alta risoluzione.

Se continui a guardare da vicino i bordi del fiore nella GIF sottostante, puoi vedere la differenza tra un'immagine normale e un'immagine pixelated .

 img {image-rendering: pixelated; } 

I valori di contain, cover, fill sono tutti familiari, li usiamo per la proprietà background-size che controlla il modo in cui un'immagine di sfondo riempie l'elemento a cui appartiene. La proprietà object-fit è abbastanza simile ad essa, in quanto determina anche come le dimensioni di un'immagine all'interno del suo contenitore .

Il valore contiene contiene l'immagine nel suo contenitore . cover fa lo stesso, ma se le proporzioni dell'immagine e del contenitore non corrispondono, l' immagine viene ritagliata . fill fa allungare l'immagine e riempire il suo contenitore . scale-down sceglie la versione più piccola dell'immagine da visualizzare.

 #container {width: 300px; altezza: 300 px; } img {width: 100%; altezza: 100%; object-fit: contenere; } 

Analogamente alla proprietà complementare di background-position di background-size, c'è anche una proprietà object-position per object-fit .

La proprietà object-fit sposta un'immagine all'interno di un contenitore di immagini alle coordinate specificate . Le coordinate possono essere definite come unità di lunghezza assoluta, unità di lunghezza relativa, parole chiave (in top, a left, al center, in bottom ea right ) o una combinazione valida di esse ( top 20px right 5px, a center right 80px ).

 #container {width: 300px; altezza: 300 px; } img {width: 100%; altezza: 100%; posizione dell'oggetto: 150 px 0; } 

A volte aggiungiamo (che sono in linea per natura) accanto a stringhe di testo per ulteriori informazioni o decorazioni . In tal caso, allineare il testo e l'immagine nella posizione desiderata può essere un po 'difficile, se non si conosce la proprietà da utilizzare.

La proprietà vertical-align non è esclusiva delle sole celle di tabella . Può anche allineare un elemento in linea all'interno di un riquadro in linea e quindi può essere utilizzato per allineare un'immagine in una riga di testo . Ci vuole un discreto numero di valori che possono essere applicati a un elemento in linea, quindi hai molte opzioni tra cui scegliere.

PDF  5. Immagini ombreggiate con filter: drop-shadow() 
Se usato in modo non appariscente nei testi e nelle scatole, le ombre possono aggiungere vita a una pagina web. Lo stesso vale per le immagini. Le immagini con forme core e sfondi trasparenti possono trarre vantaggio dal filtro CSS drop-shadow .
I suoi argomenti sono simili ai valori delle proprietà CSS relative all'ombra ( text-shadow, box-shadow ). Le prime due rappresentano la distanza verticale e orizzontale tra le ombre e l'immagine, la terza e la quarta sono la sfocatura e il raggio di diffusione dell'ombra, e l'ultima è il colore dell'ombra .
Proprio come text-shadow, drop-shadow crea anche un'ombra modellata sull'oggetto appartenente . Quindi, quando viene applicato a un'immagine, l'ombra assume la forma della porzione visibile dell'immagine.
 img {filter: drop-shadow (0 0 5px blu); } 







        

          
          

		  
Niantic lancia nuove misure di sicurezza per Pokémon Go;  Cheaters in armi
            
Cheating and Botting in Pokémon Go è piuttosto comune, poiché molti si affidano a software di terze parti per spoofare le proprie posizioni e automatizzare il gioco per guadagnare livelli. La reazione di Niantic verso gli imbrogli è stata relativamente tranquilla finora, ma è cambiata venerdì, quando gli imbroglioni hanno scoperto che Niantic ha aggiornato silenziosamente le funzionalità di sicurezza sui server Pokémon Go.Sebbene
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Ritaglia e ridimensiona le immagini con questo semplice plugin jQuery
            
Il ritaglio di immagini dinamiche è più facile che mai grazie a librerie come jQuery. Il codebase è facile da usare e la community ha migliaia di plugin per la gestione delle immagini .Uno di questi plugin è Cropper, una soluzione di ritaglio di immagini open source gratuita che gestisce lo zoom, il ritaglio e persino il salvataggio delle immagini .Que
			
(Consigli tecnici e di design)