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







        

          
          

		  
Freebie: elementi di infografica "Modern Business"
            
Il panorama del business è in continua evoluzione, così come la tecnologia e le tecniche di marketing coinvolte. Molte più aziende utilizzano la potenza dell'infografica per raggiungere davvero il loro mercato di riferimento.Se sei un designer che fa un lavoro per le aziende di tutte le forme e dimensioni, è probabile che tu abbia ottenuto alcuni vettori gratuiti, PSD e simili da Freepik. Do
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
App Impostazioni Google - 10 funzionalità che ogni utente Android dovrebbe conoscere
            
Hai notato un'app di Impostazioni Google sul tuo dispositivo Android? L'anno scorso, Google ha tranquillamente caricato questa app su tutti i dispositivi utente Android che eseguono i servizi Google. Questa app è anche nota come Google Play Services, in cui le app di Google possono connettersi a Google+.
			
(Consigli tecnici e di design)