it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Rough.js rende grafica disegnata a mano con tela e SVG

È incredibile vedere quanto il Web sia arrivato con elementi dinamici come gli SVG nel browser . Puoi progettare qualsiasi cosa, dalle animazioni personalizzate ai giochi HTML5 con le librerie giuste.

Una delle più recenti librerie che valga la pena provare è Rough.js . È uno script di generazione grafica gratuito attualmente in beta che funziona su elementi canvas e SVG .

È possibile creare icone personalizzate, grafici a barre, praticamente tutto ciò che si desidera tutto in codice. E il risultato finale assume una splendida sensazione disegnata a mano .

Al momento della stesura di questo, Rough.js è ancora in v0.1 beta, quindi potrebbe non essere pronto per un sito di produzione dal vivo . Ma è una prova che gli standard web stanno progredendo velocemente e stiamo entrando in un'epoca in cui questo tipo di cose è possibile.

Prendi ad esempio questa barra di avanzamento generata attraverso Rough.js. Se fai clic sul pulsante "Start" noterai che esegue un'animazione personalizzata che sembra davvero disegnata a mano . Usa le linee SVG con pattern predefiniti per creare un effetto traballante che sembra davvero naturale.

Nella pagina principale di GitHub, troverai una sezione che elenca molti esempi di Rough.js in azione .

Tutti questi sono dotati di esempi di codice e dovrebbero essere abbastanza facili da rielaborare per qualsiasi sito web . Tutto ciò di cui hai bisogno è il file di script Rough.js e un po 'di pazienza nel pasticciare con JavaScript.

Ecco un esempio di snippet che dimostra come creare un rettangolo nel codice :

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, larghezza, altezza 

Abbastanza semplice una volta capito il codice ma probabilmente non lo script più intuitivo per i principianti.

Se desideri più frammenti di codice e demo di esempio, controlla la home page di Rough.js . È il posto perfetto per iniziare a imparare e trovare frammenti di codice che puoi rielaborare.

Inoltre, se hai domande o suggerimenti per funzionalità aggiuntive, puoi inviare un messaggio al creatore di Rough.js su Twitter @preetster.

50 bellissimi design di regali che dovrebbero rimanere non imballati

50 bellissimi design di regali che dovrebbero rimanere non imballati

L'offerta di regali è stata ripresa di un livello o due, in particolare nell'era dei video unboxing : l'imballaggio deve essere ora una vera e propria forma d'arte. In effetti, le confezioni regalo creative sono importanti tanto quanto il presente dentro . Una buona presentazione aggiunge entusiasmo all'esperienza di ricevere regali.

(Consigli tecnici e di design)

Novità di Google Chrome 59

Novità di Google Chrome 59

Dopo un lungo periodo di sviluppo, il browser Chrome di Google ha finalmente ottenuto l' aggiornamento per Chrome 59 . Ora disponibile sulla versione desktop di Chrome con le versioni Android e Chrome OS che seguono poco dopo, Chrome 59 porta con sé una combinazione di miglioramenti delle prestazioni e nuove funzionalità .E

(Consigli tecnici e di design)