GraphiCal » Ispirazione http://www.graphical.it ...di tutorials, grafica, freebies, web design, sviluppo web, flash, photoshop, illustrator, idee, showcases, tools, font, css ... Fri, 02 Jul 2010 08:30:34 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 HTML5 Showcase: 4 demo impressionanti http://www.graphical.it/ispirazione/html5-showcase-4-demo-impressionanti/ http://www.graphical.it/ispirazione/html5-showcase-4-demo-impressionanti/#comments Fri, 11 Jun 2010 09:30:55 +0000 admin http://www.graphical.it/?p=826 html5-demo

Avrete sicuramente sentito in giro parecchie voci sull‘HTMl5 che sembra voglia sostituire Adobe Flash e ciò che alimentano in maniera scatenata questo mormorio è il fatto pare che anche una potente azienda come Apple lo vuole utilizzare per sostituirlo a Flash. Mentre la maggior parte delle comunità web dicono il contrario, io non mi sbilancio più di tanto e non voglio fare un post sulle caratteristiche di una o dell’altra tecnologia, ma voglio farvi vedere cosa si può fare utilizzando HTML5 unitamente ad altri linguaggi come JavaScript in modo da ispirare le vostre scelte nei vostri prossimi progetti

Nota: siccome HTML5 non è pienamente supportato da alcuni browser come Internet Explorer, è fortemente raccomandato utilizzare un browser come Firefox o Chrome per visualizzare tutte le demo correttamente.

Uno degli elementi decisivi in HTML5 per sostituire alcune animazioni Flash è il canvas. Esso consente di costruire dinamicamente script di rendering 2D per forme e  immagini bitmap con Javascript, che  non è altri che: animazione controllabile.

Audioburst Animation

Una confortevole e fantastica animazione creata con canvas HTML5 e audio tag.

audioburst animation HTML5 Showcase: 48 Potential Flash Killing Demos

Ball Pool

In mostra negli ultimi eventi Google, questa demo dimostra la dinamicità dell’HTML5.

ball pool HTML5 Showcase: 48 Potential Flash Killing Demos

Bomomo

Con Bomomo, si possono osservare diversi movimenti atomici simulati con HTML5.

bomomo HTML5 Showcase: 48 Potential Flash Killing Demos

Browser Ball

Divertente animazione di attraversamento finestra di una palla.

browser ball HTML5 Showcase: 48 Potential Flash Killing Demos

Conclusioni

A questo punto non possiamo decidere, ma sicuramente queste demo mi hanno impressionato ;)

No related posts.

]]> http://www.graphical.it/ispirazione/html5-showcase-4-demo-impressionanti/feed/ 0 4 Semplici slideshow di immagini con jQuery http://www.graphical.it/freebies/4-semplici-slideshow-di-immagini-con-jquery/ http://www.graphical.it/freebies/4-semplici-slideshow-di-immagini-con-jquery/#comments Tue, 08 Jun 2010 09:00:42 +0000 admin http://www.graphical.it/?p=807
  • Una Gallery in Drag & Drop
    • ]]>     slider-image

    Gli Slideshow o gallery di immagini (e non solo) , sono una tendenza che ha preso vita lo scorso anno ed è aumentata sempre più a tal punto che rappresentano la caratteristica principale di ogni progetto web, forse per il loro impatto semplice e di stile. Come risultato di questa popolarità ci sono letteralmente centinaia di plugin e script jQuery per slider, liberamente disponibili, tutte le con funzionalità leggermente diverse, il che rende molto difficile scegliere quale fa per noi.

    In questa post diamo uno sguardo più da vicino a quelli che sono gli slider più belli e user-friendly attualmente in circolazione.

    Nivo Slider – Il più impressionante jQuery Image Slider

    Nivo Slider - The Most Awesome jQuery Image Slider

    Nivo Slider è un plugin minimal di bell’aspetto e di dimensioni ridotte (appena 5Kb). Permette di scorrere le imamgini con le frecce hai lati in maniere molto semplice e con 9 ed unici effetti di transizione.
    Download e Demo

    Gallery – Una fantastica galleria in JavaScript

    Galleria - A JavaScript gallery for the Fastidious

    Visualizza in maniera semplice e diretta tramite un scroll orizzontale le immagini con preview in basso, unica nel suo genere e adattabile per qualsiasi progetto.

    Download e Demo

    Content Switcher con jQuery e CSS3

    Recreating the MLB.com Content Switcher with jQuery and CSS3

    Fantastico content switcher che visualizza immagine e testo sotto allegato, particolarità di questo slider la finestra delle preview leggermente in trasparenza, un tocco sicuramente unico.

    Download e Demo

    jQuery.popeye 2.0 – Un alternativo lightbox interno all’articolo

    jQuery.popeye 2.0 - an inline lightbox alternative

    jQuery.popeye è uno script per gallery di immagini avanzato, realizzato per aiutarvi a risparmiare spazio quando si visualizza una raccolta di immagini e offre agli utenti un modo simpatico ed elegante per mostrare una versione grande delle immagini senza lasciare la pagina in cui si trova l’articolo. Lo script è veloce e facile da installare e offre una grande flessibilità sia in comportamento che in stile.

    Download e Demo

    Related posts:

    1. Una Gallery in Drag & Drop

    ]]>     http://www.graphical.it/freebies/4-semplici-slideshow-di-immagini-con-jquery/feed/ 0     Nuovi font per un web più attraente! Ci pensa Google! http://www.graphical.it/tutorials/nuovi-font-per-un-web-piu-attraente-ci-pensa-google/ http://www.graphical.it/tutorials/nuovi-font-per-un-web-piu-attraente-ci-pensa-google/#comments Thu, 20 May 2010 07:00:50 +0000 admin http://www.graphical.it/?p=795
  • I migliori 15 font per web designer
  • Google search stories – Racconta la tua storia con una ricerca creativa!
  • Convertire qualsiasi Font in un Sketch Font
    • ]]>     font-g

    Quante volte siamo stati vincolati dall’utilizzo dei soliti font compatibili per il web, perché gli unici permessi dallo standard  browser, a scapito del design del sito stesso. Infatti i font che solitamente vediamo in giro, parliamo di Arial, Verdana, Times.. sono font incorporati all’interno del browser che utilizziamo per la navigazione.

    Inizialmente i web font , che garantivano una buona compatibilità negli ambienti Windows /Mac erano veramente molto pochi. Con le ultime versioni dei sistemi operativi le possibilità di scelta sono un po’ aumentate. E google amplia questa possibilità introducendo una serie di nuovi font sicuramente utilissimi agli sviluppatori creativi i quali vogliono fare del proprio sito o blog un lavoro unico!

    Il funzionamento è abbastanza semplice, google inventato una font directory e una font API che aiuterà lo sviluppatore a usare i font offerti, di alta qualità ed open source,  nei loro siti.

    La font directory offre per adesso 18 nuovi font tra qui quello Android utilizzato per l’omonimo sistema operativo, tra cui alcune varianti degli stessi.

    font-google

    L’utilizzo è semplicissimo con le API Font messe a disposizione da google, vediamo come.

    Step 1: basta aggiungere questo script all’interno dei tag <head>:

    <link href=’http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>
    in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche i font messi a disposizione da google.

    <link href=’http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>

    in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche il font google che poi andremo a richiamare nello stile del paragrafo.

    Step2: adesso impostiamo il font per un paragrafo di testo nel solito modo, ovvero:

    <h1 style=”font-family:’Tangerine’, arial, serif;”>

    hello world

    </h1>

    e adesso dovremmo vedere gli effetti del nuovo font, applicati al testo! (scarica l’esempio in fondo all’articolo)

    Per adesso, Google supporta solo le lingue Europee, ma molto presto pensa di ampliare il supporto anche per le restanti lingue.

    Credo che sia un’ottima soluzione che in futuro se ampliata potrà portare molti vantaggi lato design nel mondo del web 2.0!

    Di seguito puoi scaricare un  esempio di file html con lo script che abbiamo descritto prima:

    Related posts:

    1. I migliori 15 font per web designer
    2. Google search stories – Racconta la tua storia con una ricerca creativa!
    3. Convertire qualsiasi Font in un Sketch Font

    ]]>     http://www.graphical.it/tutorials/nuovi-font-per-un-web-piu-attraente-ci-pensa-google/feed/ 2     I migliori 15 font per web designer http://www.graphical.it/freebies/i-migliori-15-font-per-web-designer/ http://www.graphical.it/freebies/i-migliori-15-font-per-web-designer/#comments Fri, 26 Mar 2010 03:00:16 +0000 admin http://www.graphical.it/?p=734
  • Nuovi font per un web più attraente! Ci pensa Google!
  • I Migliori Tutorial Photoshop del 2009
  • Convertire qualsiasi Font in un Sketch Font
    • ]]>     font

    I font sono sempre uno dei tratti essenziali della Grafica e web design, quando si lavora su progetti di design che sia per il web o per la stampa e sempre essenziale avere una buona collezione di font.
    Oggi ho voluto raccogliere una serie di font molto “creativi” per voi, assolutamente free da scaricare. Quindi spazio alla vostra di creatività e che questi contenuti possano aiutarvi nel vostro lavoro da designer!

    Eccoli di seguito in una preview originale:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    Allstar Regular

    Dirt2 SoulStalker Free Font by KeepWaiting

    Akashi

    Plasti Puzzle Font by Rodier

    Free Vecto Font by maxix

    Nordic

    ABC Font Typeface Version 2

    Hacjiuza Dirty – Free Font by KeepWaiting

    quarters typeface by iamsla

    Megalopolis

    Existence Light

    Contemporary Modern Font

    Birdman

    K R A K E N – B E T A by Twiggy8520

    Sliced AB by atobgraphics

    trashco.ttf-download by loosy

    Evolution True Type

    Vintage

    1 voteBuzz up! Stumbleupon Delicious

    Popularity: 26% [?]

    Related posts:

    1. 40 Free Professional Useful Icon Sets for Web Designers Most of the websites in this era have really graphical…
    2. 50+ Most Creative and unusual 404 error Pages In this new era we as designers also focus…
    3. 45+ Corporate Design Examples from Famous Designers Gallery Its not easy to find quality work of graphic designers,…
    4. 70 Exceptional Creative Typography Desktop Wallpapers We always present quality stuff for you respected visitors…
    5. 80 Stunning List of Free Photos and Free Textures by PhotoVaco Today we’re with PhotoVaco.com where number of photos which can…

    Related posts brought to you by Yet Another Related Posts Plugin.

    Twitter Digg Delicious Stumbleupon Technorati Facebook

    Fonts, Graphics, Internet

    21 Responses to “50 Extraordinary Creative Free Fonts for Designers”

    1. Atul Kash 21. Mar, 2010 at 7:39 pm

      Thanks for the great collection. Apogee rounded sans is my favorite

    2. goverment grant 21. Mar, 2010 at 10:37 pm

      i love Rounded Sans Beta font. thanks for sharing

    3. Beth McLain 22. Mar, 2010 at 1:14 pm

      Thanks for spending time to create this awesome Collection..

      I love Contempory-Modern-Font

    Leave a Reply