Sei in » Home  » Software
Scritto da G. Meneghelli - Letto 8722 volte  -   Ultimo aggiornamento  28/01/2023




Programmi e strumenti per creare fogli di stile ottimizzati, integrare funzionalità ai siti e generare automaticamente codice CSS.


image article




Indice pagina




» Introduzione
» Strumenti on-line
» Download software
» CSS Framework
» Conclusione
» Risorse selezionate dal web





Introduzione




I fogli di stile CSS acronimo di Cascade Style Sheet sono lo strumento base per personalizzare il layout di un sito web attraverso i tag HTML.
In questo articolo voglio proporti alcuni strumenti che ti possono aiutare a creare codice per i tuoi progetti e alcune librerie che possono essere integrati nei tuoi progetti web.

I strumenti web che generano codice ti possono aiutare per creare codice al volo da inserire nella tua pagina web.
I framework ti permettono di inserire delle librerie che generano effetti, classi e layout già predefiniti.

I generatori automatici di codice ti consentono di risparmiare tempo e ottenere un codice già pronto da inserire nelle tue pagine.

Alcuni di questi strumenti si possono utilizzare per creare un progetti Web da zero o utilizzare le loro funzionalità per accelerare e migliorare il processo di web design.

Se sei un neofita dei fogli di stile ti consiglio la lettura dell'articolo Creare siti con i fogli di stile (CSS) per avere un'idea di cosa stiamo parlando.





» Inizio pagina



Strumenti on-line




call_made Border-radius.com
Con questo strumento puoi creare rapidamente il codice per creare angoli arrotondati in un box. È possibile specificare il raggio per tutti e quattro gli angoli individualmente e può generare codice CSS sia per Firefox che per Google Chrome. È ideale per creare pulsanti con angoli arrotondati, banner o sezioni <div> personalizzate per il layout della tua pagina web. Il codice CSS generato è completamente ottimizzato e funziona in quasi tutti i browser Web più diffusi senza alcun problema.


call_made CSScrush
CSScrush è un preprocessore. I preprocessori, per dirla in maniera semplice, sono un'estensione dei selettori CSS. Entrando nei dettagli, un preprocessore CSS è un linguaggio di foglio di stile separato con funzionalità avanzate che gli sviluppatori possono sfruttare per creare prodotti più snelli e veloci con più funzionalità, spendendo meno tempo sull'intero processo rispetto al semplice CSS. Un utente avanzato può utilizzare il codice CSS proposto da CSScrush per accelerare il processo di codifica fornendo strumenti ingegnosi per generare, indentare e modificare rapidamente fogli di stile di grandi dimensioni in un periodo di tempo relativamente breve.


call_made CSS3generator
Strumento di generazione di codice CSS3 ideale per accelerare il lavoro di progettazione di web design. Offre diverse opzioni avanzate per generare codice per varie proprietà CSS3. Devi semplicemente fornire i parametri attraverso i controlli punta e clicca e tramite una sezione di anteprima puoi vedere la modifica in tempo reale. Una volta soddisfatti i parametri, puoi facilmente copiare il CSS generato per l'utilizzo nel tuo progetto.


call_made CSS Code generator
Un sito pieno di tool e documentazione. Puoi trovare un editor, un cheat sheets con i selettori CSS, vari generatori per crare colori gradienti, box transform, text shadow, color picker, table styler, column generator, border radius, etc.


call_made CSSLayoutgenerator
Con questo strumento on-line è possibile generare facilmente un layout di pagina a larghezza fissa o fluida in maniera intuitiva.
Si possono facilmente selezionare varie proprietà associate all'intero layout e ottenere il codice CSS corrispondente per avviare un nuovo progetto Web in pochi minuti. Mostra anche l'anteprima mentre modifichi o selezioni i parametri di layout. Questo ti aiuta a trovare i dati corretti per ottenere il giusto layout di pagina che corrisponde alle tue esigenze


call_made Enjoycss.com
Generatore di codice CSS. Puoi creare testo, sfondi (background), ombre (shadows), bordi (border and radius), transizioni (transition), trasformazioni di forme, bottoni, caselle di testo (textfields), testo con effetti (effetct text), forme (shapes) patterns e art..


call_made List-o-matic
Strumento flessibile è ideale per generare automaticamente CSS per diversi stili di menu di navigazione sotto forma di elenco non ordinato. Produce sia codice CSS che HTML in due sezioni separate. È necessario fornire le opzioni di menu (testi di ancoraggio e URL) incluso lo stile della raccolta a vostra disposizione. È uno dei modi più veloci per creare CSS per gli elementi di navigazione.


call_made Primercss.com
Strumento estrarre classi e ID CSS da un template HTML. Basta copiare e incollare il codice HTML sul quale vogliamo eseguire l'operazione di estrazione all'interno del text box. Si esegue una scansione che produrrà un foglio di stile CSS vuoto con tutti gli ID e le classi presenti nel codice HTML incollato. Questo strumento è ideale se stai lavorando su modelli HTML di terze parti e desideri personalizzarli rapidamente tramite le direttive CSS utilizzate.


call_made Spritepad
Questo è uno dei generatori di codice sprite CSS più semplici con una buona interfaccia. Gli sprite è una tecnica per ridurre drasticamente le richieste http al serve per velocizzare il caricamento di immagini. Con questo strumento si ottiene una mappa sprite pulita che può essere popolata con le immagini più pertinenti. Dispone automaticamente l'immagine e crea il sprite corrispondente con il codice CSS associato pronto per l'uso. Basta caricare l'immagine sprite generata e copiare incollare il codice CSS per utilizzare la navigazione basata su sprite.


call_made Ultimate CSS Gradient Generator
Con l'avvento dei CSS3 e dei browser moderni, l'uso dei gradienti nei colori è abbastanza comune tra i web designer. Il problema più grande, durante la scrittura manuale del codice CSS è sperimentare gli effetti visivi fornendo valori diversi. Questo pratico strumento consente di creare diversi tipi di motivi sfumati tramite i controlli punta e clicca. Genera anche codice CSS specifico per rendere il tuo web design compatibile con tutti i principali browser.



» Inizio pagina





Download software




save_alt CSS Menu Generator
Programma che permette in maniera visuale di generare menu in codice CSS e XHTML. Disponibile una versione a pagamento con più funzionalità.
Ultima versione del 2010.
Giudizio: starstarstar_borderstar_borderstar_border 2/5
Lingua: ENG
Software portatile: no
Sistemi operativi: Windows
Licenza: freeware (gratis per uso personale)


save_alt Dust-Me Selectors
Estensione per Firefox (versione 1.5 o superiori) per troare selettori CSS non usati. Questo plug-in estrae tutte le regole dei fogli di stile della pagina web che state navigando, analizza la pagina e trova i selettori CSS che non sono stati utilizzati.
Giudizio: starstarstar_borderstar_borderstar_border 2/5
Lingua: ENG
Software portatile: n/d
Sistemi operativi: Windows
Licenza: freeware (gratis)


save_alt Free CSS Toolbox
Editor di testo specializzato specifico per i CSS. Include una serie di strumenti di aiuto che consentono un rapido sviluppo del foglio di stile. Tra le tante funzioni: CSS Formatter che formatta in modo leggibile qualsiasi foglio di stile, anche già scritto; CSS Validator che controlla la correttezza di quanto scritto e l’auto completamento che aiuta nella stesura del codice; compressore di fogli di stile che riesce a comprimere il CSS fino al 70%.
Giudizio: starstarstarstar_borderstar_border 3/5
Lingua: ENG
Software portatile: n/d
Sistemi operativi: Windows 2000 2003 XP Vista
Licenza: freeware (gratis)


save_alt Topstyle Lite 3.5 via Softpedia
Editor di CSS / XHTML e HTML. Assolutamente consigliato se dovete mettere mano a file CSS. Disponibile la versione 4 a pagamento.
Giudizio: starstarstar_borderstar_borderstar_border 2/5
Lingua: ENG
Software portatile: n/d
Sistemi operativi: Windows
Licenza: freeware (gratis)


save_alt SimpleCSS
Con questo programma e' possibile creare ex-novo un foglio di stile, oppure importarne uno già esistente per modificarlo a piacimento.
Ultima versione del 2016.
Giudizio: starstarstarstar_halfstar_border 3,5/5
Lingua: ENG
Software portatile: no
Sistemi operativi: MacOs - Windows
Licenza: freeware (gratis)


» Inizio pagina





CSS Framework




I framework CSS sono delle raccolte di codice già pronte che aggiungono componenti, funzionalità e stili CSS ai tuoi progetti web. Sono utili per avere classi CSS sempre pronte senza dover metter mano ai propri fogli di stile.

save_alt Bulma
Bulma è un CSS framework basato su Flexbox e costruito con Sass. È contenuto un unico file scritto interamente in CSS. Nella pagina Bulma Documentation puoi trovare tutta la documentazione per l'utilizzo della libreria.
Licenza Open Source.


save_alt Getskeleton
Un framework minimalista che ti permette di definire il layout del sito. Inoltre puoi inserire tabelle, liste, form e media query. purtroppo non è più aggiornato da qualche anno.
Licenza open source.


save_alt LuxaCss
Luxacss ha l'obiettivo di fornirti una soluzione leggera che può essere implementata in qualunque progetto.
Con questo framework puoi inserire nel tuo progetto, navbar, form, paginazioni, tabelle, etc.
Licenza open source.


save_alt Minicss
Un framework per creare siti che si caricino velocemente anche su connessioni mobili. Le sue dimensioni ridotte (meno di 10 KB con compressione gzip), insieme alla sua griglia reattiva e ai componenti moderni garantiscono che gli utenti possano accedere al tuo sito web sempre e ovunque. Colmando il divario tra framework completi (ad esempio Bootstrap e Semantic UI) e micro framework (ad esempio Milligram e Pure.CSS), mini.css racchiude molte funzionalità in un piccolo pacchetto. MiniCSS si basa esclusivamente su CSS, il che significa che lo fai non devi preoccuparti di eventuali conflitti con altre librerie Javascript che potresti utilizzare.
Licenza open source.


save_alt Sass
SASS è un pre-processore di CSS, compatibile al 100% con la sintassi di quest'ultimi, che permette di lavorare con maggior semplicità e velocità sugli stessi. SASS non è un framework tipo Bootstrap. È una sorta di linguaggio con il quale puoi creare CSS e, volendo, interagire anche con framework CSS. In poche parole SASS affianca i framework, non li sostituisce.
Per ulteriori info ti consiglio di leggere l'articolo I 9 migliori framework CSS nel 2022 di Creativemotions.it.
Licenza open source.



» Inizio pagina




Conclusione




In questo articolo trovi alcuni strumenti per generare in maniera automatica codice CSS per velocizzare la stesura dei tuoi progetti web e librerie / framework per integrare funzionalità ai tuoi siti web.



» Inizio pagina



[H3Risorse selezionate dal webi


call_made 15 Powerful Tools to Automatically Generate CSS for Your Web Projects
(Freshtips.com)



» Inizio pagina



Altri articoli consigliati




  Download: Editor visuali per creare pagine web

  Download: Editor testuali, ASP, HTML, CSS, ecc.

  Servizi in rete e tool per Webmasters



» Inizio pagina



Giampietro Meneghelli
Lidweb.it
Ultimo aggiornamento: 28/01/2023



Tags: CSS, Framework, Editor, Programmazione






  Articolo precedente


12 Programmi per gestire database relazionali SQL

  Articolo successivo


Download utility per la gestione di database