Come creare uno sfondo di due o più colori per un oggetto HTML.

Come creare uno sfondo di due o più colori per un elemento web usando una immagine come background creata con Photoshop, Gimp o Pixlr.

Nel post precedente abbiamo visto come creare dei titoli personalizzati per Blogger da usare come intestazioni interne ai post. Lo sfondo creato per i titoli dei capitoli è stato realizzato utilizzando una immagine di background. In un prossimo articolo vedremo come creare degli sfondi di più colori con il gradiente senza utilizzare immagini ma in questo post voglio mostrare come creare una immagine da usare come sfondo.

Non si tratta di una operazione banale neppure se fosse di un solo colore. Mostrerò come procedere con Photoshop CS6 ma il sistema è sostanzialmente adattabile anche a un editor gratuito come Gimp e a un editor online come Pixlr.  Poniamo si voglia creare uno sfondo di due colori con il primo colore visualizzato solo in una piccola porzione sulla sinistra dell'oggetto mentre il secondo che prenda tutto il resto.

Dopo aver aperto Photoshop si va su File -> Nuovo e si impostano le dimensioni dello sfondo. La dimensione verticale non è tanto importante come vedremo e quella orizzontale deve essere tale da poter essere visualizzata in tutta la larghezza della pagina web. Scegliamo quindi dimensioni di 1200x100 pixel con sfondo bianco

Successivamente si clicca sullo strumento della Selezione Rettangolare per delimitare l'area da colorare

In basso si clicca sulla tavolozza dei colori per scegliere il colore in primo piano da applicare quindi si clicca sullo Strumento Secchiello per poi andare con il cursore dentro l'area che abbiamo selezionato.

Si digita poi su Ctrl+D per annullare la selezione.

Per colorare l'altra parte della immagine si seguono gli stessi passaggi. Si va sullo strumento Selezione Rettangolare per selezionare un'altra parte del banner quindi si clicca sulla tavolozza per scegliere il nuovo colore e lo strumento Secchiello per applicare con un click il colore alla parte selezionata.

A questo punto occorre ridimensionare l'immagine per lasciare invariata solo la larghezza. In teoria per l'altezza basterebbe anche un solo pixel ma per ragioni di praticità lasciamo 2 o 3 pixel di altezza. Ovviamente dovrà essere tolta la spunta a Mantieni proporzioni.

L'immagine potrà essere salvata in JPG o in PNG andando su File -> Salva con nome.

COME CARICARE L'IMMAGINE NEL WEB E OTTENERNE IL LINK DIRETTO

In un precedente post ho mostrato quattro metodi per ottenere il link diretto da Google Foto. Vediamone una quinta alternativa per Blogger. Si va su Bacheca -> Nuovo Post e si carica la immagine appena creata con Photoshop. Si va su Salva e si clicca poi sul bottone HTML per visualizzare il codice

Il link diretto della immagine sarà quello dell'indirizzo nel campo src="...". A questo punto la Bozza che è stata creata potrebbe anche essere eliminata. L'URL della immagine di sfondo sarà simile a questo

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbK2AGmkKMYmBPTiZAVRl7F4RxTjFT4Ux9DqEl5DynxB9oZrsEazVi7OnHMR8zoDXLcFkl_Jfs7i_izHsSqCsNxV-Tnjone91YEExtebr0LUggdJyHR_m450HKd_dk2xQdpylL1xLNbco/s320/background.jpg

e potrà essere usato per creare uno sfondo.

ESEMPIO DI CODICE DA USARE PER  UN OGGETTO CON IMMAGINE DI SFONDO

L'immagine creata potrà essere usata nel codice che abbiamo visto nel post linkato all'inizio. Per creare un elemento avente come sfondo l'immagine di due colori si può usare questo codice

<style>
.elemento {    
      color: #191919;
      max-width:280px;
      font-family: Georgia;    
      background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbK2AGmkKMYmBPTiZAVRl7F4RxTjFT4Ux9DqEl5DynxB9oZrsEazVi7OnHMR8zoDXLcFkl_Jfs7i_izHsSqCsNxV-Tnjone91YEExtebr0LUggdJyHR_m450HKd_dk2xQdpylL1xLNbco/s320/background.jpg);
      background-repeat: repeat-y;   
      padding: 5px 40px;
      font-size: 12px;
}
</style>
<div class='elemento'>Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla.</div>

che produce questo risultato.

Concludo ricordando che naturalmente si può creare anche una immagine di sfondo di tre o più colori. In un prossimo articolo come detto vedremo come creare degli sfondi con sfumature e gradienti con il CSS.