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, 2010jQuery – 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.
