Molte persone usano 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 i CSS anche 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 coerenti le tue pagine. 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 viene posizionata sopra
Dare un bordo alla tua immagine è un ottimo punto di partenza. Ma dovresti considerare qualcosa di più del semplice bordo: pensa all'intero bordo della tua immagine e regola i margini e imbottitura anche. Un'immagine con un bordo nero sottile sembra carina, ma l'aggiunta di un po' di imbottitura tra il bordo e l'immagine può sembrare ancora migliore.
È una buona idea collega 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 precedente per modificare il bordo, il collegamento lo sovrascriverà a meno che non rimuovi o modifichi anche il bordo del collegamento. Per fare ciò dovresti usare una regola figlio CSS per rimuovere o modificare il bordo attorno alle immagini collegate:
Puoi anche usare i CSS per modificare o impostare l'altezza e la larghezza delle tue immagini. Anche se non è una buona idea usare il browser per regolare le dimensioni delle immagini a causa della velocità di download, stanno migliorando molto nel ridimensionare le immagini in modo che abbiano ancora un bell'aspetto. E con i CSS puoi impostare le tue immagini in modo che abbiano tutte una larghezza o un'altezza standard o persino impostare le dimensioni in modo che siano relative al contenitore.
Ricorda, quando ridimensioni le immagini, per ottenere i migliori risultati, dovresti ridimensionare solo una dimensione: l'altezza o la larghezza. Ciò assicurerà che l'immagine mantenga le sue proporzioni e quindi non sembri strano. Imposta l'altro valore su auto o lasciarlo fuori per dire al browser di mantenere coerenti le proporzioni.
CSS3 offre una soluzione a questo problema con le nuove proprietà adattamento all'oggetto e posizione-oggetto. Con queste proprietà, sarai in grado di definire l'esatta altezza e larghezza dell'immagine e come gestire le proporzioni. Questo potrebbe creare effetti letterbox intorno alle tue immagini o ritagliare per far sì che l'immagine si adatti alle dimensioni richieste.
Esistono altre proprietà CSS3 ben supportate nella maggior parte dei browser che puoi utilizzare anche per modificare le tue immagini. Cose come ombre esterne, angoli arrotondati e trasformazioni per ruotare, inclinare o spostare le immagini funzionano tutte in questo momento nella maggior parte dei browser moderni. È quindi possibile utilizzare le transizioni CSS per modificare le immagini quando si passa sopra, si fa clic o si fa clic o subito dopo un periodo di tempo.
Utilizzo di immagini come sfondi
I CSS semplificano la creazione di sfondi fantasiosi con le tue immagini. Puoi aggiungi sfondi all'intera pagina o solo a un elemento specifico. È facile creare un'immagine di sfondo sulla pagina con il immagine di sfondo proprietà:
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. Usa solo lo stile attaccamento allo sfondo: fisso; insieme alla tua immagine di sfondo. Altre opzioni per i tuoi sfondi includono farli affiancare solo orizzontalmente o verticalmente usando il sfondo-ripetizione proprietà. Scrivi background-repeat: repeat-x; per affiancare l'immagine orizzontalmente e background-repeat: repeat-y; affiancare verticalmente. E puoi posizionare la tua immagine di sfondo con il posizione di sfondo proprietà.
E CSS3 aggiunge anche più stili per i tuoi sfondi. Puoi allungare le tue immagini per adattarle a uno sfondo di qualsiasi dimensione o impostare l'immagine di sfondo in modo che si adatti alle dimensioni della finestra. È possibile modificare la posizione e quindi ritagliare l'immagine di sfondo. Ma una delle cose migliori dei 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 dovrebbe essere posizionato attorno a qualsiasi immagine che può stare da sola all'interno del documento. Un modo per pensarci è che se l'immagine potesse apparire in un'appendice, allora dovrebbe essere all'interno del FIGURA elemento. Puoi quindi usare quell'elemento e il FIGCAPTION elemento per aggiungere stili alle tue immagini.