Articoli Taggati ‘CSS’

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.

|| Leggi altro »

Pillole CSS: progettare un sito con font accessibili

fontaccessibili1

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

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

CSS: come utilizzare la proprietà z-index?

jqueryphp1

Un paio di settimane addietro abbiamo analizzato l’utilizzo delle proprietà CSS relative al posizionamento degli elementi all’interno di un documento. Nel dettaglio abbiamo visto come si utilizza il posizionamento assoluto e come opera il posizionamento fisso. In quest’ultimo articolo abbiamo...

12 commenti

Position fixed: come funziona e come si utilizza il posizionamento fisso?

position-fixed

Qualche settimana addietro abbiamo visto nel dettaglio l’utilizzo del posizionamento assoluto di un elemento all’interno di una pagina web mediante l’uso della proprietà “position” fornita dai CSS. Nell’articolo di oggi vedremo com’è possibile attraverso l’utilizzo della stessa proprietà - assegnandole...

27 commenti

Pillole CSS: che cos’è il box model e come sfruttarlo per i nostri layout?

pillole.css1

Negli ultimi due articoli abbiamo visto come strutturare un layout fisso a due e tre colonne utilizzando i float opposti, e abbiamo costruito una piccola pagina di esempio. Il risultato era accettabile, ma risultava un po' troppo "attaccato": ogni elemento...

14 commenti

Pillola CSS: come realizzare un layout fisso a tre colonne?

pillole.css

Nella pillola della scorsa settimana abbiamo visto come realizzare un layout fisso a due colonne. Sono sempre più diffusi però - complice l'aumento esponenziale della risoluzione dei monitor - i layout a tre colonne. Come fare dunque per aggiungere un'ulteriore...

15 commenti

CSS: come utilizzare la proprietà position absolute?

position

Il posizionamento degli elementi è uno degli argomenti più ostici riguardanti i CSS. Nell’articolo di oggi vedremo l’utilizzo della proprietà “position” la quale permette di posizionare un elemento all’interno della nostra pagina web sottraendolo dal normale flusso del documento. Nel...

27 commenti

Pillole CSS: come realizzare un layout fisso a due colonne?

pillole.css

Con l'introduzione dei framework CSS come 960gs, o Blueprint, realizzare layout con CSS è diventato davvero semplice. L'unica pecca che affligge questi framework è anche il loro punto di forza: nascondere le implementazioni all'utente, permettendo di realizzare layout complessi utilizzando...

12 commenti

Come utilizzare font non standard su un sito web?

css

Ogni nuova scoperta nell'ambito del web design, già dalla sua nascita deve confrontarsi con un ostacolo spesso duro da sormontare: la compatibilità con Internet Explorer. Emblematici sono gli esempi di ombreggiature, o angoli arrotondati: sono facilmente ottenibili tramite moduli del...

33 commenti

Pillole CSS: come centrare un elemento?

oreste

Spesso durante lo sviluppo di siti web, ci troviamo a dover risolvere tanti piccoli problemi la cui soluzione, per quanto semplice, può richiedere molto tempo in termini di ricerca e implementazione. Per questo ho pensato di inaugurare una nuova rubrica,...

9 commenti

CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si?

css3

I CSS (Cascading Style Sheet) hanno rivoluzionato il modo di approcciare alla programmazione web: non solo permettono di poter applicare al nostro sito una grafica accattivante, ma, tramite i suoi selettori, può essere oggetto di modifiche tramite javascript. Dal 1996 (anno...

19 commenti

Come realizzare un foglio di stile efficace per la stampa?

Come realizzare un foglio di stile efficace per la stampa?

Ti sarà capitato spesso di leggere un articolo interessante navigando sul web ma, per un motivo o l'altro, doverti allontanare dal pc. Un modo per continuare la lettura è quello di stampare l'articolo in questione. Anche se oggi le persone...

11 commenti

Come aumentare le performance del mio sito? – CSS Sprites

Come aumentare le performance del mio sito? – CSS Sprites

Hai creato un sito, magari seguendo la nostra guida "Come creare un sito web dalla A alla Z", ma noti che spesso i tempi di caricamento sono lunghissimi. I motivi alla base di questo comportamento possono essere molteplici, ma ci...

30 commenti

Web design elements: i form (design)

Web design elements: i form (design)

Nella scorsa lezione, abbiamo visto quali sono gli elementi principali che compongono i form, e quali sono i loro principali attributi. In questa lezione vedremo come strutturare i form con XHTML, come applicare degli stili di base e quali sono...

20 commenti

Dall’HTML al jQuery: come mostrare/nascondere dei box in una pagina web?

Dall’HTML al jQuery: come mostrare/nascondere dei box in una pagina web?

Prendendo spunto dalla richiesta di un lettore ho pensato di realizzare questo esempio per mostrare il processo di creazione di una sezione di un sito, dalla struttura HTML fino all'integrazione di jQuery. Vediamo quindi in questo articolo come realizzare una...

19 commenti

Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 2

Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 2

Sei pronto per "ricostruire" la seconda parte del puzzle? Nella lezione precedente abbiamo visto come realizzare in codice la struttura generale del nostro sito. Adesso continuiamo con il processo di "ricostruzione" e vediamo come mettere in codice i vari contenuti...

19 commenti

E tu utilizzi tutti i selettori CSS disponibili?

E tu utilizzi tutti i selettori CSS disponibili?

Come conclusione della serie di articoli sui selettori CSS, ho voluto prendere degli esempi non banali dal "mondo reale" e mostrarti come gli sviluppatori utilizzano combinazioni di selettori per realizzare i loro lavori. Devo dire che questa ricerca non è...

9 commenti

Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 1

Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 1

Il nostro compito in questa lezione sarà di dissezionare e in seguito di ricomporre il sito come in un puzzle della Clementoni, utilizzando i fogli di stile e l’(x)html. È una delle parti più appassionanti del lavoro perché ti permette...

48 commenti