CSS Jquery Ajax Javascript – Tutorials e risorse

Css menu gratuito orizzontale dropdown a 3 livelli

Revisione del primo esempio di css menu orizzontale dropdown. Questa nuova versione, altro avere un sub livello extra, si adatta in larghezza al suo contenuto testo e i link rimang ...

Css orizzontale accordion – 14

Dopo l'esempio del css news accordion in senso verticale, ecco un nuovo esempio di accordion nel senso orizzontale. Questo esempio css, visualizza un elemento div in apertura e una ...

Css menu gratuito – 13

Esempio gratuito di menu orizzontale realizzato puramente in css senza uso d'immagine con un sistema di tab che si aprono sullo stato hover dei pulsanti. ...

Menu drop down verticale a 3 livelli – css menu gratuito 12

Free css menu basato sul tutorial Come creare un css menu drop down verticale di base su 3 livelli. ...

Css tab menu – 11

Free CSS tab menu orizzontale che si abbassano sullo stato hover, pulsanti estendibile in larghezza in rapporto al suo contenuto e stato selezionato. ...

Css news accordion – css esempio 10

Esempio css gratuito di un effetto accordion verticale che visualizza le informazioni completi di testo ed immagine quando si passa sopra i titoli con il mouse. Immagine di preview ...

Css menu verticale – esempio css 9

Menu css verticale con prima lettera iniziale visibile in apertura e il resto del nome del link visibile sullo stato hover. ...

Responsive design: come realizzare un sito Mobile-Friendly

Posted by: Alfredo Piccione Posted date: March 19, 2012 | comment : 12

Il Responsive design è una pratica che attraverso l'uso di una caratteristica del CSS chiamata Media Query, permette di realizzare siti web che si adattano automaticamente ai diversi dispositivi su cui avviene la visualizzazione, senza realizzare altre versioni del sito stesso. Questo modo di progettare siti web è completamente diverso rispetto al web design tradizionale, e necessità una progettazione più ...

Player video HTML5 con lista XML

Posted by: Marco Nardi Posted date: November 28, 2011 | comment : 0

Ecco un video player in HTML 5 che legge da un file XML esterno. E' facile da configurare, basta agire sul file XML per aggiungere o togliere video dalla lista. Per ogni item nel file XML si possono aggiungere un titolo, una descrizione ed i percorsi dei files video ( formati mp4 e ogg ). Inoltre, nel file XML possiamo configurare le dimensioni del video. ...

HMTL 5 video player con lista video da feeds di YouTube

Posted by: Marco Nardi Posted date: November 24, 2011 | comment : 2

Ho creato un video player utilizzando l'iframe che mette a disposizione YouTube con la classe youtube-player. Questo video player è in HTML 5 e Javascript ( jQuery ). Carica gli standard feeds da YouTube e visualizza una lista dei video in base ad alcuni criteri: Most Viewed, Top Rated, Recently Featured, Most Discussed, Top Favorites, Most Responded e Most Recent. Molto utile per imparare a lavorare con Ja ...

RSS con JQuery Mobile, HTML5 e JFeed

Posted by: Marco Nardi Posted date: November 17, 2011 | comment : 1

Ecco un lettore RSS mobile che carica dei feeds in tempo reale. Tecnologie usate: JQuery Mobile, Jquery, JFeed, HTML5 e PHP. ...

Scalare immagine di sfondo senza distorsione

Posted by: Marco Nardi Posted date: November 09, 2011 | comment : 4

In questo esempio vediamo come impostare una immagine di sfondo al 100% con JQuery Vedremo come fare in modo che l'immagine di sfondo venga ridimensionata adeguatamente al ridimensionamento della finestra del browser. Inoltre questo script permette di non alterare le dimensioni dell'immagine durante il ridimensionamento e quindi fare in modo che l'immagine non venga distorta. Funziona sia per immagini orizz ...

Lista selezionabile con JQuery e transizioni di colore

Posted by: Marco Nardi Posted date: November 07, 2011 | comment : 0

Ho creato una semplice lista selezionabile con JQuery. Ogni elemento selezionato viene distinto per un'animazione del colore di sfondo e del colore di testo. Per gestire le transizioni di colore, ho usato il plugin JQuery color. Vediamo il codice utilizzato. ...

Google Maps e Javascript/JQuery – parte prima

Posted by: Marco Nardi Posted date: November 04, 2011 | comment : 0

Questa è la prima parte di una serie di tutorial che riguarda le API Javascript di Google Maps. In questo caso vediamo come visualizzare una Google map con Javascript. Come centrare tale mappa in base ad un indirizzo. Il mio esempio è gestito da un file XML che contiene alcuni indirizzi. Questo file viene caricato con JQuery Ajax per popolare una lista select ( o combobox ). In base alla selezione dell'uten ...

Popolare un Combobox con JQuery e XML

Posted by: Marco Nardi Posted date: November 03, 2011 | comment : 0

HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" /> <script type="text/javascript" src ...

Scroller orizzontale ultimi tweets con Jquery

Posted by: Marco Nardi Posted date: October 29, 2011 | comment : 0

Ho creato uno scroller orizzontale che visualizza gli utlim tweets di un account Twitter. I tweets vengono caricati chiamando le API di Twitter. Le tecnologie usate sono Jquery, html e CSS. Inoltre un file PHP esegue la chiamata al feed di Twitter ( causa problemi di permessi ). HTML Abbiamo una chiamata da onLoad del body verso una funzione Javascript chiamata loadTweets che risiede nel file last_tweets.js ...

Galleria Jquery, Ajax, CSS e XML

Posted by: Marco Nardi Posted date: October 27, 2011 | comment : 2

Ho creato una semplice galleria immagini con HTML, Jquery e Ajax. Questa galleria è gestita semplicemente da un file XML ( images.xml ). Dato che vengo dal mondo Flash/Actionscript sono abituato a gestire i contenuti delle applicazioni da un file XML esterno. Cosa ne pensate ? Di seguito elenco i passi principali per costruire tale galleria. ...

Transizioni animate con CSS3

Posted by: Marco Nardi Posted date: March 19, 2011 | comment : 1

Eravamo abituati a vedere transizioni a bottoni o elementi web applicate solo utilizzando Flash o Javascript. CSS3 implementa alcune comode e utili transizioni per arricchire alcuni eventi nei nostri disegni. Il W3C Spiega le transizioni CSS molto semplicemente :Le transizioni CSS permettono le modifiche alle proprietà CSS nei valori che si verificano uniformemente nel corso di un periodo di tempo specifica ...

Cartolina natalizia in CSS

Posted by: Marco Nardi Posted date: December 21, 2009 | comment : 3

Quest'anno, per presentare miei auguri natalizi, ho deciso di creare questa cartolina puramente in css ...

Css menu gratuito orizzontale dropdown a 3 livelli

Posted by: Marco Nardi Posted date: June 19, 2009 | comment : 10

Revisione del primo esempio di css menu orizzontale dropdown. Questa nuova versione, altro avere un sub livello extra, si adatta in larghezza al suo contenuto testo e i link rimangono selezionati man mano che si scende di livello. ...

Ombreggiatura testo in css

Posted by: Marco Nardi Posted date: May 05, 2009 | comment : 4

Per creare un effetto ombreggiatura ai testi in css, è stato introdotto nella stesura del modulo CSS3 Testo, la proprietà text-shadow (ombreggiatura del testo). Purtroppo, al momento questa proprietà css3, non fa parte delle specifiche css e non è supportata da tutti i browser (vedi le prove della proprietà css3 text-shadow). Nel frattempo, vediamo come ricreare lo stesso ...

Css orizzontale accordion – 14

Posted by: Marco Nardi Posted date: April 27, 2009 | comment : 12

Dopo l'esempio del css news accordion in senso verticale, ecco un nuovo esempio di accordion nel senso orizzontale. Questo esempio css, visualizza un elemento div in apertura e una serie di link che si aprono sullo stato hover orizzontalmente tipo slide. Ogni, link contiene più elementi 'inline': b: la voce del link img: l'immagine di sfondo em: lo sfondo semi trasparente (usando la proprietà ...