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...

Illustrator: effetto "amico dell'ambiente" su testo

Ecco un altro fantastico tutorial su Illustrator, proposto da Vectortuts.com, che ci spiega come creare un testo effetto "Amico dell'Ambiente".
Il risultato finale è strepitoso, da provare.

Link: http://vectortuts.com/text-effects/creating-an-environmentally-friendly-green-type-treatment/

Leggi tutto...

Illustrator: creare un albero di Natale

Mi permetto di segnalare il bellissimo tutorial che trovate sul sito di N-Design Studio, che spiega nel dettaglio come realizzare un realistico albero di Natale con Illustrator.
Il tutorial è in inglese, ma è corredato di molte immagini che rendono il tutto piuttosto chiaro.

Leggi tutto...

Illustrator: creare un logo 3D

La procedura per creare un logo 3D con Adobe Illustrator è molto semplice e richiede solo pochi passaggi.

1^ STEP
Innanzitutto scriviamo un testo oppure disegniamo qualcosa con gli strumenti che Illustrator ci mette a disposizione.

2^ STEP
Premiamo CTRL+A per selezionare tutti gli oggetti sullo stage, e quindi dal menu Effetto scegliamo 3D e quindi Estrusione e Smusso.
Sulla finestra che si apre selezioniamo la checkbox Anteprima per visualizzare già il risultato finale.
Proviamo varie combinazioni finchè non otteniamo un risultato che ci soddisfi, e clicchiamo su OK.


3^ STEP
A questo punto avremo il nostro bel logo 3d, ma non è detto che l'ombreggiatura automatica aggiunta dal programma ci soddisfi.
La soluzione migliore per personalizzare il nostro logo è premere CTRL+A e quindi selezionare la voce Espandi aspetto dal menu Oggetto.
A questo punto avremo ottenuto un gruppo di tracciati.

4^ STEP
Per separare i tracciati, clicchiamo su Oggetto > Separa.
Ora sarà sufficiente selezionare il tracciato con lo strumento Selezione, e quindi scegliere un nuovo colore di riempimento.
Una volta raggiunto un risultato soddisfacente, è consigliabile raggruppare nuovamente i tracciati cliccando su Oggetto > Raggruppa.

Leggi tutto...

Ultime notizie sull'ADSL nel basso padovano

Non tutto è perduto!
Proprio venerdì ho chiesto informazioni sulla copertura ADSL al tecnico comunale di Megliadino San Vitale, e mi è stato risposto che la banda larga sarà attiva nel nostro comune non appena verranno ultimati i lavori in Via Bosco Alto, che riguardano appunto la stesura dei cavi.
Speriamo quindi che tutto sia a posto entro la fine dell'anno??? Speriamo.

Leggi tutto...