jQuery Corners: angoli arrotondati senza programmi di grafica!

Questo plugin per jQuery permette di realizzare angoli arrontondati sui vostri <div> senza dover ricorrere a programmi di grafica.
Non servono nè immagini nè aggiunta di tag particolari.

Esempio di codice:
<div style="background-color:#acc; padding:5px" class="rounded">
Simple Example
</div>
<script>$(document).ready( function(){
$('.rounded').corners();
});</script>

Questo è il codice necessario per ottenere un <div> azzurro con angoli arrontondati di 5 pixel. Il segreto sta tutto nella classe rouded, che indica al plugin di "arrontondare" quell'elemento.

VAI AL SITO UFFICIALE

PS: con l'avvento di CSS3 è possibile creare bordi arrotondati anche con semplici istruzioni css: http://border-radius.com/

Leggi tutto...

Parallax Background: effetto parallasse sullo sfondo

Un "esperimento" che si avvicina molto a jParallax è Parallax Background, uno script in javascript che permette di utilizzare la stessa tecnica delle immagini su più livelli direttamente nello sfondo della pagina.
Il risultato non è pienamente soddisfacente, però si tratta comunque di un buon esperimento, che vale la pena di mezionare.

Trovate codice e spiegazioni nel sito ufficiale.

VAI AL SITO UFFICIALE

Leggi tutto...

jParallax: effetto parallasse di grande impatto con jQuery

L'altro giorno sono capitata su uno dei miei siti preferiti, Dezignus.com, e ho notato un effetto veramente carino nell'header. In pratica, spostandosi a destra e a sinistra con il mouse, le immagini dell'header, sovrapposte e trasparenti, si muovevano in modo indipendente.
Ho subito pensato che si trattasse di Ajax, e così è!

Si tratta del plugin jParallax, sviluppato per il framework jQuery che permette di creare un effetto Parallasse (Parallax) tra immagini.
La parallasse è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione, e il punto di osservazione nel nostro caso è la posizione del puntatore del mouse.

Per utilizzare questo plugin nel nostro sito dobbiamo innanzitutto scaricare il file js, dopodichè è sufficiente inserire nella nostra pagina un elemento con con id parallax e al suo interno inserire le immagini con cui vogliamo creare i diversi "piani" della composizione. Naturalmente l'effetto è migliore se utilizziamo delle png, che mantegono un'ottima trasparenza.

Esempio di codice:

<div id="parallax">
<img src="head_1-trans.png" alt="" style="width:1110px; height:224px;">
<img src="head_2-trans.png" alt="" style="width:1020px; height:224px;">
<img src="head_3-trans.png" alt="" style="width:1140px; height:224px;">
<img src="head_4-trans.png" alt="" style="width:1180px; height:224px;">
</div>

Sul sito ufficiale è possibile trovare molti esempi e una documentazione dettagliata.

VAI AL SITO UFFICIALE

Leggi tutto...

Photoshop: 50 fantastici tutorial per principianti intelligenti

Psdtuts.com ci propone questo ottimo post in cui raccoglie 50 tra i più interessanti tutorial per "principianti intelligenti", ovvero chi non lo sa fare ma almeno cerca di applicarsi!
Ci sono moltissime soluzioni interessanti e creative, vi consiglio di darci un'occhiata!

VAI A PSDTUTS.COM

Leggi tutto...

Photoshop: creare uno sfondo natalizio

Ecco un altro bellissimo tutorial per creare un magico sfondo natalizio per il vostro desktop. Il risultato finale è veramente sorprendente! Per realizzare l'albero avrete bisogno di un set di brushes ( pennelli ) per Photoshop, comunque scaricabili liberamente a questo link (sono dei pennelli veramente eccezionali, vale comunque la pena di averli!).
Buon divertimento!

VAI AL TUTORIAL

Leggi tutto...