8 strumenti utili per cominciare ad usare i Css3

I css3 rappresentano l’ultima versione delle specifiche dei Css sviluppate dal W3c che non sono state ancora totalmente incorporate dai browser.

I css3 sono oramai il presente ed il futuro anche se ancora non tutti i browser supportano tutte le proprietà dei Css3 in particolare IE.

Ciò spinge molti web designer a ad assumere un atteggiamento di cautela nell’utilizzo dei Css3, ma è importante sapere che ci sono numerosi strumenti che permettono di utilizzare queste proprietà ottenendo la massima compatibilità anche con i vecchi browser. Inoltre, se non conosci le proprietà dei Css3, ci sono numerosi strumenti o generatori di codice che ti permettono in tempo reale di verificare il loro funzionamento ed apprendere così in maniera veloce questo codice di ultima generazione.

Per verificare lo stato della compatibilità puoi consultare findmebyip.

Analizziamo 3 tipi di strumenti: generatori di Css3, script utili e template.

#1 GENERATORI DI CSS3

  1. CSS3 PLEASE

Questo è uno degli strumenti più utili in circolazione perché  ti offre un box con le proprietà dei Css3 nella parte destra dello schermo e ti mostra il codice utilizzato per realizzarlo nella parte sinistra. Ciò che è utile è la possibilità di modificare il codice stesso per vedere in tempo reale il risultato del box. Questo è un modo utile e veloce per imparare i Css3.

2.  CSS3 GENERATOR

Questo semplice strumento ti permette di selezionare il tipo di proprietà inserito in formato elenco, effettuando le eventuali modifiche e di verificarne sempre in tempo reale il risultato nel box situato a destra. La differenza con il precedente strumento, sta nel fatto che gli effetti grafici compaiono man mano che selezioni il tipo di stile che vuoi applicare.

Questo strumento permette anche di produrre codice compatibile per IE.

3.  CSS3 MAKER

Questo strumento, che a differenza degli altri due ha un’interfaccia migliore, genera 10 tipi di proprietà dei Css3:

1)   border radius;

2)   css transform,

3)   box shadow;

4)   text shadow;

5)   text rotation

6)   RGBA

7)   @font face

8)   outline offset

9)   Transition

10) Css gradient

Anche questo strumento ti offre la possibilità di verificare in tempo reale la modifica grafica e il grado di compatibilità con i browser ed in più ti indica la compatibilità con i dispositivi mobili e su quali è possibile visualizzare le proprietà scelte.

4.   TRICKS

Questo strumento offre la possibilità di effettuare modifiche sui pulsanti e di verificarne il risultato. E’ possibile scegliere 7 tipi di proprietà.

 #2 SCRIPT UTILI

5.  MODERNIZR

Modernizr è una libreria javascript molto utile che rileva la disponibilità di implementazioni native per il codice di nuova generazione come le funzionalità che derivano dalle specifiche di Html5 e Css3.  Alcune di queste specifiche sono già state implementate dai browser più importanti per cui Modernizr semplicemente di dice se il browser che stai utilizzando ha implementato queste specifiche o meno.

Se non le supporta allora consente di applicare una proprietà alternativa e specificata nel foglio di stile. L’installazione di Modernizr è molto semplice: è sufficiente scaricare la libreria ed inserirla nel foglio di stile.

6.  IE7-JS

 IE7-js è una libreria javascript che permette a Internet explorer di raggiungere una buona compatibilità con le specifiche dei Css3; inoltre permette ai browser IE5 e IE6 di far funzionare correttamente le immagini in formato .png. 

Scarica IE7-JS.

7.  CSS SANDPAPER

Css Sandpaper è una libreria javascript che permette ai vecchi browser di supportare il codice html5 e Css3.

Analizza il foglio di stile in un documento di Html5 e, dove possibile, mette in evidenza le differenze tra i browser sulle proprietà dei Css3.

#3 TEMPLATE

8.   HTML5 BOILERPLATE

È un template che permette di utilizzare qualsiasi tipo di tecnologia moderna come Html5 e Css3 ma anche altro, con la massima compatibilità dei browsers offrendo un codice veloce e sintetico assemblato in un unico posto.

È una fantastica risorsa che vale la pena di provare per i seguenti motivi:

1)   Codice di ultima generazione ( mark-up di Html5)

2)   Compatibilità con tutti i browser persino con IE6;

3)   Ottimizzazione per i dispositivi mobili

4)   Foglio di stile per la stampa;

5)   Classi .no-js e.js per gli stili basati sulle opacità dei browser

Il template è scaricabile gratuitamente.

CONCLUSIONE

Questa lista non è completa, ma è esaustiva, con una scelta secondo la mia opinione, degli strumenti più importanti da utilizzare per i Css3.

Comincia ad utilizzare anche tu i Css3. L’adozione dei Css3 sta aumentando in popolarità giorno per giorno ed questo è dimostrato dall’aumento della compatibilità con i Css3. Cosa aspetti ad utilizzare anche tu i Css3? Otterrai dei risultati stupefacenti e potrai realizzare dei siti-web di ottima qualità!

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento