Web Design » Css http://www.ipwebdesign.it imaginepaolo, imagine has no wall Wed, 01 Feb 2012 06:39:52 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Zoom sulle Immagini: Cloud Zoom. jQuery Plugin http://www.ipwebdesign.it/2010/07/zoom-sulle-immagini-cloud-zoom-jquery-plugin/ http://www.ipwebdesign.it/2010/07/zoom-sulle-immagini-cloud-zoom-jquery-plugin/#comments Thu, 01 Jul 2010 14:51:16 +0000 cm http://www.ipwebdesign.it/?p=1788

Cloud Zoom è un leggerissimo plugin in jQuery che mostra le immagini ingrandite attraverso alcuni effetti particolari.

Effettua lo zoom in base alla posizione del mouse sull’anteprima (thumbnail), mostrando l’immagine ingrandita accanto, oppure direttamente  in essa.

Possono essere create gallerie di immagini: questa feature è utilissima per la costruzione di siti e-commerce, dove è opportuno mostrare agli utenti delle immagini, sia in anteprima, sia in dettaglio dei prodotti di una categoria.

La trasparenza, lo zoom e tutti gli altri effetti possono essere personalizzati semplicemente attraverso i fogli di stile CSS.

Demo

Related Posts

]]> http://www.ipwebdesign.it/2010/07/zoom-sulle-immagini-cloud-zoom-jquery-plugin/feed/ 0 Font Api di Google: Utilizza un Font Caricato nella Nuova Font Directory http://www.ipwebdesign.it/2010/05/font-api-di-google-utilizza-un-font-caricato-nella-nuova-font-directory/ http://www.ipwebdesign.it/2010/05/font-api-di-google-utilizza-un-font-caricato-nella-nuova-font-directory/#comments Wed, 19 May 2010 18:32:45 +0000 cm http://www.ipwebdesign.it/?p=1758

Google ha appena annunciato una nuova risorsa messa a disposizione dei web designers: Font API.

Attraverso una Font Directory, ogni utente è in grado di accedere al database contenente i font, ed essi, una volta che sono stati allegati nelle nostre pagine web, potranno essere visualizzati da tutti essendo una funzione cross-browser.

È davvero semplice utilizzare l’API, infatti, basta allegare il file di stile (hostato sui server di Google) e sarai pronto ad utilizzarlo per formattare i contenuti!

La Font Directory è raggiungibile a questo indirizzo. Dopo aver scelto il font nella lista, selezionarlo, e premere sulla scheda “Get the code”.

Un esempio lo trovate nei titoli di questa pagina: spettacolare!

Related Posts

]]> http://www.ipwebdesign.it/2010/05/font-api-di-google-utilizza-un-font-caricato-nella-nuova-font-directory/feed/ 0 Widget in Javascript per i Social Network: OpenLike http://www.ipwebdesign.it/2010/04/widget-in-javascript-per-i-social-network-openlike/ http://www.ipwebdesign.it/2010/04/widget-in-javascript-per-i-social-network-openlike/#comments Wed, 28 Apr 2010 19:31:54 +0000 cm http://www.ipwebdesign.it/?p=1731

OpenLike è un widget scritto in Javascript in grado di riportare funzionalità di sharing dei contenuti di un sito web, in uno dei più famosi Social Network: Facebook (Mi Piace), StumbleUpon, Reddit, Digg, Buzz, Twitter ecc…

È un sistema molto più semplice dei servizi professionali AddThis e ShareThis: infatti, basta inserire solo poco codice in un file js.

Le varie stringhe e immaginette di condivisione possono essere personalizzate attraverso il file CSS contenuto nel pacchetto.

Related Posts

]]> http://www.ipwebdesign.it/2010/04/widget-in-javascript-per-i-social-network-openlike/feed/ 0 HTML 5: Video Player Open Source in Javascript http://www.ipwebdesign.it/2010/03/html-5-video-player-open-source-in-javascript/ http://www.ipwebdesign.it/2010/03/html-5-video-player-open-source-in-javascript/#comments Tue, 30 Mar 2010 09:22:13 +0000 cm http://www.ipwebdesign.it/?p=1676

Projekktor è un video player realizzato in Javascript, che utilizza la funzionalità di video embedding del nuovo standard HTML5. Nel caso in cui, il browser dell’utente non fosse compatibile (allo standard H.264), il plugin avvia un player in flash.

Supporta le playlists e può essere attivata la modalità schermo intero, inoltre, il pannello dei controlli, è configurabile via CSS.

C’è da dire che non è ancora perfetto e possiede qualche bug, ma data la forte diffusione di questa nuova tipologia di formato, i programmatori sono ben intenti a rilasciare nuove versioni sistemandone i problemi.

Vi rimando al sito per ulteriori dettagli.

Related Posts

]]> http://www.ipwebdesign.it/2010/03/html-5-video-player-open-source-in-javascript/feed/ 1 slideGallery: Carosello di Immagini con Effetto Slide Orizzontale e Verticale – Mootools Framwork http://www.ipwebdesign.it/2010/03/slidegallery-carosello-di-immagini-con-effetto-slide-orizzontale-e-verticale-mootools-framwork/ http://www.ipwebdesign.it/2010/03/slidegallery-carosello-di-immagini-con-effetto-slide-orizzontale-e-verticale-mootools-framwork/#comments Fri, 19 Mar 2010 10:46:33 +0000 cm http://www.ipwebdesign.it/?p=1655

slideGallery è un plugin realizzato con MooTools per creare gallerie di immagini a scorrimento in maniera semplice e veloce. Converte qualsiasi unordered list in uno slider (verticale o orizzontale), il cui aspetto, può essere configurato attraverso il CSS.

La galleria può essere configurata attraverso molte istanze: auto-play, pulsanti di avanzamento, durata della transizione, direzione della transizione, modallità della transizione ecc.

È addirittura compatibile con IE6…

Related Posts

]]> http://www.ipwebdesign.it/2010/03/slidegallery-carosello-di-immagini-con-effetto-slide-orizzontale-e-verticale-mootools-framwork/feed/ 0 AJAX-enabled Sticky Notes With PHP & jQuery – Note Post-It Sulle Pagine Web http://www.ipwebdesign.it/2010/02/ajax-enabled-sticky-notes-with-php-jquery-note-post-it-sulle-pagine-web/ http://www.ipwebdesign.it/2010/02/ajax-enabled-sticky-notes-with-php-jquery-note-post-it-sulle-pagine-web/#comments Thu, 18 Feb 2010 22:16:43 +0000 cm http://www.ipwebdesign.it/?p=1611

Quello che vi propongo oggi è un sistema di gestione dei post-it. Esso fornisce all’utente la possibilità di creare delle note e di vederle in anteprima sulla pagina. Dopodiché possiamo spostarle sullo schermo in qualsiasi posizione.

Questo componente è completamente scritto in AJAX e PHP, con la versione 1.4 di jQuery. Inoltre, utilizza il plugin FancyBox per la creazione delle nuove note. Insomma, è davvero un mix di tecnologia,programmazione e grafica ad alti livelli.

Potete vedere un esempio a questa pagina, oppure, cliccate qui per il download.

Related Posts

]]> http://www.ipwebdesign.it/2010/02/ajax-enabled-sticky-notes-with-php-jquery-note-post-it-sulle-pagine-web/feed/ 0 Menu Inspirations: layout Navigatori per Header – Navigation Menu HTML & CSS http://www.ipwebdesign.it/2010/02/menu-inspirations-layout-navigatori-per-header-navigation-menu-html-css/ http://www.ipwebdesign.it/2010/02/menu-inspirations-layout-navigatori-per-header-navigation-menu-html-css/#comments Sat, 06 Feb 2010 12:27:17 +0000 cm http://www.ipwebdesign.it/?p=1582

Oggi vi propongo dei menu navigator in HTML con il layout già prestabilito e installabile “al volo” su un una vostra pagina. Le anteprime le potete osservare nell’immagine in alto e, come avrete notato, vanno dallo stile stravagante con pattern (in alto) a quello semplice ed elegante (quelli più in basso).

Le immagini di base di questi navigator sono fornite nelle cartelle compresse in basso; inoltre, all’interno di questo file, troverete anche la pagina HTML con il navigatore funzionante e il file CSS per la gestione del mouse positioning.

Questo materiale, prelevato dal sito www.psdgraphics.com, è freeware anche a scopo commerciale.

Green stars CSS navigation
Purple CSS navigation
Orange halftone CSS navigation
Blue waves CSS navigation
Rainbow colors CSS navigation
Gray grunge CSS navigation
Yellow abstract CSS navigation
Blue abstract CSS navigation

Related Posts

]]> http://www.ipwebdesign.it/2010/02/menu-inspirations-layout-navigatori-per-header-navigation-menu-html-css/feed/ 0 Un framework CSS: MarkerCSS. Come Realizzare Pagine Web in Pochissimi Clicks http://www.ipwebdesign.it/2010/01/un-framework-css-markercss/ http://www.ipwebdesign.it/2010/01/un-framework-css-markercss/#comments Wed, 27 Jan 2010 14:56:42 +0000 cm http://www.ipwebdesign.it/?p=1561

MarkerCss è un framework contenente codice open source per poter realizzare siti web con i templates offerti. Esso è composto da una serie semplicissima di fogli di stile CSS che caratterizzano gli elementi del contenuto delle pagine: bordi, sfondi, links, testi, colori e tabelle.

Esso include una serie di references prestabilite, come la classe w10 (che può essere definita da 10 a 1000) che determinerà la larghezza di un elemento in 10px (o altro), o per esempio la classe p5 (definita da 5 a 50) che aggiungerà un padding di 5px all’elemento a cui si riferisce.

C’è una lista di esempi fornita dal sito che lascia intuire meglio tutte le funzionalità di questo interessante, funzionale e pratico framework.

Related Posts

]]> http://www.ipwebdesign.it/2010/01/un-framework-css-markercss/feed/ 1 Plugin Per E-Commerce: Gestire Prodotti e Acquisti in un Carrello Virtuale della Spesa http://www.ipwebdesign.it/2010/01/plugin-per-e-commerce-manage-ecommerce-items-using-ajax-shopping/ http://www.ipwebdesign.it/2010/01/plugin-per-e-commerce-manage-ecommerce-items-using-ajax-shopping/#comments Wed, 13 Jan 2010 18:20:11 +0000 cm http://www.ipwebdesign.it/?p=1531

Utilissimo plugin in Ajax per gestire gli articoli in vendita su un sito e-commerce. Questo add-on utilizza un database MySql per catalogare gli articoli, dopodiché, attraverso un’interfaccia user-friendly, è possibile trascinare i prodotti in un’area dedicata agli acquisti (Drag&Drop).

Successivamente verrà calcolato il totale (numero prodotti per il prezzo unitario) e verrete reindirizzati alla pagina di stampa dell’ordine, da gestire e programmare a piacere in base alle necessità.

Completamente scritto in PHP, CSS, HTML e AJAX.

Qui la demo e il download del plugin Ajax.

Related Posts

]]> http://www.ipwebdesign.it/2010/01/plugin-per-e-commerce-manage-ecommerce-items-using-ajax-shopping/feed/ 0 Inspirations per il vostro sito: footers http://www.ipwebdesign.it/2009/04/inspirations-per-il-vostro-sito-footers/ http://www.ipwebdesign.it/2009/04/inspirations-per-il-vostro-sito-footers/#comments Thu, 09 Apr 2009 08:57:11 +0000 imaginepaolo http://www.ipwebdesign.it/?p=762

Ecco una lista di websites contenenti dei footer “cool”. Il footer è un elemento necessario per qualsiasi sito che si rispetti ed è posizionato in basso alla pagina. E’ molto importante per l’utente vedere un area dove sono raccolte le informazioni del sito, contatti e resources, ma è anche importante per fornire al lettore equilibrio e semplicità mentre sono espressi i contenuti.

Simplyfired
Builtbybuffalo.com

SarahLongNecker.com
Sprockethouse.com
Fabio-Carneiro
Matthiasschuetz.com
Daleharris.com
Larissameek.com
Pixellogo.com
Gearcritech.com
Jek2k.com
FarFromFearless.com
Cslingphotography.com

Related Posts

]]> http://www.ipwebdesign.it/2009/04/inspirations-per-il-vostro-sito-footers/feed/ 0