Sono passati ormai più di 20 anni da quando Håkon Wium Lie, CTO di Opera Browser, pubblicò la bozza intitolata "Cascading HTML style sheets -- a proposal"; quello comparso sul sito Web del W3C il 10 ottobre 1994 era in pratica un documento in cui veniva descritto un primo schema dei fogli di stile applicabili alle pagine HTML, un pattern sulla base del quale proprietà come font family e window size potevano essere definite tramite apposite regole riguardanti la presentazione degli elementi di markup. (more...)

Continua a leggere 20 anni di CSS

Categoria: CSS

Tags:

Grid.css è un piccolo framework CSS utile per la creazione di un layout responsive a sei colonne. Per il suo funzionamento si avvale dei selettori di attributo in CSS e risulta compatibile con i browser più moderni (Chrome, Safari, Firefox, Opera, Explorer 9); inoltre, con l'aiuto di un fallback (per esempio Respond.js), potrà essere utilizzato anche con Explorer 8. La caratteristica principale di questo framework è la possibilità di scegliere come un elemento dovrà adattarsi (in maniera responsive) al display; infatti utilizzando l'attributo "data-grid" all'interno di un DIV è possibile scegliere se gli elementi posti sulla stessa riga devono occupare il minimo spazio disponibile restando allineati (data-grid="overflow") oppure andare a capo e occupare orizzontalmente l'intero display (data-grid="collapse"). Nel sito ufficiale è possibile provare (riducendo le dimensioni della finestra del browser) la comodità e la semplicità d'uso di questo framework. Fonte: Grid.css

Continua a leggere Grid.css: un piccolo framework responsive

Categoria: CSS

Analizzare un elemento che contiene un gradiente in CSS3, grazie agli strumenti per sviluppatore di Google Chrome, è un'operazione molto semplice. Ma se la nostra necessità è di ispezionare più sfumature che compongono un elemento, allora CSS Gradient Inspector può aiutarci. CSS Gradient Inspector aggiunge, tra gli strumenti per sviluppatore, la sidebar Gradient Inspector che mostrerà separatamente tutti i gradienti che compongono l'elemento in analisi. L'unico neo della versione attuale (0.1.2) è l'impossibilità di modificare i parametri che compongono l'elemento ispezionato. L'estensione può essere scaricata, sempre gratuitamente, dal Chrome Web Store: https://chrome.google.com/webstore/detail/css-gradient-inspector/blklpjonlhpakchaahdnkcjkfmccmdik

Continua a leggere Gradienti: ispezionarli con CSS Gradient Inspector

Categoria: CSS

Tags:

CSS Shapes Editor è un'estensione di Chrome che consente di modellare le forme delle CSS Shapes in tempo reale. (more...)

Continua a leggere CSS Shapes: un editor interattivo per Chrome

Categoria: CSS

Tags: ,

A volte alcune sezioni del nostro sito hanno bisogno di un menu di navigazione a supporto che non tolga però spazio e visibilità ai contenuti. Può essere quindi utile un menu a scomparsa, da richiamare solo nel momento del bisogno. Ciò che si può arricchire, con l'ausilio delle proprietà di animazione CSS3 e un pizzico di JavaScript, è l'effetto visivo per rendere gradevole e moderna l'interazione. (more...)

Continua a leggere Sidebar a comparsa creativa con JavaScript e CSS3

Categoria: CSS

Tags: ,

Dopo aver segnalato il pratico e veloce CSS3 Animation per creare animazioni, ecco un altro tool online CSS molto comodo: Enjoy CSS. Questa piattaforma, ancora in fase di evoluzione (è in versione alpha!), permette di formattare oggetti tipici della User Interface (campi input, elementi blocco d qualunque genere, pulsanti) sfruttando tutte le recenti proprietà CSS3 e combinandole tramite un set visuale di comandi. (more...)

Continua a leggere Enjoy CSS: generatore online per UI

Categoria: CSS

Tags:

La tecnica dell'Image Replacement è stata molto utile nell'ultimo decennio, per ovviare alla problematica SEO di non riuscire a fornire agli spider sufficiente testo importante a scapito di immagini per mostrare logo, payoff e simili. Le varie soluzioni adottate dal 2003 ad oggi sono racchiuse in questa sorta di "Museo dell'image replacement", con una (quasi) nostalgica carrellata di evoluzioni. (more...)

Continua a leggere Evoluzioni dell’Image Replacement

Categoria: CSS

Alzi la mano chi, vedendo questo strumento, non penserà immediatamente ad un certo Flash, responsabile principale di tante animazioni di fine secolo: il tool online "CSS3 Keyframes Animation Generator" ricorda nelle intenzioni il software di casa Adobe. La funzione di questo tool è di facilitare la creazione di effetti di animazione senza usare Javascript. A differenza di Flash non avremo alcun file proprietario, con relativo player, ma solo un set di righe CSS da copiare ed utilizzare. (more...)

Continua a leggere Generatore di CSS3 Animation

Categoria: CSS

Tags:

Sul forum di HTML.it è stato lanciato un concorso a tema olimpico: disegnare la bandiera dei giochi usando soltanto i CSS. Il markup su cui lavorare è il seguente: <body> <h1>Stemma olimpico</h1> <ul> <li>Azzurro</li> <li>Giallo</li> <li>Nero</li> <li>Verde</li> <li>Rosso</li> </ul> </body> (more...)

Continua a leggere Olimpiadi in CSS: chi è il più bravo a disegnare la bandiera dei giochi?

Categoria: CSS

Una volta c'era la Pixel Art, oggi è tutto un proliferare di creatività targata CSS: grazie al supporto sempre più diffuso delle proprietà CSS3 di animazione e trasformazione, possiamo assistere a delle piccole opere d'arte in quanto a creatività ed impatto. Codici non sempre usabili e proponibili nel quotidiano, ma ottimi spunti per capire a fondo certe potenzialità (un po' come fece CSS Zen Garden una quindicina d'anni fa...). Ecco una lista di 10 esempi di CSS Art, qualcuno recente e qualcuno probabilmente già visto: (more...)

Continua a leggere 10 esempi di CSS Art

Categoria: CSS

Tags: