Category Archives: CSS

Browser CSS

Formee il framework per i form

Pubblicato da

Formee il framework per i form

I form possono essere dei veri grattacapi per gli sviluppatori web.
In primis c’è il problema della visualizzazione omogenea nei vari browser.
Poi ci sono le difficoltà nel rendere un form gradevole dal punto di vista estetico ma anche accessibile e usabile.

Formee è un framework orientato ai form basato su Fluid 960 Grid System (a sua volta basato 960 Grid System) che permette di non sbattere la testa con allineamenti,larghezze e font.
Infatti le larghezze di tutti i campi di testo, le aree sono espresse in percentuale in modo da potersi adattare a qualsiasi tipo di layout.
Dopo aver incluso i due css del framework il nostro unico cruccio sarà solo quello della costruzione del form.

Link: Formee

CSS Tutorial

Menù orizzontali con originale effetto hover

Pubblicato da

Menù orizzontali con originale effetto hover

Se vogliamo creare un menù orizzontale con un simpatico ed originale effetto hover, possiamo prendere in considerazione questo menù realizzato con jQuery e CSS.
I pulsanti sembrano salire e cambiare colore. In realtà si tratta di un livello invisibile che solo nell’area del menù diventa visibile sovrapponendosi al primo.
L’effetto è semplice  ma ben documentato. Una demo è presente qui mentre il tutorial completo lo potete leggere qui

Menù orizzontali con originale effetto hover

Sulla stessa stregua un effetto in cui i pulsanti “scendono” dall’alto.
Anche qui è presente una demo e un archivio zip con l’esempio completo

CSS Javascript Online service Php Python

Comparazione framework

Pubblicato da

Comparazione framework

La necessità di “non inventare la ruota” ogni volta che si mette mano ad un progetto ha dato impulso alla nascita e allo sviluppo dei framework.
Esistono framework per quasi tutti i linguaggi e settori della programmazione.
Quelli più famosi ed utilizzati riguardano PHP, Ruby, Javascript e CSS (di meno quelli per Python e Java).

Per comparare i framework e scegliere quello che meglio risponde alle esigenze dello sviluppatore possiamo dare un’occhiata a Bestwebframeworks.
In una sola schermata è possibile comparare le caratteristiche più importanti dei vari framework.
Cliccando sui nomi si accede ad una scheda con maggiori dettagli.

Tramite form è poi possibile segnalare ai gestori del sito nuovi framework da comparare.

Link: Bestwebframeworks

CSS Javascript

CSSHttpRequest (CHR): AJAX tramite CSS

Pubblicato da

Il trasporto delle informazioni AJAX generalmente avviene tramite XML, il famoso oggetto XMLHttpRequest.
E’ possibile, però, sfruttare anche CSS tramite il metodo CSSHttpRequest

Le richieste sono limitate al metodo GET invocando la funzione CSSHttpRequest.get(url, callback):

    CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

I dati sono codificati sul server in una stringa URI compressa di 2KB (limite per Internet Explorer) e serializzata in un comando CSS @import con uno schema URI modificato del tipo about: . La risposta è decodificata e restituita alla funzione come stringa:

@import url(about:chr:Hello%20World!);

Esempi

Downloads

Link: CSSHttpRequest

CSS Javascript

YAML: molto più di un css framework

Pubblicato da

YAML: molto più di un css framework

Oltre ai framework di sviluppo PHP sono molto in voga in questi tempi i framework CSS, ossia tutto un insieme di istruzioni CSS che facilitano la creazione di layout compatibili con le varie versioni dei browser , accessibili e standard.
“Yet Another Multicolumn Layout” (YAML) è un framework (X)HTML/CSS di buon successo e con un’estesa community di utilizzatori.
Sul sito è possibile vedere degli esempi di layout che è possibile creare con pochissime istruzioni. Insomma lo scopo è sempre quello di non reinventare la ruota ogni volta e concentrare gli sforzi dello sviluppatore in altre direzioni.

YAML: molto più di un css framework

Un discorso a parte merita lo YAML Builder, un’applicazione AJAX che si basa sul framework YAML per creare al volo layout puliti e personalizzati. Il vantaggio rispetto alla creazione manuale del codice è quello di risparmiare tempo anche nell’apprendimento della sintassi e delle convezioni utilizzate all’interno del framework.

Veramente un ottimo progetto.

CSS Dhtml Javascript Online service

Creare menù evoluti in DHTML online

Pubblicato da

Creare menù evoluti in DHTML online

Dopo l’articolo sulla creazione dei CSS online è il turno di IzzyMenu. Un’applicazione online che permette in pochi step di creare gradevoli menù con effetto hover e la possibilità di sub-menu a discesa.
Si crea tutto online potendo scegliere tra moltissimi stili ed infiniti abbinamenti di colori ed effetti. Al termine della creazione si scarica tutto il pacchetto: codice HTML, Javascript, CSS ed eventuali immagini utilizzate per la creazione del menù.

Creare menù evoluti in DHTML online

Creando un account presso IzzyMenu è possibile salvare più menù realizzati, avendoli a disposizione per altri eventuali lavori.

CSS Online service

Creare CSS al volo

Pubblicato da

Creare CSS al volo

Chi non possiede strumenti professionali com Adobe Dreamweaver può incontrare difficoltà nello scrivere i famosi fogli di stile, i CSS. Con Dreamweaver ci si può concentrare sull’impatto visivo del testo e lasciar scrivere il codice all’applicazione. Il vantaggio è nella velocità e nella correttezza del codice.

Esistono però anche degli strumenti online che ci permettono di scrivere al volo i CSS. Ho provato CSS Type Set e mi è sembrato uno strumento semplice ma efficace. Mi permette di ottenere velocemente fogli di stile semplici da cui partire per un progetto nuovo.
Lo trovo anche un utile strumento didattico.

CSS Javascript Online service Yahoo!

CSS: CSS Grid Builder da Yahoo!

Pubblicato da

CSS: CSS Grid Builder da Yahoo!

Il ruolo dei CSS (Cascading Style Sheets) sta sempre diventando più importante nella costruzione di interfacce web. Anche quelle strutture che prima venivano progettate e realizzate a furia di tabelle, righe e colonne adesso possono essere definite tramite un unico, leggero e facilmente modificabile, foglio di stile.
Non tutti però hanno dimestichezza con i CSS quindi ecco che diviene importante uno strumento come il CSS Grid Builder di Yahoo!.
Tramite la nota libreria YUI (Yahoo! User Interface) è possibile creare al volo tabelle basate su CSS, sicuri che la compatibilità con tutti i browser sia totale.
Un ottimo strumento didattico e di lavoro.

Link: CSS Grid Builder

CSS Dhtml Javascript

CSS: menù orizzontale compatibile con tutte le versioni Firefox e Internet Explorer

Pubblicato da

In questo blog per avere un menù che portasse direttamente alle pagine ‘statiche’ avevo sino ad adesso utilizzato il SuckerTree Horizontal Menu che avevo trovato su Dynamic Drive CSS Library.
Una soluzione molto elegante quando si vuole creare un menù per un sito con una semplice lista non ordinata <ul>.
Il problema era che le larghezze dei pulsanti non le volevo fisse

CSS: menù orizzontale compatibile con tutte le versioni Firefox e Internet Explorer

ma volevo che si adattassero al contenuto.

Leggi tutto

CSS Tutorial

La lista definitiva (per adesso) dei form

Pubblicato da

Smashing Magazine ha realizzato una lista di form in puro stile web 2.0.

In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of ??? company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form.