Molte persone usano i CSS per regolare il testo, cambiando il carattere, il colore, la dimensione e altro. Ma una cosa che molte persone spesso dimenticano è che puoi usare anche i CSS con le immagini.
Cambiare l'immagine stessa
CSS ti consente di regolare il modo in cui l'immagine viene visualizzata sulla pagina. Questo può essere davvero utile per mantenere le tue pagine coerenti. Impostando gli stili su tutte le immagini, crei un aspetto standard per le tue immagini. Alcune delle cose che puoi fare:
- Aggiungi un bordo o un contorno intorno alle immagini
- Rimuovi il bordo colorato attorno alle immagini collegate
- Regolazione della larghezza e / o dell'altezza delle immagini
- Aggiungi un'ombra esterna
- Ruota l'immagine
- Cambia gli stili quando l'immagine è al passaggio del mouse
Dare un bordo alla tua immagine è un ottimo punto di partenza. Ma dovresti considerare più di un semplice confine - pensa all'intero bordo dell'immagine e regola anche i margini e il padding. Un'immagine con un bordo nero sottile sembra gradevole, ma l'aggiunta di una spaziatura tra il bordo e l'immagine può sembrare ancora migliore.
img { bordo: 1px solido nero; imbottitura: 5px;}
È una buona idea collegare sempre immagini non decorative, quando possibile. Ma quando lo fai, ricorda che la maggior parte dei browser aggiunge un bordo colorato attorno all'immagine. Anche se utilizzi il codice sopra riportato per modificare il bordo, il collegamento sostituirà quello a meno che non rimuovi o cambi il bordo sul collegamento. Per fare ciò dovresti utilizzare una regola figlio CSS per rimuovere o modificare il bordo attorno alle immagini collegate:
img> a { confine: nessuno;}
Puoi anche usare i CSS per cambiare o impostare l'altezza e la larghezza delle tue immagini. Anche se non è una buona idea utilizzare il browser per regolare le dimensioni delle immagini a causa della velocità di download, stanno ottenendo risultati migliori nel ridimensionamento delle immagini in modo che risultino ancora belle. E con i CSS è possibile impostare le immagini su una larghezza o altezza standard o persino impostare le dimensioni in modo che siano relative al contenitore.
Ricorda, quando ridimensioni le immagini, per ottenere risultati ottimali, dovresti ridimensionare solo una dimensione, l'altezza o la larghezza. Ciò farà sì che l'immagine mantenga le sue proporzioni e quindi non sembri strana. Imposta l'altro valore su auto o lasciarlo fuori per dire al browser di mantenere le proporzioni coerenti.
img { larghezza: 50%; altezza: auto;}
CSS3 offre una soluzione a questo problema con le nuove proprietà oggetto-fit e oggetto posizioni. Con queste proprietà sarai in grado di definire l'altezza e la larghezza esatte dell'immagine e come gestire le proporzioni. Questo potrebbe creare effetti letterbox attorno alle tue immagini o ritaglio per far sì che l'immagine si adatti alle dimensioni richieste.
Mentre il CSS3 oggetto-fit e oggetto posizioni le proprietà non sono ancora ampiamente supportate, ci sono altre proprietà CSS3 che sono ben supportate nella maggior parte dei browser moderni che è possibile utilizzare per modificare le immagini. Oggetti come le ombre esterne, gli angoli arrotondati e le trasformazioni per ruotare, inclinare o spostare le immagini funzionano tutti ora nella maggior parte dei browser moderni. È quindi possibile utilizzare le transizioni CSS per far cambiare le immagini quando si passa con il mouse sopra o su cui si fa clic o solo dopo un periodo di tempo.
Utilizzo di immagini come sfondi
Con CSS è facile creare sfondi fantasiosi con le tue immagini. È possibile aggiungere sfondi all'intera pagina o solo a un elemento specifico. È facile creare un'immagine di sfondo sulla pagina con immagine di sfondo proprietà:
corpo { background-image: url (background.jpg);}
Cambiare il corpo selettore su un elemento specifico della pagina per mettere lo sfondo su un solo elemento.
Un'altra cosa divertente che puoi fare con le immagini è creare un'immagine di sfondo che non scorra con il resto della pagina, come una filigrana. Devi solo usare lo stile background-attachment: fixed; insieme alla tua immagine di sfondo. Altre opzioni per i tuoi sfondi includono renderle affiancate orizzontalmente o verticalmente usando background-repeat proprietà. Scrivi background-repeat: repeat-x; per affiancare l'immagine in orizzontale e background-repeat: repeat-y; piastrellare verticalmente. E puoi posizionare la tua immagine di sfondo con il background-position proprietà.
E CSS3 aggiunge anche altri stili per i tuoi sfondi. Puoi allungare le immagini per adattarle a qualsiasi sfondo di dimensioni o impostare l'immagine di sfondo in scala con le dimensioni della finestra. È possibile modificare la posizione e quindi ritagliare l'immagine di sfondo. Ma una delle cose migliori di CSS3 è che ora puoi sovrapporre più immagini di sfondo per creare effetti ancora più complessi.
HTML5 aiuta le immagini di stile
Il FIGURA l'elemento in HTML5 deve essere posizionato attorno a qualsiasi immagine che può stare da sola all'interno del documento. Un modo per pensarci è se l'immagine potrebbe apparire in un'appendice, quindi dovrebbe essere all'interno di FIGURA elemento. È quindi possibile utilizzare quell'elemento e il FIGCAPTION elemento per aggiungere stili alle tue immagini.
