Qui parliamo di: Css


Letto 15.351 Volte

[Coach Creativo]

HTML 5: Video Player Open Source in Javascript

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.


Letto 1.577 Volte

[Coach Creativo]

Voi Usate Il jParallax???
diagram

Il jParallax trasforma nodi in strati posizionati in modo assoluto che si muovono in risposta al mouse. A seconda delle loro dimensioni questi livelli si muovono a velocità diverse, in una sorta di modo parallelo.

Con un po’ di CSS è possibile creare finestre per vedere attraverso questi strati, oppure lasciarli liberi di vagare in giro per la pagina HTML.

 

Questo plugin esiste già da un paio di anni solo adesso sta venendo fuori dalle pagine internet.

Si può ipotizzare che questo sia dovuto allo sviluppo dei browser web che solo negli ultimi tempi si sono aggiornati in maniera davvero esponenziale andando a superare ogni aspettativa.

 

Ciò ha fatto si che anche il web design si evolvesse in qualcosa di spettacolare che impressiona anche il singolo utente di passaggio sul vostro sito.

 

Ecco un semplice esempio di jParallax http://www.ristorantemartella.it/


Letto 6.173 Volte

[Web Design]

CSS Layouts

Siete in cerca di stili CSS da utilizzare? Eccovi la lista:

  1. Layout Gala: 40 CSS tri-color layouts to help you pick a format.
  2. AndreasVilkund.com: Free Templates by designer Andreas Viklund.
  3. CSS Template Directory: A collection of CSS formatted page templates, developed and distributed by different designers.
  4. BenMeadowcroft.com: Top-notch web design templates by Ben Meadowcroft, mixed in with a few spoof pages and experimentation.
  5. Mollio: A set of basic CSS templates that that also have some sample basic content to speed things along.
  6. Real World Style: CSS layouts organized by format type.
  7. Little Boxes: CSS template arrangements with quickly accessible code.
  8. CSS introduction: It has an introduction to CSS (for any of your visitors who are completely new to the topic) as well as details of the new features of CSS3.
  9. Protagonist Web Resources: A list of 43 tableless layouts to go along with the other protagonist resources.
  10. Glish: CSS Layout Techniques by Eric Costello which have been stripped down to the bare essentials.
  11. FU2K: CSS layouts designed for Netscape 4 compatibility.
  12. Position is Everything: Tableless design resource with CSS bug workarounds.
  13. ThreeColumnLayouts: The ultimate 3 column layout resource list.
  14. ssi-developer: Two column CSS template samples with recommendations.
  15. MIS Web Design: Fancy Paragraphs with CSS.
  16. Ruthsarian Layouts: Freebie-CSS layouts ranging from basic to complex arrangements.
  17. A List Apart: CSS: Practical CSS Layout Tips, Tricks and Techniques
  18. Code-Sucks.com: Creating 1, 2, 3, and 4 column layouts.
  19. Particle Tree: Dynamic resolution dependent layouts.
  20. Project Seven: Fluid CSS Layouts
  21. MyCelly: A collection of 16 basic layout templates.
  22. Ideas: 12 free CSS templates.
  23. CSS Library: Dynamic drive’s tableless CSS layouts.
  24. IntensiveStation: A collection of all new basic CSS templates.
  25. IronMyers: A collection of layouts with full Grade-A browser support for IE6, IE7, Firefox, Opera, Safari, and more.
  26. The CSS Playground: Cutting edge CSS demos by Stu Nicholls’
  27. WordPress Theme Viewer: Collection of searchable themes organized by columns, colors, rounded corners, and other categories.
  28. Fluid 2-Column Template: A fully usable “fluid” template, meaning that the design expands and contracts with the window size.
  29. Avinash 2.0: 12 Free CSS Templates

Letto 3.440 Volte

[Web Design]

Automated CSS Tools and Generators

Come generare automaticamente layouts e CSS:

  1. CSS Creator: Select the form colors, number of columns, html version, and press a button. Presto, a CSS template for your page.
  2. Inknoise: The layout-o-matic: fill out the form and out pops your CSS.
  3. Strange Banana: Simply refresh the template generator until you get the style you like, then save the page which has your CSS embedded in the header.
  4. Nidahas: A CSS-based form template.
  5. Maketemplate: A PHP – HTML – CSS template generator for two column layouts.
  6. IBDjohn: CSS template generator for three column layouts.
  7. TemplatR: Another easy CSS template generator.
  8. PsycHo: Your own psychogenesis, your own web design template.
  9. Firdamatic: Tableless 2 or 3 column layout generator.
  10. WordPress Theme Generator: Online generator creates custom unique WordPress themes.

Letto 855 Volte

[Coach Creativo Web Design]

60 More AJAX, Javascript Solutions e risorse CSS

Questo post su smashingmagazine presenta oltre 50 nuove utili script Ajax, le librerie e le soluzioni che potete usare nei vostri progetti futuri. Le licenze di utilizzo possono cambiare di volta in volta – siete pregati di leggere attentamente prima di utilizzare lo script in una applicazione web commerciale.
Vi segnalo anche queste utili risorse per gli stili CSS

CSS Beauty

Ispirazioni per web designer

Web Creme

Unmatched Style

Design Firms

25 bellissimi design minimali per siti web

24 gallerie di nicchia

10 grandi design del 2007

I migliori CSS del 2007


Letto 7.892 Volte

[Coach Creativo Web Design]

Zoom sulle Immagini: Cloud Zoom. jQuery Plugin

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


Letto 3.488 Volte

[Coach Creativo Web Design]

Font Api di Google: Utilizza un Font Caricato nella Nuova Font Directory

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!


Letto 4.699 Volte

[Coach Creativo Web Design]

Widget in Javascript per i Social Network: OpenLike

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.


Letto 8.874 Volte

[Coach Creativo]

slideGallery: Carosello di Immagini con Effetto Slide Orizzontale e Verticale – Mootools Framwork

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…


Letto 5.319 Volte

[Coach Creativo Web Design]

AJAX-enabled Sticky Notes With PHP & jQuery – Note Post-It Sulle Pagine Web

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.