Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/var/lib/php/session) is not within the allowed path(s): (/home/httpd/vhosts/cssmagazine.it/httpdocs:/tmp) in /home/httpd/vhosts/cssmagazine.it/httpdocs/wp-content/plugins/wassup/lib/wassup.class.php on line 284
CSSMagazine » Javascript

Tecniche di precaricamento delle immagini

Javascript, Tutorial, XHTML/CSS Nessun commento »

Precaricamento immagini

Nel momento in cui realizziamo un menù di navigazione composto da sole immagini e con effetti roll-over (immagini che cambiano al passaggio del mouse), il primo problema che salta all’occhio è quello relativo ad un certo ritardo nel visualizzare l’immagine alternativa, che si traduce nella visualizzazione di un riquadro grigio per 1-2 secondi.

Vediamo insieme come ovviare a questo piccolo inconveniente. In questo articolo esamineremo due soluzioni: la prima prevede l’inserimento di un semplice Javascript nella nostra pagina, mentre la seconda sfrutta la proprietà “background-position” del CSS.

Leggi tutto »



Angoli arrotondati con JQuery

Javascript, Tutorial, XHTML/CSS 4 Commenti »

Rounded Corners

Tra le tendenze di design nell’epoca del web 2.0 c’è senza dubbio quella di fare largo uso degli angoli arrotondati per i diversi elementi della pagina. Solitamente si provvede creando delle immagini ad hoc e posizionandole tramite CSS. Oggi esamineremo un’alternativa in Javascript: si chiama Curvy Corners, e dall’originario script ne è stata realizzata una versione da utilizzare come plugin di JQuery.

Leggi tutto »



Pannello a scomparsa con Mootools

Javascript, Mootools, Tutorial, XHTML/CSS 5 Commenti »

Pannello a scomparsa

Una tendenza molto diffusa negli ultimi tempi è quella di inserire nelle proprie pagine delle aree a scomparsa, che possono essere espanse/ridotte per visualizzare ulteriori informazioni. Questa pratica, oltre ad aggiungere (se ben realizzata) un elemento di originalità al proprio design, presenta dei vantaggi anche dal punto di vista comunicativo: permette infatti di nascondere informazioni superflue, favorendo la concentrazione del visitatore su quello che è il messaggio principale contenuto nella pagina.

L’immagine all’inizio del post rappresenta un esempio di utilizzo di questa tecnica. Toggle, web agency londinese, ha infatti utilizzato questa tecnica nel suo nuovo sito per nascondere i servizi destinati ai clienti.

Vediamo ora come realizzare un effetto simile sfruttando Mootools e una semplice funzione javascript.
Leggi tutto »



Effetti di transizione sulle immagini

Javascript, Tutorial, XHTML/CSS Nessun commento »

Transizioni tra le immagini

Quando si crea una pagina con delle proprie foto può essere interessante, per dare maggiore dinamicità al tutto, inserire degli effetti di transizione tra le immagini. In passato l’unico modo per inserire effetti del genere era ricorrere all’utilizzo del Flash. Oggi abbiamo a disposizione tantissime soluzioni Javascript che ci consentono di realizzare degli effetti gradevoli senza dover inserire pesanti animazioni nei nostri siti.

Leggi tutto »

Dockbar in stile Mac sul proprio sito

Javascript, Tutorial, XHTML/CSS 2 Commenti »

Dockbar

Una delle caratteristiche più amate del sistema operativo Apple è senz’altro la dockbar, ovvero quella barra situata nella parte bassa dello schermo che permette di lanciare le applicazioni e/o passare da un’applicazione all’altra.

Oggi, grazie ad un semplice javascript, è possibile inserire una dockbar in stile Mac sul proprio sito.
Leggi tutto »