La mia recente attività di restyling del layout di questo blog, aveva evidenziato la necessità di organizzare l’elenco degli ultimi articoli pubblicati in home page, secondo una struttura più compatta. Per non appesantire eccessivamente la lista, che comprende anche una breve sintesi del contenuto di ogni articolo, era necessario allegare anche una piccola immagine, opportunamente dimensionata in relazione ai nuovi ingombri disponibili.

WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

Parlare di Firebug è ormai inutile, lo conoscono tutti. E’ invece di qualche giorno fa (esattamente il 4 febbraio) la notizia della versione 1.3 Lite di Firebug per Chrome. La versione Lite consente agilmente di fare debugging del codice css e html della pagina web (ma non di quello Javascript) ma senza poter intervenire direttamente e modificarla al volo.

Ieri mi sono dilettato nella realizzazione di una toolbar di servizio per il software CMS a cui sto lavorando da oltre un anno. Alcuni anni fa, lavorando con Symfony, avevo trovato geniale l'idea degli sviluppatori di arricchire il framework di una debug toolbar che aiutasse il webmaster nella realizzazione e nel troubleshooting del sito stesso. Ecco un'immagine di questa toolbar presa direttamente dal sito ufficiale di Symfony.

In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills. Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. There is an interesting article on CreativityDen about the fundamental ways of adding depth in web design works; it explains six basic techniques to simulate the 3D perception in our works and I suggest an attentive reading.

Anche questa settimana vi propongo un po' di liste di link da guardare nel weekend, se vostra moglie non è in casa, se è in casa ma vi lascia in pace o se è in casa non vi lascia in pace, ma voi avete deciso che queste serie di link che vi propongo da due settimane a questa parte sono imperdebili. Anche questa settimana le risorse superano quota 1000. Non fate indigestione. :D

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

Appurato che certe metodologie di design funzionano bene solo per certi siti, ho deciso di disegnare un nuovo layout. Nelle ore serali, così, in appena tre giorni, ho buttato giù un wireframe, ho scaricato uno sfondo in stile wood, scelto la palette dei colori, studiato le novità di WordPress 2.9 ed ecco il risultato.

In the last few years, web design has improved significantly. There are so many tutorials out there to increase the skills capacity web designers and web developers. Some popular browsers such as Firefox, Safari already supported some CSS3 properties, and now the designer has many CSS3 properties. Today, I will share some tutorials, tips and tricks about CSS3.

As we move forward with the Web and browsers become capable of rendering more advanced code, we gradually get closer to the goal of universal standards across all platforms and computers. Not only will we have to spend less time making sure our box model looks right in IE6, but we create an atmosphere ripe for innovation and free of hacks and heavy front-end scripting. The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. If we collectively want to be able to have rounded corners, we make it happen. If we want to have multiple background images, we make it happen. If we want border images, we make that happen, too. So desire is not the issue. If it was, we would all still be using tables to lay out our pages and using heavy over-the-top code. We all know that anything can be done on the Web.