Archive for the ‘css’ Category

Come creare un effetto di movimento circolare con jQuery

Codrops ha scritto un tutorialsu come creare simulare un movimento circolare con jQuery. Loro hanno utilizzato il plugin jQuery.path per animare un movimento circolare per un menu all’interno di un sito web, veramente d’effetto. L’idea è quella di avere un contenitore rotondo con un menu principale. Quando si va in hover su una delle voci [...]

More »

Fresh Sliding Thumbnails Gallery con jQuery and PHP

In questo tutorial viene spiegatocome realizzare una galleria full screen di immagini con una barra all’interno della quale scorrono le miniature al passaggio del mouse. L’idea è anche quella di permettere all’utente di ingrandire leggermente la foto cliccando su di essa Inoltre utilizzando PHP è possivile ottenere le immagini e le anteprime automaticamente dalla struttura [...]

More »

jQuery Magic Line Navigation

jQuery Magic Line Navigation permette di ottenere delle evidenziazioni di qualcosa (un background o una sottolineatura) che segue il mouse quando passa sopra a differenti link di un menu di navigazione. Questa linea  o effetto magico è ottenuto solamente utilizzando css e jQuery. Una volta aggiunta la funzione alla lista e allo stile l’animazione si [...]

More »

jQSlickWrap – Collocare del testo intorno a un immagine

jQSlickWrap è un plugin di jQuery che permette facilmente e accuratamente “wrappare” il testo attorno a un immagine inserita nel contenuto. L’implementazione è semplice basta inserire una riga di codice jQuery: $(‘img’).slickWrap(); L’immagine dev’essere un’immagine irregolare e deve utilizzare la proprietà float all’interno del css. Sito web: http://jwf.us/projects/jQSlickWrap Demo: http://jwf.us/projects/jQSlickWrap/example2.html

More »

Effetto bolle con Css

E’ possibile creare un menu tipo Dock di Mac utilizzando solamente il CSS, ovviamente l’effetto non sarà fluido come per il plugin di jquery, ma riesce a dare comunque un bell’effetto al menu. Questo tutorila include due metodi, uno con l’utilizzo di CSS sprites, l’altro con lo scambio di immagini. Sito web: http://aext.net/2009/11/bubble-effect-with-css/ Demo: http://aext.net/example/bubble-css/

More »

Modulo contatti con Ajax, jQuery e Php

Fornire un mezzo semplice e affidabile di feedback o di contatto da parte dei visitatori del sito è una parte fondamentale di un sito web, quindi possiamo dedicare qualche minuti in più per la sua realizzazione e cercare di renderla accattivante e funzionale. In questo tutorial viene spiegato passo passo come realizzare un modulo di [...]

More »

Inserire le demo di uno script all’interno di una pagina con inFrame

Quando si descrive una tecnica o un effetto in javascript o in css molto spesso si ricorre ad un link per visualizzare la demo in modo da non dover inserire all’interno della pagina nell’header ulteriori file che potrebbero andare in conflitto fra di loro. Itilizzando inFrame il lettore non dovrà cambiare pagina per visualizzare la [...]

More »

Cambiare la struttura di una pagina con jQuery e Css

Eccovi un semplice e veloce modo per per mettere agli utenti del vostro sito di cambiare il layout di visualizzazione di una pagina utilizzando CSS e jQuery. Tutto questo rende la pagina più interattiva e permette di scegliere all’utente lo stile che preferisce. Nell’esempio è possibile scegliere due stili di visualizzazione uno più veloce, l’altro [...]

More »

AnythingZoomer jQuery Plugin

AnythingZoomer è un jQuery plugin che permette di ingrandire qualsiasi cosa sul vostro sito: immagini, testo, ecc Funziona utilizzando piccola zona, una vasta zona nascosta, e un pop-up Zoomer  pronta a “rivelare” la zona più grande appena il mouse scorre su di esso. Gli utenti possono anche fare doppio clic sul contenuto per visualizzare la [...]

More »

Spiffy Box

E’ un’applicazione web che permette di creare dei box con i bordi arrotondati, restituendo l’immagine necessaria e il codice css da utilizzare.Quattro sono gli step da seguire1) l’inserimento delle dimensioni del box e del raggio di curvatura del bordo, i colori del box e di background e del bordo2) Salvataggio dell’immagine creata3) Copia e incolla [...]

More »