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:

Ereditare vecchi siti per doverli ottimizzare e ripulire nel loro codice, può significare a volte scontrarsi con un'intricata giungla di stili inline aggiunti tramite editor WYSIWYG. Il tool online ExtractCSS può essere utile per raggruppare tutte le dichiarazioni CSS trovate nel codice HTML e raggrupparle in un unico blocco, pronto all'esportazione. (more...)

Continua a leggere Rimuovere i CSS inline con ExtractCSS

Categoria: CSS