Il Grid Layout di CSS è un layout model che consente di tenere sotto controllo la dimensione e il posizionamento di elementi box così come del loro contenuto; tecnicamente Grid Layout si differenzia da Flexible Box Layout (o più semplicemente FlexBox) perché quest'ultimo è orientato su un singolo asse, mentre il primo è stato concepito per layout bidimensionali e tutti gli allineamenti tengono conto di entrambe le dimensioni. (more...)

Continua a leggere CSS: Grid Layout in alternativa a FlexBox

Categoria: Web Standards

FLA (Flex Layout Attribute) è un layout helper, si tratta sostanzialmente di una soluzione basata sulle specifiche CSS flexbox e concepita per disporre velocemente di shorthand flexbox tramite due attributi HTML: layout e self. Il progetto consente di effettuare rapide operazioni di prototipazione, per utilizzarlo è infatti sufficiente un browser Web, senza la necessità di ricorrere a codice CSS addizionale. (more...)

Continua a leggere FLA: un HTML helper per CSS3 flexbox

Categoria: CSS

Tags: ,

MProgress.js è un piccolo progetto disponibile su GitHub utile a visualizzare un indicatore di progresso (progress bar) in stile Material, vale a dire il design per l'interfaccia utente introdotto da Google a partire da Android 5.0 “Lollipop”. (more...)

Continua a leggere MProgress.js, progress bar in stile Android (5.0)

Categoria: Scripting

Motherplate è un piccolo framework per i Web designer che desiderano realizzare layout responsive partendo da una struttura a 12 colonne. (more...)

Continua a leggere Motherplate: un template CSS3 leggero e responsive

Categoria: Web Design

Tags: ,

TimeSheet.js è una semplice libreria JavaScript utile per visualizzare delle attività o degli eventi estesi nel tempo, per esempio uno schedulatore di lavori o, addirittura, un diagramma di Gantt. Con poche righe di codice e senza dover includere librerire esterne come JQuery o AngularJS, è possibile generare una TimeSheet in HTML5 graficamente personalizzabile tramite CSS3. Se, per esempio, vogliamo visualizzare una timesheet delle auto restaurate negli ultimi 5 anni dalla nostra (ipotetica) officina, il codice JavaScript sarà il seguente: new Timesheet('garage-timesheet', 2009, 2014, [ ['08/2009', '06/2011', 'Lancia Stratos'], ['04/2010', '05/2013', 'Fiat 600 Multipla', ['06/2010', '04/2013', 'Volvo P1800'], ['09/2012', '09/2014', 'Volkswagen T2 Deluxe'] ]); La libreria è scaricabile dal repository ufficiale: https://github.com/semu/timesheet.js

Continua a leggere TimeSheet.js: una libreria per visualizzare attività ed eventi

Categoria: Scripting

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: ,

Nata da una comunità insoddisfatta dall’utilizzo delle classiche librerie per grafici statistici, Chartist.js ha tra i suoi punti di forza un design responsive e un alto tasso di personalizzazione. Inoltre, utilizzando le Animazioni CSS3, sarà possibile animare grafici a torta (Pie chart), a ciambella (Donuts chart), istogrammi (Column chart), ortogrammi (Bar chart) e aerogrammi (Area chart). (more...)

Continua a leggere Chartist.js: un’alternativa responsive a Google Charts

Categoria: Scripting

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: ,