Oggi Zoomart Magazine compie un anno!

Per festeggiare raccogliamo una selezione dei migliori 5 articoli del blog, riguardando insieme foto, idee e suggerimenti proposti durante l’anno.

• 
  Lost Wonderland, raccolta fotografica di Paolo Terlizzi, fotografo di talento della penisola Sorrentina. Leggi l’articolo…
• 
  Vedi Napoli e poi…visita questa bellissima città!, un viaggio a Napoli attraverso 25 bellissime fotografie, che mostrano persone, posti e costumi, offrendo un assaggio di cultura, passione e tradizioni. Leggi l’articolo…
• 
  Lego Photography: Mike Stimpson riproduce celebri immagini facendo posare i classici pupazzetti della Lego. Leggi l’articolo…
• 
  “IABO OR DIE”, uno sguardo alle opere di IABO, artista che è riuscito, con grande personalità e talento, ad emergere ed affermarsi a Napoli, dove ancora in pochi hanno osato allontanarsi dagli schemi dell’arte convenzionale. Leggi l’articolo…
• 
  CSS3 Showcase: un’interessante raccolta di articoli sulle nuove tendenze e funzionalità CSS3. Leggi l’articolo…

Negli articoli precedenti (e continueremo di tanto in tanto nei successivi) sono state esposte alcune delle funzionalità CSS3 che consideriamo veramente interessanti. Lo scopo di questo articolo è quello di raccogliere i vari argomenti trattati in una sorta di indice, in continuo aggiornamento, che permetta una facile consultazione dei contenuti trattati… un articolo da aggiungere ai preferiti!

Ecco di cosa abbiamo già parlato e di cosa molto probabilmente parleremo:

Bordi

• border-color
• border-image
• border-radius
• box-shadow

Sfondi

• background-origin and background-clip
• background-size
• multiple backgrounds

Colori

• HSL colors
• HSLA colors
• opacity
• RGBA colors

Effetti di testo

• text-shadow
• text-overflow
• word-wrap

User-interface

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

Selettori

• attribute selectors

Box Model

• overflow-x, overflow-y

Ulteriori moduli

• media queries
• multi-column layout
• Web fonts
• speech

CSS3 offre una nuova proprietà, chiamata box-sizing, in grado di cambiare il modo in cui il browser determina la larghezza di un elemento. Il valore di default è content-box, che fa in modo che altezza e larghezza vengano calcolate come specificato da CSS2.1, ovvero aggiungendo lo spessore del bordo ed il valore del padding alle dimensioni del contenitore. Cambiando questo valore con border-box, si forza il browser a generare un contenitore con altezza e larghezza fissate, e ad aggiungere lo spessore del bordo ed il valore del padding all’interno del contenitore.
Ecco un esempio:

I due contenitori dovrebbero apparire affiancati ed occupare il 50% della larghezza del box (rosso) in cui si trovano (bordi inclusi). Se invece si trovano uno sull’altro vuol dire che il browser che si sta utilizzando non supporta la proprietà box-sizing; per coloro che non visualizzano in modo corretto l’esempio, ecco uno screenshot del risultato:


Il codice CSS utilizzato è il seguente:

CSS3 elimina la necessità di utilizzare Photoshop per aggiungere semplici ombre al testo.
La proprietà text-shadow si utilizza in questo modo:

Con questo risultato:

Ed ecco un risultato dell’effetto nel caso il browser non lo visualizzasse correttamente: