Archivio per la Categoria ‘Xhtml & Css’ Category

Guida HTML5: introduzione

In questo primo articolo della guida dedicata all’HTML5, delineeremo il contesto storico nel quale nasce il linguaggio, differenziando i vari standard, elencando le maggiori novità introdotte e analizzando i principi che regolano l’adozione delle nuove regole.

Questa guida è adatta sia a chi possiede una conoscenza, approssimativa o approfondita che sia, dell’HTML 4.01 o dell’XHTML, sia a chi è completamente a digiuno sull’argomento e vuole iniziare a sviluppare pagine che siano moderne, fluide e al passo con i tempi.

Alcuni termini potranno risultare ostici agli avventori ma, quando le lezioni saranno incentrate sulla pratica, anche la teoria acquisterà il suo naturale e fondamentale senso. Iniziamo! || Leggi altro »

Creare un custom slider con il carousel di Bootstrap

Nel corso di questa guida vedremo come creare uno slider accattivante (qui trovate l'esempio finale) in poco tempo e senza bisogno di acquistare licenze o importare nuovi script e fogli di stile, unico requisito: utilizzare Bootstrap. La guida è basata...

8 commenti

Come sfruttare le animazioni CSS3 per realizzare le skills del tuo sito web

Hai mai realizzato le skills per il tuo sito web? Le skills sono un elemento fondamentale del portfolio di web designer e grafici perché: mettono in evidenza le proprie competenze ed abilità servono a catturare l’attenzione di potenziali clienti. Da qualche...

11 commenti

Sticky Footer: come posizionare il footer in fondo alla pagina?

È da un po’ di tempo che non mi si legge qui sui lidi di Your Inspiration Web, ma eccomi ritornare con un nuovo articolo decisamente utile a tutti i web designer! Vi è mai capitato di aver sviluppato un...

27 commenti

CSS Transition e Transform: come posso utilizzarle?

Nei precedenti articoli abbiamo visto le basi delle CSS Transforms e Transition. Ma come utilizzare questi strumenti? Quali possono essere i possibili campi applicativi? Oggi ti mostrerò tre esempi che sfruttano queste proprietà. (altro…)

7 commenti

Come creare animazioni con le CSS Transitions?

Nell'articolo precedente abbiamo parlato dei CSS3 Transforms, come modo per modificare gli elementi della pagina. Oggi facciamo il primo passo verso la realizzazione di animazioni con CSS3 studiando il primo dei moduli che consentono di animare gli elementi: le CSS...

13 commenti

Pillola CSS: come trasformare gli elementi con CSS3?

Fino a pochi anni fa l'unico modo per aggiungere delle piccole animazioni ai vari elementi di un sito web era quello di utilizzare JavaScript. Con l'introduzione di CSS3 le possibilità sono aumentate, permettendoci di applicare semplici effetti senza utilizzare un...

8 commenti

Come rendere trasparenti gli elementi con CSS3?

La gestione della trasparenza è stata sempre una delle operazioni più noiose del web design, dato che non c'era un modo effettivo di applicarla agli elementi di un sito se non tramite immagini preparate ad hoc (filtri proprietari esclusi). Le...

13 commenti

LESS & CSS: Come velocizzare i tempi di sviluppo?

Il pregio dei fogli di stile di essere semplici può diventare un difetto nel momento in cui vogliamo farne un utilizzo più professionale ed evoluto. Scopriamo insieme Less, uno strumento che ci permette di ovviare a questo problema. (altro…)

20 commenti

L’importanza del markup semantico

“Nel markup, la semantica riguarda il significato di un elemento e come questo elemento descrive il suo contenuto.” Molly E. Holzschlag Oggi voglio parlarti dell'importanza dell'utilizzo della semantica nella redazione di un documento (x)html. Ogni tag è stato progettato allo...

15 commenti

Pillole CSS: progettare un sito con font accessibili

Una scelta comune a molti web designer alle prime armi riguarda l'uso dell'unità di misura pixel nei fogli di stile. Il pixel è un'unità di misura relativa al dispositivo (schermo, palmari, ipad, ecc) che può presentare tuttavia - aldilà della...

31 commenti

Realizzare un megamenu efficace e accattivante: ispirazione, tutorial e risorsa free

Sembrava una tendenza destinata a scomparire in breve tempo, una soluzione efficace solo nei siti di e-commerce, dove si ha la necessità di raggruppare prodotti e categorie in modo schematico e semplice. Invece quella dei mega menu è diventata un...

49 commenti

CSS 3: è il momento giusto per utilizzarli?

CSS 3: è il momento giusto per utilizzarli?

La bozza di codice CSS3 ha suscitato entusiasmo fin dal momento del suo annuncio, vedere poi i primi browser (tutti, tranne IE) che cominciavano a supportare queste fantastiche proprietà, rendendo semplici le cose più rognose da realizzare ha mandato in...

36 commenti

Form accessibile: la validazione e uno sguardo al futuro

Form accessibile: la validazione e uno sguardo al futuro

Eccoci qua, al terzo appuntamento con la realizzazione di un Form accessibile: dopo aver visto il codice (x)HTML ottimizzato per la struttura, i metodi CSS per posizionare gli elementi e per dare "anche all'occhio la sua parte",  oggi daremo "dinamicità"...

14 commenti

Tendenze: ritorna in voga lo stile anni 90

La nostra rubrica sugli stili grafici del web design sta per volgere al termine: lo stile che approfondiremo oggi è infatti l’ultimo della serie. Si tratta di uno stile dall’aria vagamente retrò, che ricalca alcune tendenze estetiche in voga negli...

79 commenti

Form accessibile: come posizionare gli elementi e renderlo attraente?

Form accessibile: come posizionare gli elementi e renderlo attraente?

Ci eravamo lasciati con gran suspance, curiosi di vedere come il nostro brutto anatroccolo, di difficile comprensione, si sarebbe trasformato in uno splendido cigno... e ora sei pronto per seguirmi in questo processo di trasformazione attraverso il codice CSS? (altro…)

14 commenti

Validare il codice è davvero necessario?

Validare il codice. É la mania di chi tende al perfezionismo e scrive il codice con un’accuratezza quasi maniacale quello di vedere il segno di spunta verde che sta ad indicare che il codice della pagina web appena sviluppata ha...

42 commenti

Come realizzare un form accessibile e con codice ottimizzato?

Come realizzare un form accessibile e con codice ottimizzato?

Dopo tanta teoria ed esempi di cosa non fare, oggi finalmente ci sporcheremo le mani con un po' di codice , andando a vedere come realizzare un form accessibile e con codice standard. Nella stragrande maggioranza dei casi infatti, i...

27 commenti

Pillole CSS: come modificare la resa visiva del testo con la proprietà white-space?

Pillole CSS: come modificare la resa visiva del testo con la proprietà white-space?

Uno degli aspetti meno conosciuti dei CSS è quello relativo alla gestione degli spazi bianchi all'interno di un testo. Spesso infatti si ha la necessità di avere un controllo sulla formattazione del testo maggiore rispetto a quella predefinita effettuata dal...

10 commenti