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







        

          
          

		  
14 costruttori di form HTML online gratuiti
            
Il modo più semplice per raccogliere dati sui tuoi clienti o utenti è tramite moduli online. Dai moduli di accesso per le app per dispositivi mobili ai moduli di iscrizione a newsletter, moduli di feedback e moduli di registrazione, ecc. Gli utenti online si imbattono in forme ovunque. Pertanto, gli sviluppatori web prestano particolare attenzione alla creazione di moduli semplici e attraenti per gli utenti.I
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Strumenti principali che ogni SEO dovrebbe utilizzare nel 2018
            
Come consulente SEO, hai bisogno di un particolare set di strumenti per sapere esattamente dove si posizionano i tuoi concorrenti nei migliori motori di ricerca, come cercare parole chiave efficaci e tracciare nuove opportunità man mano che si sviluppano. Inoltre, ci sono dozzine di attività, piani e campagne che devono essere gestiti. 
			
(Consigli tecnici e di design)