Tutorial CSS

CSS3

I loader o spinner sono ormai irrinunciabili e per realizzarli esistono diversi modi. In questo articolo vedremo come costruire ed animare un loader in puro CSS, senza neppure una riga di javascript.

Tutorial CSS

CSS3

I form sono una parte fondamentale dell'interazione tra utente e applicazione web. Per questa ragione è fondamentale personalizzarne l'aspetto al meglio. Per questo abbiamo deciso di scrivere alcuni piccoli articoli che ci augriamo possando essre d'aiuto nella customizzazione dei form. Il primo aricolo riguarda i placeholders, un elemento abbastanza ostico da elaborare per chi è alle prime armi dell'uso del CSS.

Tutorial CSS

In questo articolo vedremo come approcciare una tecnica di scrittura CSS denominata Objective CSS. Questa tecnica consiste nell'approcciare il CSS come se si trattasse di un vero e proprio linguaggio ad oggetti, quando in realtà così non è. Vediamo quindi come realizzare dei semplici bottoni.

Tutorial CSS

Molto spesso, soprattutto quando si è alle prime esperienze in CSS, si scopre che quando vengono inseriti degli elementi flottati all'interno di un elemento, questo "perde" la sua capacità di adattare automaticamente (senza che questa venga espressa) la propria altezza in base al contenuto. Ciò che succede è che gli elementi flottati "estendono" il float anche al div parent con un conseguente disallineamento del layout che si sta costruendo. La soluzione più ovvia ma sbagliata, è quella di applicare la proprietà overflow:auto al div parent, al fine di farlo estendere tanto da contenere i suoi elementi child. Vediamo invece come eliminare questo inconveniente attraverso CSS.

Tutorial CSS
CSS

Durante lo sviluppo di un sito web spesso ci si trova davanti alla necessità di assegnare in maniera fluida un’altezza di valore 100% ad un div senza però conoscere la reale altezza della device che visualizzerà il prodotto che si sta realizzando. Questo potrebbe in alcuni casi dare problemi allo sviluppatore in quanto, a differenza della larghezza, le regole CSS non permettono di assegnare il valore 100% alle altezze. Per risolvere questo problema potremmo ricorrere ad un piccolo script JS ma è possibile ottenere lo stesso risultato anche soltanto attraverso del semplice CSS.

Tutorial CSS
CSS

Capita a volte di voler inserire in un div una trasparenza ed accorgersi che senza alcuni dovuti accorgimenti, questa proprietà si trasmetterà a tutti gli elementi child contenuti all'interno di quel div. In questo articolo spiegheremo come ovviare a tale problema. Il metodo comunemente usato per inserire una trasparenza è attraverso la proprietà opacity e un filter per il noiosissimo MS Explorer.

Tutorial CSS
CSS

CSS

In questo articolo vi mostro il modo di inserire un testo in verticale. Questo metodo in sintesi è adatto a "ruotare" come si vuole un qualsiasi div.
Essendo questo un sistema che può essere utilizzato sui soli elementi BLOCK per ruotare del testo è necessario prendere qualche precauzione.

Tutorial CSS
CSS Buttons

In questo secondo tutorial, ho realizzato 5 tipi di web buttons servendomi solo del CSS, niente immagini quindi! Tutto ciò che dovrete fare è copiare il codice da me realizzato nel vostro foglio di stile e, se vi occorre, cambiare i vari parametri, come il font, i colori ecc. Ecco un esempio concreto dei bottoni e sotto  il relativo stamp.

Joomla SEF URLs by Artio