Molti conosceranno Snap Shot un servizio online che permette di visualizzare sul proprio sito l'anteprima di un sito web appena si passa sopra al suo link.

Con jQuery è possibile simulare quasto comportamento, senza fare uso del servizio esterno, e inoltre possiamo personalizzarlo a nostro piacimento.

E' possibile inoltre generare semplici tool tips di testo o simulare l'ingrandimento di un'immagine.

La libreria è stata ideata e realizzata da cssglobe.

Non ci sono commenti. | Views: 139

Questo script permette di cronometrare il tempo di esecuzione di uno script, utile quando si vuole ottimizzare uno script, o conoscere i tempi di esecuzione di un determinato server.

<?php
$start = (float) array_sum(explode(' ',microtime()));

//inserire il codice che si vuole cronometrare

$end = (float) array_sum(explode(' ',microtime()));

echo "Tempo di esecuzione dello script: ". sprintf("%.4f", ($end-$start))." secondi";
?>

Non ci sono commenti. | Views: 159

Questo stile di solito viene utilizzato nei giornali e nelle riviste per dare risalto all'inizio di un'articolo. 

In css questa tecnica viene chiamata "CSS Drop Caps".

Codice Html:

<p>
<span class="dropcap">T</span>his starts with a dropcap.
</p>

 Codice Css:

.dropcap {
float:left;
color:#D4D4C7;
font-size:100px;
line-height:70px;
padding-top:2px;
font-family: Times, serif, Georgia;
}

 Esempio:

For this one we want to force the first big letter to span about five lines. The font-size is adjusted to exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space.

Commenti (1) | Views: 592

Ecco come allineare verticalmente il contenuto di un div utilizzando il line-height.

Script CSS: 

div{
    height:100px;
    width:500px;
    background-color:#CCCCCC;
}
div *{
    margin:0;
}
div p{
    line-height:100px;
}

 Codice HTML

<div><p>contenuto del paragrafo</p></div>

Non ci sono commenti. | Views: 895

Ecco una tecnica molto utile per aggiungere un gradient ad un testo, utilizzabile ad esempio per aggiungere maggiore effetto ai titolo h1, h2... etc. Per creare l'effetto viene utilizzato solamente del codice CSS e un'immagine PNG di 1px trasparente con il gradient che vogliamo aggiungere.
Tutto quello che serve è un tag span vuoto all'interno del titolo a cui si applicherà un background posizionandolo al di sopra del testo utilizzando la proprietà position:absolute all'interno del CSS.

Questo barbatrucco è stato testato su Firefox, Safari, Opera, e su Internet Explorer 6 utilizzando in questo caso un hack per il supporto del png.

Oltre al beneficio di rendere più affascinanti le vostre pagine web, questa tecnica vi solleva dall'obbligo di creare delle immagini al posto dei titoli e di conseguenza risparmierete tempo e banda!

Commenti (1) | Views: 1909

Multibox è uno script per aprire popup all'interno della stessa finastra del browser che supporta immagini, flash, video, mp3 e codice html. E' possibile inoltre configurare il colore di backgroundo utilizzare una trasparenza.

Lo script è supportato da Firefox 2 (mac / pc), IE 7, IE 6, Safari (mac).

Per il suo funzionamento è necessaria la libreria Mootools v1.1

Commenti (2) | Views: 1219