Archivio della categoria ‘css’

Come creare fogli di stile css cross browser con CSSPrefixer

Scritto il 5 aprile 2011 da Pecciola - Categorie: ServiziWeb, css - 0 Commenti

11alwf7 Come creare fogli di stile css cross browser con CSSPrefixer

La creazione di un foglio di stile, soprattutto dopo l’avvento del nuovo standard CSS3, può risultare un qualcosa di noioso e ripetitivo.  Infatti, il CSS3 prevede molti nuovi elementi e proprietà (border-radius e box-shadow, tanto per citarne qualcuno) che non sono supportati in modo identico dai vari browser con la conseguente e noiosa attività di riscrivere ogni proprietà in modo diverso per i principali browser.

E se questo lavoro lo facesse qualcuno al posto nostro?

CSSPrefixer è un’applicazione web gratuita e senza obbligo di registrazione, capace di effettuare questa modifica automaticamente. Usarlo é davvero banale : digitate il selettore o la proprietà da convertire nella textarea di sinistra e cliccate sul pulsante  “process >>” per ottenere il codice riformulato per ogni browser a disposizione da copiare e incollare.

Direi che é davvero utilissimo! Provate a questo link

Editor css con validatore integrato : BradSoft TopStyle

Scritto il 20 marzo 2011 da Pecciola - Categorie: Software, css - 0 Commenti

242g28j Editor css con validatore integrato : BradSoft TopStyle

Nella specifica sezione dedicata al css ho spesso segnalato alcuni tools o editor interessanti. Questo di oggi, forse poco conosciuto anche dagli utenti più geek, credo vada provato almeno una volta. Sto parlando di un software totalmente in inglese e compatibile con i principali OS Windows, noto come TopStyle, sviluppato da BradSoft. E’ un programma  la cui quarta release risulta essere tra le più competitive nell’ambito della gestione dei file CSS.

Il suo punto di forza risiede nell’opportunità di editare i file uploadati all’interno del proprio spazio FTP, senza la necessità di doverli ogni volta downloadare e caricare, in quanto dispone di un sincronizzatore.

La sua interfaccia grafica è estremamente elementare e rende questo programma semplice da utilizzare, soprattutto nella modifica dei fogli di stile ‘om the fly’. Adatto, pertanto, a coloro che amano veder subito i risultati delle loro modifiche.

BradSoft TopStyle può in aggiunta contare su un elenco di tutte le classi, al punto da non avere affatto bisogno di dover sfogliare l’intero documento per cercare le parti su ci effettuare le modifiche. Pesa solo 5,35 megabyte, é shareware e potete scaricarlo da qui : BradSoft TopStyle.

Creare testo “warped” con CSS e HTML : CSS3Warp

Scritto il 15 marzo 2011 da Pecciola - Categorie: Html, ServiziWeb, css - 0 Commenti

2nw33vd Creare testo “warped” con CSS e HTML : CSS3Warp

CSS3Warp è un cosidetto ‘proof of concept’ ovvero a prova di concetto. Il servizio consente di sfruttare tutta una serie di innovative proprietà legate allo standard Css3 per  creare testo deformato che segue un percorso irregolare. Il tutto, in un codice finale che é puro CSS e HTML.

Infatti, si basa, come detto, su proprietà come : rotazione, inclinazione, matrice ecc, riuscendo ad applicare le trasformazioni corrette ad ogni singola lettera e potendo, così, creare l’illusione di testo che segue un percorso.

Utilizzarlo è decisamente semplice : occorre solo digitare il testo nel modulo web, fare clic su “Warp It!” e passare, quindi, a modificare il percorso come più si addice alle vostre esigenze.

È possibile allegare il testo in un cerchio, aggiungere o eliminare punti o anche cambiare posizione, l’angolo e il raggio del cerchio. Quando avrete finito, fate clic su “Genera codice” ed avrete bello e disponibile da copiare e incollare il CSS e l’HTML relativo.


Ottimizzare un blog per iPad e iPhone con Media Queries CSS3

Scritto il 13 gennaio 2011 da Pecciola - Categorie: Browser, css, iPad, iPhone - 0 Commenti

Simple-Media-Queries-Tester

( Immagine by Bueltge )

Non solo pc. Ormai, alla fine del 2010, possiamo affermare con sicurezza che gli strumenti con cui si naviga il web vanno ben oltre il classico computer o notebook. iPhone, iPad, Netbook son solo alcuni tra i devices più utilizzati per accedere alla rete ed ognuno con le sue caratteristiche, dimensioni e risoluzione.

Per cui, oggi come oggi, dopo aver creato un blog (o dopo aver apportato pesanti modifiche al layout) non è sufficiente testarlo sui vari browser, ma ormai é basilare testarne funzionalità ed altro anche sui vari devices o cellulari.

Ma come gestire, a livello di codice, tutta questa varietà? Via Javascript é possibile, ma questo implicherebbe codice a iosa. Esiste, invece, una particolare proprietà dei css3, media query, che consente di applicare gli stili giusti in relazione alla dimensione dello schermo del device che si connette al web.

Vediamo un esempio pratico in modo da comprendere bene il discorso.

<link type=”text/css” rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=http://pecciola.com/iPhone.css />

<link type=”text/css” rel=”stylesheet” media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px)” href=http://pecciola.com/iPad.css />

Cosa significa il codice qui sopra? Credo sia abbastanza intuitivo, ma meglio chiarire. Qualora vogliate fare in modo che venga caricato il foglio di stile corretto associato alla risoluzione dello schermo specifica, la proprietà media query consente proprio di poter creare due o più css diversi in modo da caricare quello corretto in relazione al valore di max-device-width

Impostando questo valore a 480 px, in automatico si sta dicendo che vogliamo associare iPhone.css proprio alla navigazione da iPhone (massima risoluzione schermo di 480 px) e lo stesso discorso vale per l’Ipad e relativo iPad.css

E’ possibile anche mettere in AND varie clausole, come notate dal codice relativo al css dell’iPad. Ma non é tutto. Infatti se possedete uno smartphone con il famoso chip (accelerometro) che permette al cellulare di sapere come é orientato (orizzontale o verticale) , potrete addirittura applicare stili diversi proprio a seconda dell’orientamento.

<link type=”text/css” rel=”stylesheet” media=”all and (orientation : portrait)” href=http://pecciola.com/portrait.css />

<link type=”text/css” rel=”stylesheet” media=”all and (orientation : landscape)” href=http://pecciola.com/landscape.css />

Anche se queste sono solo alcune delle possibili implicazioni delle media queries, ne avete già intuito le potenzialità e la snellezza del codice da adottare. Infine, molto utilizzate, ad esempio, anche per dotare la stampa delle pagine con stili diversi.

10 Ottimi Tutorials e Guide CSS3

Scritto il 7 gennaio 2011 da Pecciola - Categorie: css - 2 Commenti

Tra le carrellate che, ogni tanto, mi capita di scrivere e pubblicare, era rimasto poco sviluppato l’argomento CSS3.

L’argomento é stato affrontato sporadicamente anche se, nel caso dell’articolo dedicato a come creare menu di navigazione originali con CSS3 avrete già assaggiato le potenzialità di questo nuovo standard.

Eccovi, quindi, 10 ottime guide e tutorials CSS3 abbastanza recenti, molto utili per coloro che vogliono avvicinarsi al meglio a questo standard e realizzare qualcosa di interessante.

 

1. CSS3 Drop-Down Menu
In questo tutorial scritto da Guillaume Marty si impara come costruire un menu a discesa CSS utilizzando le caratteristiche CSS3. Soluzione efficace per visualizzare molti contenuti pur mantenendo un layout pulito.
Guarda le Demo

2. Creare Effetto Flip usando CSS3
In questo tutorial di Sam De Decker si impara come creare un effetto elegante flip semplicemente utilizzando la proprietà transform.
Guarda le Demo

3. CSS3 : Creare menu di navigazione animati a discesa
In questo tutorial di Eric Bannatyne potrete imparare a costruire un puro e semplice menu a tendina animato CSS3. Un vantaggio di questo metodo è che non è necessario un browser che supporti le transizioni CSS3 , il menu funziona benissimo essendo cross-browser.
Guarda le Demo

4. CSS3 : Creare pulsanti animati stile Bubble
Imparare a creare un utile set di bottoni animati con la potenza di CSS3 con sfondi e animazioni. Con questa guida, potrete facilmente trasformare qualsiasi link presente nella pagina in un pulsante animato in pochi click.
Guarda le Demo

5. CSS3 Slideup Boxes
In questo video tutorial by Chris Coyier verrà descritto come creare una semplice transizione in CSS3 per creare una slideup ovvero un “scatola effetto” al passaggio del mouse.
Guarda le Demo

6. Creare una rotazione 3D con CSS3
In questo tutorial di Dirk Weber si imparerà a costruire un packshot 3D in HTML e CSS applicando alcune regole CSS3. .
Guarda le Demo

7. CSS3 : Creare una Tab galleggiante con effetti di rollover
In questo tutorial facile da seguire by Matt Doyle verrà illustrato come utilizzare il CSS3 per creare effetti di rollover.
Guarda le Demo

8. CSS3 : Creare box con effetto shadow
Questo è un codice sorgente da Paul Farning che permette di creare un ‘box-shadow’ sfruttando alcune regole CSS3.
Guarda le Demo

 

Via cashrevelations

Creare effetto sfumatura online con CSS3 Gradient Tool

Scritto il 5 gennaio 2011 da Pecciola - Categorie: ServiziWeb, css - 0 Commenti

Se siete un minimo esperti di web design e progettazione siti web, il gradiente e la sfumature sono effetti molto spesso utilizzati per abbellire e arricchire il design in vari modi. Tutto questo, come ben sapete, é possibile anche con un tool come Photoshop, ma non tutti possono permettersi di averne uno oppure non tutti sanno [...]

I vantaggi del colore RGBA nel CSS3

Scritto il 20 dicembre 2010 da Pecciola - Categorie: Grafica, Html, css - 0 Commenti

( Immagine by Wikimedia ) La rivisitazione del css, sfociata nel nuovo standard css3 ha consentito una maggior flessibilità nella costruzione delle pagine web e anche una maggior disponibilità di effetti speciali. E’ il caso di questa piccola guida che intende spiegare come, utilizzando solo codice e senza scomodare alcun programma di grafica, sia possibile [...]

Comprimere css : 8 tools di compressione online

Scritto il 18 novembre 2010 da Pecciola - Categorie: css - 0 Commenti

Quando ho parlato di come comprimere file css con Gzip avevo in mente, come scopo finale, quello di far risparmiare banda e velocizzare il caricamento delle varie pagine web di un sito o blog. Per lo stesso scopo, vi propongo oggi, 8 tools di compressione per file css. Ma perché occorre comprimere un css? Qualcuno [...]