in Full!

Creare un effetto fullscreen con CSS e senza utilizzare Flash! Il linguaggio Flash seppur di grande impatto grafico a volte lotta con l'insoddisfazione di alcuni Clienti che naturalmente desiderano avere un sito compatibile con tutti i sistemi, browser e soprattutto al giorno d'oggi con Smartphone Mobile e Tablet. Bene abbiamo quindi pensato di creare questo piccolo tutorial sperando che a qualcuno di voi possa tornare utile.. buona lettura!

Css & Image Fullscreen



Lavorando per un progetto di un nuovo Cliente ci siamo imbattuti nel dover ricreare un effetto di immagini in fullscreen senza però utilizzare linguaggio Flash, poichè la richiesta è che il sito debba poter essere visionato anche da piattaforme mobile o Tablet quali iPad e iPhone.

Bene allora armati di buon impegno abbiamo lavorato su un foglio di stile e il risultato è l’integrazione di un Background inserito nel template grafico a DIV utilizzando CSS.

L’altro problema era legato al fatto che lo stesso background doveva in qualche modo adattarsi sia al tipo di browser che al tipo di risoluzione o apertura della finestra. In sostanza utilizzando la classe CSS3 “background-size”  abbiamo ricreato l’effetto.

Importante: Questo metodo è Cross-Browser e non richiede il supporto di Javascript… comodo no? 🙂

Ecco il Codice CSS di Base

html, body {
 background: url(marylin.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

 font-family: 'Philosopher', cursive;
}

Clicca qui per visionare la Demo Online

Chi è artwork?


ArtWork è una web agency con sede a Milano Centro. Specializzata nello studio, progettazione, sviluppo e realizzazione siti internet ottimizzati per i motori di ricerca, web design, restyling e ristrutturazione di siti internet esistenti, grafica e blog per il web, studio e realizzazione di marchi e logo, servizi internet. Creazione siti internet e sviluppo pagine web per qualsiasi esigenza, dalla semplice pagina al sito completo. Non smettiamo mai di imparare e il nostro obiettivo é quello di dedicare a Voi la nostra esperienza nel settore.

5 Risposte su “Css & Image Fullscreen”

  1. pimpi says:

    l’immagine si deforma…

    • artwork tm says:

      Ciao Pimpi,
      abbiamo revisionato il tutorial ed inserito la nuova classe CSS3 background-size.
      Questa, risolve il problema della proporzione immagine
      (sempre senza l’ausilio di javascript ma solo CSS).

      Quindi la soluzione sarà quella di utilizzare all’interno del tag html (preferibile body)
      nel nostro foglio di stile, la classe sopra descritta.. quindi semplicemente:

      html {

      background: url(nome_immagine.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

      Spero di esserti stato utile, a presto 🙂

  2. Marco says:

    Vi ringrazio tantissimo per l’aiuto !!! 😉 siete grandi

  3. Luca says:

    Ma su IE funziona?

Invia una Domanda o Risposta

web agency Milano · creazione siti internet · creazione sito aziendale · realizzazione siti internet · restyling sito · creazione siti mobile · creazione logo · produzione video
artwork

PREVENTIVO