Cell. +39 3479684755
Il Blog di Instant Websites
Prosegue la collaborazione tra INSTANT WEBSITES e CHESS PROJECTS asd
Come annunciato in un recente articolo, INSTANT WEBSITES ha realizzato il sito Internet di un importantissimo torneo internazionale di scacchi: la 45a edizione delle Finali del CIS Master 2013 e 6a Finale del CIS Femminile 2013 organizzato da Chess Projects asd (indirizzo del sito: www.45finalecismasterfsi2013.it).
L’evento ha avuto grande successo ed il sito è stato consultato ad oggi dalla bellezza di circa 8.500 visitatori per complessive 25.000 pagine lette: numeri importanti per un torneo durato una settimana e destinati a crescere ulteriormente.
La collaborazione sta ora proseguendo con la realizzazione del sito Internet per il prossimo torneo organizzato da Chess Projects asd: il 2° Open Internazionale del Salento in programma presso l’Ecoresort Le Sirenè a Gallipoli dal prossimo 25 maggio al 1 giugno 2013.
Il sito sarà presto in linea all’indirizzo: www.2opensalento2013.it.
Immagine di sfondo al 100% con CSS3 e con CSS2
Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:
1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.
Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.
Vediamo dunque come procedere:
CSS3
E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.
Il codice CSS sarà dunque:
body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.
Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.