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







        

          
          

		  
Come rintracciare il dispositivo perso con Gestione dispositivi Android
            
La cosa migliore di possedere un dispositivo mobile è la mobilità che fornisce; la cosa peggiore è che essere mobile aumenta le possibilità di perdere i tuoi dispositivi in ​​modi inimmaginabili. Nelle circostanze in cui si perde effettivamente un dispositivo, ci sono molte app di terze parti che possono essere utilizzate per tracciare i dispositivi persi o rubati, ma ci sono anche strumenti dedicati per gli utenti iOS e Android.Per i d
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Crea finestre modali accessibili con la finestra di dialogo A11y
            
I modali sono ampiamente supportati nei browser moderni. Possono essere utilizzati come popup di notifica, come campi opt-in o anche per presentazioni di foto .Puoi costruire queste finestre usando puro CSS ma questa non è la soluzione più accessibile. Invece, controlla A11y Dialog, una finestra modale completamente funzionante che pone l'accento sull'accessibilità prima di tutto .Fu
			
(Consigli tecnici e di design)