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 conobject-position
Analogamente alla proprietà complementare di
background-position
dibackground-size
, c'è anche una proprietàobject-position
perobject-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 (intop
, aleft
, alcenter
, inbottom
earight
) o una combinazione valida di esse (top 20px right 5px
, acenter right 80px
).#container {width: 300px; altezza: 300 px; } img {width: 100%; altezza: 100%; posizione dell'oggetto: 150 px 0; } 4. Situare le immagini convertical-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 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
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