Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[Web Design]

Popup in jQuery – Finestra Modale Attiva Alla Pressione di un Anchor

Questo semplicissimo plugin jQuery consente di ancorare ad una semplicissima scritta (con tag html <a>) una finestra pop-up che fuoriesce all’utente mediante un effetto fade.

Il plugin può essere interamente modificato mediante il codice in jQuery allegato e i fogli di stile CSS3. Infatti, sono compresi anche effetti come ombre e bordi arrotondati.

Quando si effettua il link al popup è possibile definire la grandezza di esso. “#?w=500” visualizzerà un pop-up di 500 px di larghezza.

Link


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[Web Design]

Plugin in jQuery: Carosello di contenuti (immagini e html)

bxCarousel è un semplicissimo plugin in jQuery pronto da implementare nelle nostre pagine web.

Lascia scorrere – come da titolo – dei contenuti all’interno di una lista <ul> di elementi.

È possibile implementare dei pulsanti di scorrimento prev e next mediante l’uso dei CSS3, può essere impostato lo scorrimento automatico con loop infinito, la velocità e la direzione dello scorrimento.


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

Generatore di CSS3 on-line: CSS3Maker!

Oggi vi presentiamo CSS3Maker come dice il nome ci permette di creare i nostri stili CSS3 direttamente online graficamente senza saper scrivere una riga di codice.

In alto abbiamo le varie sezioni, a sinistra modifichiamo i parametri al centro vediamo la nostra modifica in tempo reale, e a destra otteniamo il codice da copiare, oppure se preferire, ci permette di scaricare un file .html di prova con il codice appena fatto.

Ottimo tool per web design o aspiranti tali che vogliono cimentarsi nei CSS3. Ricordiamo che il gli stili CSS3 non sono ancora raccomandati dal W3C e non sono supportati da tutti i browser, ma è solo questione di tempo prima che diventino ufficiali, e questo strumento ci può tornare molto utile per iniziare qualche piccola sperimentazione 😉


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[Web Design]

Come creare un sito portfolio elegante?

Ho trovato questo post che è un tutorial che vi consentirà di costruire un elegante sito portafoglio di design.
Seguite passo passo le indicazioni di Line25 che con HTML e CSS vi permetterà di costruire un buon sito web.
Buon lavoro.

Via: http://line25.com


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News]

Boxtuffs : Un sito di risorse in HTML5 e CSS3 !

Boxtuffs è un sito che mette regolarmente in condivisione risorse originali e gratuite create con HTML5 e CSS3, costruiti da Salvador Lopez Mendoza, talento del designer. Il sito comprende una casella di ricerca di auto-crescita, un interruttore on / off, un pulsante per il download e molto altro, ma tutti con un twist. E, una cosa importante circa le risorse è che ogni download viene fornito con il file sorgente PSD . Ecco il link


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

How to: abilitare css3 in internet explorer con un file HTC

PIE (Progressive Internet Explorer) è un “attached behavior file” (.htc) che abilita le proprietà del css3 anche in Internet Explorer 6,7 e 8.

Non c’è quasi nessuna differenza nel codice CSS da inserire e non va specificato nessun nome antecedente alla proprietà che identifica il browser (es. webkit, moz ecc…).

È semplicemente un file .htc che va allegato nel file css come behavior. Esso aggiunge il supporto per queste funzioni: border-radius; box-shadow; border-image; multiple background images; linear-gradient as background image.

Link


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

Plugin jQuery per abilitare l’api CSS Transform anche in IE 6 e 7

Questo leggerissimo plugin in jQuery (5kb) abilità la funzione Transform di CSS3 anche in Internet Explorer 6 e 7.

Dopo aver caricato questo script, esso abiliterà le funzioni rotate, scale (scaleX e ScaleY), skew (skewX e skewY) e matrix.

Negli altri browsers non ha alcun effetto e funziona senza disturbi.


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

HTML5 Starter Pack: Free HTML5-CSS3 templates

Ormai la compatibilità degli standard Internet si estende senza molti problemi a tutti i browser. Oppure, attraverso degli script, riusciamo a rendere compatibili anche quei browser che non lo sono.

Premesso questo concetto di compatibilità, oggi voglio proporvi dei template completamente gratuiti e pronti da utilizzare.

HTML5 Starter Kit consente di costruire un sito con diverse specifiche grafiche, in quanto, i tag che mette a disposizione, possono essere personalizzati e posizionati seguendo i propri gusti.

È cross-browser e il kit comprende i layouts in file psd.


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

Stack Menu in Apple Style con jQuery! Free Resources

jStackMenu è un widget per migliorare l’User Interface Experience: trasforma i contenuti di qualsiasi elemento (children) in un menu stack. Proprio in stile Apple.

È possibile configurare le animazioni, quando e come si aprono, la direzione, la grandezza dell’arco ed il tempo che impiega ad aprirsi. Utilizza il CSS3 per la creazione dell’arco e, per i browser che non supportano questa nuova specifica, adatterà il menù ad un’elencazione statica.

Link | Demo


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[News Web Design]

HTML5 e CSS3: Controlla le Compatibilità in Questa Tabella


FindMeByIp.com ha pubblicato un’interessantissima tabella che mostra le compatibilità, per tutte le proprietà del nuovo standard CSS3 e HTML5, dei diversi browsers in circolazione.

La tabella include: proprietà CSS3, selettori CSS3, applicazioni web in HTML5 (local storage, geolocation, etc.), contenuti embedded in HTML5 (canvas, audio, video, etc.)…

Quindi, non vi resta altro che controllare di essere al passo degli standard e del pieno supporto da parte del browser scelto! (sperando in un appiattimento futuro, in modo da raggiungere uno standard comune, anche se, questo desiderio, sembra essere un’utopia!)


Consigliato da @imaginepaolo
Scritto da imaginepaolo
Suggerisci Modifiche

[Web Design]

Generatore di Regole CSS3 Adatte a Ogni Browser

Questa pagina web che vi propongo è utile a determinare i diversi prefissi, per ogni browser web, per applicare le nuove regole CSS3: border-radius, box-shadow, linear-gradients, rotation, font-face. Esempio: -moz-border-radius (per Firefox) e -webkit-border-radius (per Safari e Chrome).

Ci sono anche alcuni filtri per poter adattare queste funzionalità a Internet Explorer.

Un esempio di ombreggiatura, fatta attraverso la regola box-shadow, la potete osservare sotto le immagini di questo sito: Asa Distribuzione

Buon lavoro, CSS3 Please!!!