Articoli Taggati ‘css3’

Guida CSS3: i font – parte prima

Bentrovato a questo nuovo appuntamento con la guida CSS3!

Quest’oggi affronteremo un tema fondamentale: l’utilizzo di font, predefiniti e personalizzati.

Nonostante sul web ci sia ormai un grand’utilizzo di materiale visivo — immagini, video, animazioni, etc. — il ruolo ricoperto dalle informazioni, quindi dal testo, è fondamentale. È produttivo, quindi, dedicare del tempo a formattare le varie parti testuali — paragrafi, titoli, etc. — in modo da catturare l’attenzione del nostro utente.
|| Leggi altro »

Guida CSS3: ereditarietà

Bentrovato ad un nuovo appuntamento con la guida CSS3! Nel corso di questo articolo ci soffermeremo su un aspetto fondamentale che condiziona l’intero flusso di lavoro con il CSS: l’ereditarietà. (altro…)

2 commenti

Guida CSS3: pseudo classi e pseudo elementi

Bentrovato a questo nuovo articolo della guida CSS3! Come preannunciato nel capitolo precedente, quest’oggi ci occuperemo di pseudo classi e pseudo elementi. Ti sarà capitato spesso di voler applicare uno stile a degli elementi non proprio ben identificabili del tuo...

6 commenti

Guida CSS3: introduzione e selettori

Introduzione e selettori

Benvenuto! Quest’oggi inauguriamo un nuovo filone di articoli che andrà, progressivamente, a formare un’esaustiva guida ai CSS3. Poiché in passato le pagine virtuali di Your Inspiration hanno ospitato la mia guida all’HTML5, mi è sembrato naturale tentar di completare il...

4 commenti

CSS3: COME ANIMARE LE TUE IMMAGINI

Il tutorial di oggi è davvero semplice e nello stesso tempo molto efficace: vedremo insieme come creare una semplice animazione che permetta di rendere dinamiche le nostre immagini, inserendo effetti zoom e una o più didascalie su di esse. è...

10 commenti

Come creare tasti “a porta” usando solo CSS3

Continuiamo con la serie di articoli realizzati per mostrare il potenziale di CSS, senza usare il tanto amato e odiato Javascript. Oggi vediamo come creare dei tasti che possiedano un'animazione simile all'apertura di una porta (o di una finestra, dipende...

3 commenti

Creare gallerie thumbnail accattivanti con effetti hover CSS3

In questo tutorial vediamo come creare alcuni effetti hover sulle gallerie immagini in miniatura o cosiddette thumbnail. Lo scopo è sia quello di rendere accattivante la galleria che quello di aumentare l'interattività dell’utente che al passaggio del mouse riesce a...

9 commenti

Accordion: creiamolo usando CSS3

Partiamo subito da una premessa: esistono plugin creati apposta per realizzare accordion. Javascript la fa da padrona in questo senso e, nel caso più specifico, Jquery UI. Quando si usa Javascript possono insorgere sempre gli stessi problemi, da quelli più...

7 commenti

I tooltips nel web design: a cosa servono e come si utilizzano

Oggi voglio parlarvi dei tooltips, ovvero le finestre pop up che si aprono nel momento in cui posizioniamo il mouse su un’immagine o su un testo. Letteralmente, i tooltip o hint o infotip , sono degli elementi grafici che si...

7 commenti

HTML5 Mobile app: transizioni ed animazioni CSS3: parte1

Sicuramente avrai già sentito parlare di applicazioni mobile create completamente in HTML5, CSS3 e Javascript, o magari abbinando questi tipi di linguaggi con quelli nativi, come nelle applicazioni "ibride". Forse potrebbe interessarti l’ottimo post di Smashing Magazine sulle applicazioni ibride:...

14 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...

12 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...

14 commenti

Tendenze: il nuovo web design retrò e lo “stile CSS3”

Sul web impazzano la CSS3 e l’HTML5 mania, e questa non è una novità. I web designer di tutto il mondo si sbizzarriscono con animazioni –dalla dubbia utilità ma, dobbiamo ammetterlo, certamente estrose – sperimentano ombre e rotondità e si...

36 commenti

CSS3: Come implementare alcuni moduli anche su Internet Explorer?

Nello scorso articolo abbiamo avuto modo di approfondire un modulo CSS avanzato come il @font-face che, tra le varie caratteristiche positive, aveva soprattutto la piena compatibilità con Internet Explorer. @font-face però è un modulo del CSS 2.1. Come si comporta...

5 commenti