Tag Archives: CSS

CSS Grafica Tutorial

Usare al meglio la regola @font-face con l’aiuto di Font Squirrel

Pubblicato da

Usare al meglio la regola @font-face con l'aiuto di Font Squirrel

Usare al meglio la regola @font-face con l'aiuto di Font Squirrel

Guest post del web designer Andrea Scuotto

La regola CSS @font-face permette di visualizzare una pagina web con un determinato font anche se questo non è presente sul sistema operativo dell’utente. Tutti i browser principali ora supportano questa regola.
Regola, grazie alla quale, non ci si deve accontentare più di usare solo i font più comuni installati già sui nostri computer.
Non è, però, tutto così semplice. Ci sono vari ostacoli in cui vi potreste imbattere.
Potreste, infatti, non aver la licenza legale che vi autorizza all’uso del font scelto sul web. Oppure, anche avendo la licenza, potreste non sapere come scrivere la regola CSS di @font-face in modo che vada bene per ogni browser. Per esempio, infatti, se il nostro font avesse estensione TTF non sarebbe supportato da Internet Explorer che è, invece, compatibile solo con i file Embedded OpenType (estensione EOT).
Allora cosa fare?
Ci viene in aiuto, in questi casi, Font Squirrel, un sito che fornisce font ad uso commerciale da scaricare gratuitamente.
Ecco come procedere.
Dopo aver cercato il font che ci serve, ad esempio uno molto simile a un carattere di cui non avevamo la licenza ma che ci tenevamo ad utilizzare, clicchiamo su “@font-face Kit” e dopo aver lasciato spuntato tutte le possibili estensioni (TTF, EOT, WOFF, SVG) scarichiamo un file zip, un “kit”.
Il kit che contiene file dei caratteri in vari formati, un demo html e un file css. Questo file contiene un codice css che armonizza finalmente la regola @font-face con ogni tipo di browser.
Ora dobbiamo solo copiare e incollare la regola in un nostro progetto ed il gioco è fatto.

Link: Font Squirrel

CSS Online service

Compatta e semplifica il tuo CSS

Pubblicato da

Compatta e semplifica il tuo CSS

Compatta e semplifica il tuo CSS

I fogli di stile sono l’orgoglio del web designer. Caratterizzano un sito e mostrano quanto si possa essere abili nel controllarne la formattazione.
Capita spesso però che questi CSS diventino dei file lunghi e complessi perdendo in semplicità di manutenzione.
LESS è una filosofia di scrittura dei CSS che cerca di ridurre il numero di righe di istruzione a favore di una maggiore leggibilità e facilità di intervento.
Tramite Css2Less è possibile incollare il proprio CSS vedendo immediatamente convertito in LESS.
Il risparmio è evidente anche con CSS di poche righe.

Link: Css2Less

Blog CSS html WordPress

Pears: il tema per WordPress che ti insegna l’ HTML e il CSS

Pubblicato da

Pears: il tema per WordPress che ti insegna l' HTML e il CSS

Pears: il tema per WordPress che ti insegna l' HTML e il CSS

WordPress è la piattaforma per blog più utilizzata al mondo. Ci sono migliaia e migliaia di template gratuiti in giro per il web per personalizzarlo e renderlo più vicino ai nostri gusti.
Ma come sono fatti questi template? E’ veramente così complesso barcamenarsi tra HTML e CSS?
Se a qualcuno è venuta mai la voglia di imparare e magari crearsi da solo il proprio template, Pears è il template ideale per imparare.

Non solo questo template fornisce un codice di base ma anche un’interfaccia pratica e divertente per modificare e testare al volo le modifiche.
Con un po’ di pazienza e voglia di sperimentare, in poco tempo si potrà padroneggiare il codice per creare un template su misura.
Veramente geniale.

Link: Pears

Grafica Online service

Generatore di gradienti CSS

Pubblicato da

Generatore di gradienti CSS

Un milione di anni fa gli “sfondi” con gradiente dei siti si facevano creando un’immagine che sfumava dal colore A al colore B, magari di un solo pixel di larghezza, e s’impostava il CSS in modo tale che questa immagine fosse ripetuta sull’asse X (come spiegato in questo sito).
Ovviamente ho esagerato e non è passato un milione di anni ma così sembra perchè adesso basta scrivere i CSS in maniera particolare per ottenere l’effetto sfumato.
E’ difficile però scrivere codice che vada bene per tutti browser. Si deve fare attenzione.
Un modo semplice è quello di affidarsi a tool online come Ultimate CSS Gradient Generator .
Un tool completamente visuale che permette di generare codice cross-browser.

Sono già presenti una nutrita serie di esempi tra cui scegliere ma è molto semplice creare il proprio sfondo.

Link: Ultimate CSS Gradient Generator

CSS Javascript Online service

8 strumenti per la compressione di script e CSS

Pubblicato da

8 strumenti per la compressione di script e CSS

Ci sono molti servizi online che aiutano nella compressione degli script (Javascript nella quasi totalità) e dei fogli di stile CSS.
Spesso, nelle pagine di questi servizi, è anche presente il codice sorgente in svariati linguaggi. Codice che è possibile riutilizzare per i nostri progetti.
La compressione serve per aumentare la velocità con cui una pagina viene visualizzata, riducendo il peso di file CSS o di lunghi script.
Ecco una lista di quei servizi con cui mi trovo meglio.

  1. shrinksafe – compressione javascript. E’ sia un servizio online che uno script completamente scaricabile
  2. JSMin – compressione javascript. Si può scaricare l’eseguibile o gli script in moltissimi linguaggi
  3. Packer – compressione javascript. Online, con copia e incolla dello script, oppure disponibile in .NET, Perl e PHP
  4. CompressorRater – comparazione tra i vari tipi di compressione. Ottimo per decidere quale compressore può fare al nostro caso
  5. YUI compressor – compressione CSS e Javascript. Scritto in Java
  6. CSS Compressor – compressione CSS online con nessuna opzione
  7. CSS Compressor by Antarius –  compressione CSS online con qualche opzione
  8. CSS Compressor by CSS Drive – compressione CSS con tre livelli di compressione
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