Category Archives: CSS

Pulsanti in CSS3: il modo semplice di realizzarli

Pubblicato da

Le enormi potenzialità di CSS3 sono un po’ mortificate dalla ancora relativa diffusione di vecchie versioni di browser che non li supportano. E’ indubbio anche che non tutte le nuove istruzioni siano conosciute come le erano con i vecchi CSS.
Costruire dei pulsanti graficamente gradevoli e con effetti di transizione “avanzati” può diventare un gioco da ragazzi con un tool come CSS3 Button Generator di CSS Drive .

Basta selezionare colore di sfondo con il tipo di diffusione (piatta o gradiente), il grado di arrotondamento degli angoli, l’effetto di transizione, effetto hover, padding e tanto altro. Nella porzione di schermo in basso a sinistra viene immediatamente visualizzato il codice da inserire per ottenere questa classe.
E’ anche un’ottima metodologia didattica per imparare i nuovi CSS3.
Il mio consiglio è quello di testare in ogni caso il codice con le versioni più anziane dei browser per non pregiudicare l’usabilità della pagina web.

Link: CSS3 Button Generator di CSS Drive

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

Pubblicato da

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

Compatta e semplifica il tuo CSS

Pubblicato da

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

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

Pubblicato da

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

Centratissimo: un layout originale che sta sempre al posto suo.. al centro

Pubblicato da

Centratissimo è

un template web con scrolling fluido tra le pagine e capacità di adattare le proprie dimensioni in funzione di quelle della finestra in modo da risultare sempre perfettamente centrato.
Centratissimo è stato testato e funziona bene a partire da Firefox 3.x, IE8, Safari 4.x, Opera 10.x., Chrome 11.x

Per fare questo basta jQuery, un paio di suoi plugin e tanta pazienza.
Il risultato è un originale layout adattissimo per pagine di presentazione, mini-siti e compatibile con tutti i browser moderni.
Da tenere d’occhio.

Link: Centratissimo

deCSS3: simulare i browser che non supportano CSS3

Pubblicato da

CSS3 ha aperto un mondo di possibilità agli sviluppatori del web.
Questi però si devono scontrare con un nocciolo duro di navigatori del web che ancora usano browser che non supportano i fogli di stile di nuova generazione.
deCSS3 è un bookmarklet che si aggiunge ai browser moderni per simulare il comportamento (ad esempio) di Internet Explorer dalla versione 6 alla 8.
Attualmente deCSS3 funziona solo con Safari e Chrome ma presto il supporto dovrebbe essere esteso anche a Opera e Firefox.
Gli sviluppatori sono alla ricerca di collaborazioni.

Link: deCSS3

Implementazione Javascript dei pre-processori CSS

Pubblicato da

I pre-processori CSS sono strumenti che estendono le potenzialità dei CSS. Due tra i più utilizzati sono LESS e SASS.
Queste librerie permettono di aggiungere variabili e classi, effettuare operazioni e nidificare i CSS.
Sia LESS che SASS devono però essere installate sul server per poter essere utilizzate.
Inizialmente LESS e SASS erano stati sviluppati come gem Ruby ma attualmente esistono dei porting per PHP.NET.

Per chi volesse cimentarsi nei pre-processori CSS ma non vuole chiamare in causa Ruby, PHP o .NET, è stata realizzata una libreria .js che sostituisce le installazioni.
Secondo lo sviluppatore, questa libreria permette di essere fino a 40 volte più veloce (anche nei browser non di ultima generazione).
L’unica accortezza è quella di inserire il file LESS prima dell’inclusione alla libreria javascript

Lo sviluppo è ancora agli inizi ma promette bene. Tutto nell’ottica di un utilizzo più semplice di questo strumento di estensione delle capacità dei “vecchi” CSS

Link: Less.js

8 strumenti per la compressione di script e CSS

Pubblicato da

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

Formee il framework per i form

Pubblicato da

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