Da quando Google ha annunciato che il tempo di caricamento delle pagine di un sito influisce sul suo posizionamento, è diventato sempre più importante cercare di ridurre il peso dei nostri script. In questa occasione vedremo quali strumenti ci offre la rete per comprimere i fogli di stile.
(more…)
CSS
Strumenti per comprimere i CSS
Monday, September 6th, 2010Realizzare un dropdown menu con i CSS e Javascript
Tuesday, March 2nd, 2010In molte occasioni capita di avere dei siti particolarmente articolati, in cui un menu su più livelli può aiutare tantissimo il navigatore nel trovare rapidamente quello che sta cercando, senza essere costretto a molti passaggi.
Per realizzare un menu di questo tipo utilizzeremo il codice “Son of Suckerfish Dropdowns”, dal nome particolare, ma fantastico in quanto a resa e a compatibilità sui diversi browsers.
Quello che otterremo sarà un qualcosa del tipo: dropdown menu verticale (oppure in orizzontale).
(more…)
jQuery – Scrolling della pagina
Thursday, February 25th, 2010
Lo scrolling della pagina cliccando sui link interni alla stessa è un effetto di sicuro impatto per il navigatore, c’è addirittura chi lo ha utilizzato per creare dei siti di un’unica pagina. Vediamo quindi una delle tante soluzioni per realizzarlo, il risultato finale che otterremo sarà questo: demo scrolling
(more…)
Mantenere lo sfondo fisso con i CSS
Wednesday, July 30th, 2008Una proprietà molto interessante che si può sfruttare con i CSS è il comando
background-attachment: fixed;
che permette di mantenere bloccato lo sfondo ad esempio di una pagina e scorrere tutto il resto.
Ecco un esempio in cui è possibile vedere la scritta che scorre e lo sfondo rimane fisso e centrato. Per realizzarlo è bastato mettere il comando fixed alle proprietà del background del body, la cui immagine di sfondo è il surfista che compie l’evoluzione.
Ovviamente la stessa proprietà potrà essere utilizzata specularmente in ogni componente in cui è possibile inserire uno sfondo.
CSS e trasparenze
Wednesday, June 4th, 2008I CSS hanno molti comandi che possono essere utilizzati per abbellire le nostre pagine web. Uno di questi è il comando dedicato alla trasparenza degli oggetti. Eccovi un piccolo esempio pratico per capirne il funzionamento.Risultato finale: Sfondo trasparente con i CSS.
Ed ecco il foglio di stile:
body {background-image:url(img/052.jpg);
background-repeat:no-repeat;}
#sfondo{width:600px;}
#menu {list-style:none;margin:0px;padding:0px;}
#menu li a{filter:alpha(opacity="90");
-moz-opacity:0.9;opacity: 0.9;
background-color: #FF0000;
padding:15px;
text-decoration: none;
color: #000;
float:left;}
#menu li a:hover{filter:alpha(opacity="60");
-moz-opacity: 0.6;
opacity:0.6;
background-color: #FF0000;
text-decoration: none;
color:#FFF;}
E qui il codice della pagina HTML:
<div id="sfondo">
<ul id="menu">
<li>Prova Link A</li>
<li>Prova Link B</li>
<li>Prova Link C</li>
<li>Prova Link D</li>
</ul></div>
I valori possibili di opacity si limitano al valore attribuibile alla classe; in questo caso il valore massimo è 1.0 mentre il minimo 0.0, di conseguenza per una trasparenza del 50% dovremmo inserire un valore di 0.5. Il parametro -moz-opacity è dedicato alle vecchie versioni di Firefox; Filter Alpha invece server per Internet Explorer e specularmente i valori vanno da 0 a 100, fra l’altro abbiamo una piena compatibilità già con IE 5, quindi direi che questa proprietà può essere utilizzata senza alcuna apprensione.Si è posto il problema dell’ereditarietà del contenuto, risolvibile impostandone il posizionamento come assoluto e settando in maniera corretta lo z-index.
