it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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; } 
2. Estendi le immagini con l' object-fit

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; }
3. Spostare le immagini con object-position

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; }
4. Situare le immagini con vertical-align

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 eseguire le app Windows su Android con Wine 3.0

Come eseguire le app Windows su Android con Wine 3.0

Wine è uno dei miei strumenti indispensabili per lavorare su Linux. Se non conosci Wine, è un livello di compatibilità tra Windows e Linux, che colma il divario tra i due e consente alle applicazioni Windows di funzionare su Linux ; quasi magicamente.Mentre Wine è disponibile da molto tempo, ma il suo rilascio del nuovo anno ha portato un importante aggiornamento - il supporto per Android . Ci

(Consigli tecnici e di design)

Copia codici da siti web facilmente con SnappySnippet

Copia codici da siti web facilmente con SnappySnippet

Come sviluppatore web, potremmo occasionalmente trovare alcuni elementi ispiratori su un sito Web che ti fanno pensare a come hanno costruito quella cosa. Quindi, penseresti a ottenere una copia di quel codice. Chrome Devtools e Firebug di Firefox sono stati effettivamente forniti con la funzione che semplifica la copia di HTML e CSS da un sito Web

(Consigli tecnici e di design)