Web Design Trails

Realizzare un effetto flip all’hover con CSS3 e Javascript

Jessica — Sun, 24 Mar 2013 21:44:31 +0000

In questo tutorial sfruttiamo le trasformazioni 3D di CSS3 per realizzare un effetto di flip in 3D all'hover. Inoltre, utilizziamo Modernzr e jQuery per ottenere una graceful degradation sui browser che non supportano i nuovi standard.

Due template di newsletter free, pronte da utilizzare

Jessica — Mon, 19 Nov 2012 15:00:26 +0000

Web Design Trails mette a disposizione due template di newsletter free pronti da utilizzare nei vostri progetti. Il primo template è pensato per la promozione di prodotti, mentre il secondo è progettato per un'agenzia di viaggi.

Diversi utilizzi degli pseudo-elementi :before e :after

Jessica — Fri, 27 Jul 2012 14:50:17 +0000

Alcuni utilizzi creativi e interessanti degli pseudo elementi :before e :after, che nonostante facciano parte delle specifiche CSS 2.1 non sono ancora molto utilizzati

jQuery: una cheat sheet visuale in italiano

Jessica — Sat, 14 Jul 2012 10:39:11 +0000

In questi giorni di afa estiva sono stata impegnata a realizzare uno strumento utile che in italiano non ho mai trovato: una scheda di riferimento rapido (meglio nota come cheat sheet) per l’ultima versione di jQuery. La guida è pensata per essere visualizzata online, ed è ottimizzata per una risoluzione di 1280x1024px. Fornisce l’elenco delle [...]

10 bellissimi set di icone free pronti da utilizzare

Jessica — Tue, 26 Jun 2012 15:33:46 +0000

Capita a tutti prima o poi di cercare “free icon set” su Google. Oggi ho selezionato per voi 10 bellissimi set di icone completamente gratuiti. 1. Dark Denim Social Media Fonte: Dark Denim Social Media 2. Grunge Social Network Fonte: Grunge Social Network 3. Jigsoar Icons Fonte: Jigsoar Icons 4. Woody Social Icons fonte: Woody [...]

Responsive web design: realizzare un sito reattivo

Jessica — Wed, 20 Jun 2012 22:37:29 +0000

Oggi torniamo a parlare di responsive web design; qualche tempo fa abbiamo visto come procedere per progettare la grafica di un sito reattivo, ora vedremo come realizzarlo in HTML5 e CSS3. Questo è il layout che ci eravamo prefissati di ottenere: Il codice HTML Rivisto il layout, possiamo passare subito alla prima implementazione HTML. Il [...]

Creare un form moderno in HTML5 e CSS3

Jessica — Thu, 07 Jun 2012 20:43:02 +0000

Oggi torniamo a parlare di HTML5 e CSS3, e lo facciamo realizzando un form di registrazione. Infatti, una delle novità più importanti del nuovo standard, è l’introduzione di nuovi tipi di input che semplificano la progettazione di un modulo. Partiamo dall’HTML Iniziamo scrivendo la struttura del nostro form: Come potete vedere, ho realizzato un semplice [...]

Responsive images: come rendere flessibili le immagini con PHP

Thomas — Tue, 29 May 2012 15:13:42 +0000

Come abbiamo avuto modo di vedere una delle basi del responsive web design sono le così dette immagini flessibili. Questa tecnica consente nell’adattare la larghezza delle immagini alla risoluzione dello schermo. Oggi vedremo come realizzarla, utilizzando un mix di CSS, Javacript e PHP. Il CSS base e i problemi di performance Fare in modo che [...]

TextPuff: un plugin jQuery per un effetto fade pulsing del testo

Jessica — Tue, 22 May 2012 09:49:17 +0000

Spesso trovare un effetto di hover adatto al menu di navigazione è più difficile di quanto sembri. Oggi vi presento un plugin di jQuery che crea un effetto di pulsazione e dissolvenza al testo a cui è applicato. Un effetto fade pulse L’effetto si basa su un’idea di Sideroad. L’animazione di pulse da lui realizzata [...]

Responsive web design: progettare un sito reattivo

Jessica — Tue, 15 May 2012 22:24:43 +0000

Oggi parliamo di design reattivo, e di come progettare un sito web che possa essere visualizzato al meglio sul maggior numero di dispositivi. Infatti, Mobile First e Responsive Web Design sono ormai due concetti fondamentali per realizzare siti web moderni ed efficaci. Cos’è il Responsive Web Design Responsive Web Design è un termine coniato da [...]

Slider in parallasse CSS3 (seconda parte)

Jessica — Mon, 07 May 2012 09:57:36 +0000

Oggi completiamo lo slider in parallasse in puro CSS3, iniziato nel precedente tutorial. Nella prima parte abbiamo visto come realizzare lo scorrimento utilizzando la proprietà animation di CSS3. In questo articolo vedremo come gestire l’hover e spostare i testi in parallasse. Interrompere l’animazione all’hover Lo slider che abbiamo realizzato al momento ha un’animazione continua. Questo [...]

Slider in parallasse CSS3 (prima parte)

Jessica — Mon, 30 Apr 2012 08:00:51 +0000

Non fatevi ingannare dall’immagine, oggi non parliamo di sport estremi, ma di come il CSS3 con le proprietà animation, transform e transition ci consentiranno di fare a meno di JavaScript, per realizzare gli effetti più comuni. In questo tutorial vedremo come realizzare uno slider utilizzando la proprietà animation, nella seconda parte aggiungeremo anche l’hover e [...]

Realizzare un menu con effetto scorrimento

Jessica — Fri, 20 Apr 2012 20:19:18 +0000

In questo tutorial vedremo come realizzare un sottomenu che sembra scorrere da sotto l’header utilizzando il CSS e un pizzico di jQuery. Come si vede nell’immagine, l’header che ho pensato ha un lato obliquo ed è a un livello superiore rispetto al contenuto. Il sottomenu tuttavia sta nel mezzo, fra l’header e il corpo. Creiamo [...]