MISTERWEBBY - WORDPRESS - CSS - JQUERY - TUTORIAL PHOTOSHOP - FREEBIES

Menu in CSS – Collection

in Collection, css by microtag il 2-09-11 - No Comments


css-menu-collection

Tutorial e risorse per creare menu di navigazione in CSS.


  • Realizzare un menu in CSS3

    Ogni sito web che si rispetti ha bisogno di un buon menù. Il menù è infatti il primo elemento che si presenta all'utente quando si collega ad un sito web che, a prescindere dal layout e dalla complessità, deve essere facilmente fruibile. Questo tutorial per CSS3 si propone appunto di offrire una guida alla realizzazione di un semplice menù facilmente fruibile.

    DEMO    VAI AL SITO

  • Ricreare il menu del sito Vimeo.com

    Il tutorial di seguito si prefigge di ricreare il menu, situato nella parte superiore, del sito Vimeo.com. Il menù ha la particolarità di scorrere in basso, quando si passa col cursore sopra la casella di ricerca e di offrire diverse opzioni di ricerca tra le quali scegliere per restringere la richiesta. La base per questo tutorial è un semplice menù a scomparsa CSS basato su una lista non ordinata.

    DEMO    VAI AL SITO

  • Pulsanti CSS3 senza immagini

    Creare pulsanti web con spigoli arrotondati e riempimento sfumato a gradienti è diventato più semplice tramite CSS3, dopo il rilascio di Firefox 3.6 ed il suo WebKit. Con CSS3 è possibile creare gli effetti dei pulsanti dinamici senza ricorrere ad immagini; tramite pochi comandi da inserire nelle righe di codice HTML si possono definire i colori delle sfumature lineari e del testo sia utilizzando valori RGB che HEX. Il risultato è un set di pulsanti leggeri e personalizzabili da utilizzare per ogni evento di programmazione web.

    DEMO    VAI AL SITO

  • Barra di navigazione in CSS3

    Di solito si cerca di essere molto creativi quando si tratta di progettare il menù di navigazione di un sito web. Di certo un menù attraente e fruibile può notevolmente contribuire a migliorare l’aspetto di un sito. In questo tutorial avrete modo di creare un menù elegante e professionale, attraverso l'utilizzo dei fogli di stile CSS3.

    DEMO    VAI AL SITO

  • CSS3: menu con un effetto transizione

    Sono veramente tantissime le possibilità offerte da CSS3 e con il tutorial di oggi ve ne mostriamo ancora una. L'obiettivo del tutorial è la creazione di un menù con delle scritte in ombra e un magnifico effetto di blur; le voci ovviamente verranno portate in evidenza (in chiaro) al passaggio del mouse.

    DEMO    VAI AL SITO

  • Creare un menu con la tecnica CSS Sprite

    Il seguente tutorial vi guiderà nella realizzazione di un menù facendo uso della tecnica dei CSS sprites. L'obiettivo che ci si propone è quello di creare un menù veloce che non richieda il supporto di Javascript. L'uso dei CSS sprites velocizza i tempi di load della pagina, e ne aumenta la compatibilità su browser differenti.

    DEMO    VAI AL SITO

  • Creare un menu CSS3 con un effetto hover particolare

    In questo tutorial imparerete un veloce e semplice metodo per creare un menù CSS3: aggiungere un'immagine ad ogni oggetto del menù e farla scomparire grazie all'effetto hover. Il tutorial vi accompagnerà per tutto il breve processo spiegandovi step dopo step come procedere.

    DEMO    VAI AL SITO

  • Creare un Menù CSS avanzato usando le proprietà Hover e Position

    Partendo da un file photoshop e finendo con la semantica HTML e CSS creeeremo un menù di navigazione avanzato usando le proprietà: hover e position. Il prodotto finito sarà utilizzabile in molti browser tra cui, Firefox, Safari, IE7 e 8, Opera e Chrome. Per poterlo utilizzare anche su IE6 dovremo implementare un piccolo javascript per sfruttare la mancanza della funzione hover. In 4 step sucessivi il tutorial vi accompagnerà passo passo nella creazione di questo menù.

    DEMO    VAI AL SITO

  • Realizzare un menu animato in CSS3

    In questo breve tutorial, viene utilizzata la potenza degli effetti e delle transizioni CSS3 per costruire un menu di navigazione animato senza JavaScript, che si potrà usare per aggiungere uno stile ricercato alla vostra pagina web o al vostro modello. Vengono usate alcune eccezionali caratteristiche come lo pseudo selettore :target e gli elementi :after.

    DEMO    VAI AL SITO


  • 10 tutorial e soluzioni per una navigazione responsive

    Vista la rapida crescita di popolarità del responsive design, vi vogliamo consigliare varie tecniche e soluzioni adottate per gestire il menu o la navigazione in dispositivi che presentano uno schermo piuttosto piccolo. Progettare e creare un menu per device mobile potrebbe però essere la parte più complicata del vostro responsive layout, non solo per il codice, ma anche a causa della decisione da prendere a proposito di cosa deve restare e cosa no, affinchè tutto riesca a rientrare nel piccolo schermo a disposizione: bisogna insomma destreggiarsi tra la comodità di lettura ed il desiderio di far rientrare nella visuale dello schermo il più possibile.

    VAI AL SITO

  • Creare un box-menu con effetto scorrimento in jQuery e CSS3

    In questo tutorial viene spiegata la creazione di un metodo di navigazione unico, usando riquadri scorrevoli. L'idea è quella di far scivolare una casella con gli elementi del menù e allo stesso tempo far comparire una piccola immagine. Verrà inoltre incluso un sottomenù con ulteriori link ad altri elementi di navigazione. Questo riquadro scivolerà a destra o sinistra, secondo quale elemento del menù si troverà sotto il puntatore del mouse.

    DEMO    VAI AL SITO


  • Barra di navigazione e pulsanti creati in puro CSS3

    La barra di navigazione, i pulsanti e la varietà di effetti come gradiente, ombre e bordi sono stati creati utilizzando esclusivamente CSS3. Come potete vedere nella demo Il risultato è notevole, ma la compatibilità con i vari browser un pò meno; solo Firefox, Chrome e Safari sembrano funzionare correttamente, gli altri vanno testati. Nel caso si volesse utilizzare per qualche lavoro, il consiglio è di avere una soluzione basata su pulsanti realizzati con le immagini per ovviare al problema della compatibilità di quei browser che non supportano pienamente i CSS3.

    DEMO    VAI AL SITO


  • Menù dropdown animato con CSS3

    In questo tutorial apprenderete come realizzare un menù dropdown animato usando caratteristiche del CSS3 come animazioni, trasformazioni e traslazioni. Il tutorial è basato su un precedente menù a scorrimento presentato in un tutorial antecedente a questo; vi verranno forniti come al solito i codici HTML, CSS e jQuery.

    DEMO    VAI AL SITO

  • Creare un menu avanzato in CSS3

    Grazie al CSS3, creare un menù gradevole non richiede più tutto il codice e il tempo di una volta. Questo tutorial spiega come inserire bottoni dall'aspetto accattivante usando soltanto codice CSS3.

    DEMO    VAI AL SITO

  • Creare una barra di navigazione in CSS3

    Tutorial che insegna a creare una barra di navigazione semplice e “pulita” sfruttando solo ed esclusivamente il foglio di stile. Il tutorial, spiegato in maniera accurata, è rivolto ai principianti ed utilizza alcune tecniche di CSS3 che rendono il menu non cross browser.

    DEMO    VAI AL SITO

  • Drop Down Menu in CSS3

    Ancora un tutorial sull'implementazione dei menù per il vostro sito web. Il tutorial che segue vi mostrerà come creare dei menù drop down (ossia a comparsa verso il basso) usando HTML e CSS3, mostrandovi le linee di codice necessarie all'implementazione con la relativa spiegazione.

    VAI AL SITO

  • Drop-Down Menu in CSS3 sfruttando le :target pseudo class

    I CSS3 hanno una profonda influenza sulla comunità web designer, rendendo il lavoro di quest’ultimi più facile e più divertente. Nel tutorial segnalato viene spiegata una funzione CSS3 dal nome :target Pseudo Class. Per sperimentare questa classe è stato sviluppato un big drop-down menu interamente in CSS3 senza immagini o javascript, quindi, totalmente personalizzabile Le CSS pseudo-classi sono utilizzate per aggiungere uno stato o una relazione a un selettore. Una pseudo classe inizia normalmente con i due punti (:) e viene aggiunto un selettore di tipo o selettore universale, senza spazi tra il nome del selettore e la pseudo classe. Alcune pseudo-classi sono esclusive, mentre altre possono essere applicate simultaneamente allo stesso elemento. Le pseudo-classi possono essere dinamiche, nel senso che un elemento può acquisire o perdere una pseudo-classe mentre un utente interagisce con il documento. Quindi, in parole semplici, le pseudo classi sono utili per scegliere un elemento CSS nei suoi vari stati.

    DEMO    VAI AL SITO

  • Menu sviluppato con CSS3 e jQuery

    Il tutorial seguente vi guiderà nella creazione di un menu realizzato in CSS3 e jQuery, un pò diverso dai soliti. La guida e l'insieme dei files HTML, CSS e Javascript (scaricabili gratuitamente) renderà il menu del vostro sito web animato e dinamico, attraverso un effetto di sfondo che, al movimento del mouse sul menu, segnalerà la posizione esatta dell'elemento attivo e cliccabile.

    DEMO    VAI AL SITO

  • Visualizzare articoli correlati in Slide Out Boxes

    La fruibilità di un sito web è una componente importantissima dello sviluppo, molto spesso pagine troppo piene di contenuti rendono difficile la navigazione, ma questo tutorial vi propone una soluzione davvero elegante che, utilizzando JQuery e CSS3, vi mostrerà come implementare una sorta di widget a comparsa che potrete usare ad esempio per mettere a disposizione degli utenti i contenuti correlati alla pagina visualizzata.

    DEMO    VAI AL SITO

  • Ricreare il menù di navigazione del sito Apple usando solo i CSS3

    Al tempo del lancio dell'iPad, Apple cambiò il menù di navigazione del proprio sito web: menù che è ancora attivo oggi. In questo tutorial imparerete come ricreare questo menù utilizzando soltanto CSS3. Questo sarà possibile poiché i bottoni sono creati indipendentemente dalle immagini; abbiate solo l'accortezza di assicurarvi che il vostro browser supporti il CSS3 e in poco tempo avrete un menù identico a quello Apple.

    DEMO    VAI AL SITO

  • Drop Down Menu stile Mac in CSS3

    Guardate la demo per vedere un drop down menu su più livelli in stile Mac creato usando le proprietà box-radius, box-shadow e text-shadow. Viene visualizzato perfettamente da Firefox, Safari e Chrome. Il menù a scomparsa inoltre funziona su browser non compatibili col CSS3 come IE7+, ma gli angoli arrotondati e le ombre non verranno visualizzati.

    DEMO    VAI AL SITO

  • Creare un menu animato e creativo grazie ai CSS3

    In questo tutorial imparerete come creare un menù animato. L'idea di base è di combinare alcuni semplici elementi ed animarli per creare il prodotto finale. Verranno usati un'icona, un titolo e un sottotitolo che verranno poi animati usando soltanto le transizioni e le animazioni CSS.

    DEMO    VAI AL SITO


  • Mega menu a discesa in CSS3

    Spesso usati per siti e-commerce, i mega-menu stanno diventando sempre più popolari, in quanto offrono una soluzione efficace per la visualizzazione di molteplici contenuti pur mantenendo un layout pulito. In questo tutorial è spiegato come creare un drop-down mega menu in CSS3.

    DEMO    VAI AL SITO


ricerca

Usa il motore di ricerca interno per trovare le migliori risorse per web designer.

Social trend
i post piu' menzionati nei social network

Sito mobile: il tuo è compatibile?

Menu in CSS – Collection

Tutorial Photoshop per modificare il colore degli occhi – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection

Tutorial Natalizi Photoshop – Collection

featured
i post consigliati

Pulsanti CSS3 – Collection

Tutorial Natalizi Photoshop – Collection

Azioni Photoshop – Collection

Temi per WordPress – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection