daniele rollo » css

Animatable: uno showcase di animazioni con CSS3

daniele — Thu, 03 Nov 2011 10:50:45 +0000

Lea Verou ha messo on line Animatable, uno showcase di animazioni applicate a elementi html. Tutto fatto con CSS. Date un’occhiata: animatable.

Animazioni CSS sulla pagina di iPhone 4s

daniele — Wed, 26 Oct 2011 16:08:30 +0000

La pagina di iPhone 4S sul sito Apple è in gran parte occupata da una presentazione animata che mostra le principali caratteristiche dello smartphone. Un bel modo di utilizzare le animazioni CSS e provare a realizzare uno slideshow decisamente più complesso e accattivante di quelli a cui siamo abituati.

John Ball ha creato una versione in miniatura della pagina, in cui sono visibili tutti gli elementi che di volta in volta vengono visualizzati e che aiuta a capire come sono stati pensate i vari movimenti e rotazioni. Date un’occhiata.

Pulsanti con pattern di sfondo, tutto con CSS3

daniele — Fri, 18 Feb 2011 11:04:20 +0000

Lea Verou in questo post ha spiegato una tecnica interessante per applicare semplici pattern su elementi html sfruttando CSS3.

La tecnica si basa sull’attributo color-stop che viene specificato per il gradiente: indicando due color-stop con la stessa posizione, è possibile ottenere un cambio improvviso di colore, anziché una graduale sfumatura.
Con questa tecnica, l’autrice del post mostra come ottenere pattern più complessi, come quello in stile picnic o a scacchiera.
A parte il risultato finale, il post è interessante anche per alcune scelte della webdesigner, come l’utilizzo di un color-stop trasparente, per sfruttare il colore di sfondo come fallback per i browser che non supportano i gradienti.

In questo Cross Browser CSS gradient buttons Red Team Design mostra come sfruttare la tecnica dei gradient pattern appena vista, insieme alle altre proprietà (RGBA color mode, Box shadow, Text shadow, Rounded corners) che si usano di solito per creare pulsanti con CSS3, per ottenere un risultato abbastanza particolare (proprio per via dei pattern).

Anche in questo caso grande attenzione alla compatibilità con i browser, visto l’utilizzo massiccio di proprietà non sempre supportate.

Ecco i due link:

Personalizzare la finestra di dialogo aperta dalla funzione CONFIRM

daniele — Wed, 09 Feb 2011 10:55:09 +0000

La funzione javascript CONFIRM apre una finestra di dialogo predefinita dal browser e restituisce true o false, rispettivamente se l’utente OK oppure ANNULLA. l’aspetto della finestra è quello previsto dal browser che l’utente sta utilizzando.

Nulla contro le impostazioni di default del browser, ma, se serve, questo comportamenteo può essere modificato con Javascript e l’aspetto della finestra può essere personalizzato attraverso i fogli di stile.

trovate il tutorial e il relativo plugin per personalizzare questa finestra di dialogo su tutorialzine: How to Create a jQuery Confirm Dialog Replacement

Tre modelli per layout liquido a tre colonne

daniele — Mon, 30 Jun 2008 21:44:13 +0000

Matthew James Taylor mette a disposizione tre modelli di pagina html a tre colonne con layout liquido, pronti per l’uso. L’autore per comodità di pubblicazione ha inserito il foglio di stile nell’html… non sarà una cattiva idea spostarlo in un CSS a parte.
Se ce ne fosse bisogno, vi ricordo che il layout liquido è quel layout che si estende ed occupa tutta la finestra del browser, a prescindere dalle dimensioni di quest’ultima e dalla risoluzione.

Ecco il link: The Perfect ‘Blog Style’ 3 Column Liquid Layout. Troverete i modelli per un layout liquido con larghezze in percentuale, in em, oppure con le colonne di dimensione fissa in pixel.
Un ottimo risorsa da tenere nel cassetto, e utilizzare, modificare, adattare tutte le volte in cui dovrete realizzare un sito internet o un blog con layout a tre colonne.

Media=”print”, non dimenticare i fogli di stile per la stampa

daniele — Thu, 05 Jun 2008 18:01:26 +0000

Questo post di Massimiliano Sforza su Edit, ci ricorda che, per quanto i contenuti testuali che produciamo per il nostro sito o blog, siano pensati progettati e creati per una vita sullo schermo, è sempre probabile che finiscano per essere stampati.
Per questo motivo è necessario predisporre il nostro sito in modo che sia leggibile anche su carta.

Ecco allora come specificare un foglio di stile per la stampa all’interno del tag :

All’interno di del file PRINT.CSS basterà specificare alcune semplici regole.
Innanzitutto rendiamo invisibili quegli elementi che fuori dallo schermo non hanno una funzione, come per esempio un menu o addirittura l’intera sidebar o l’header:

#header, #menu, #sidebar { display: none;}

Poi impostiamo il tag , specificando sfondo della pagina, colore del testo, dimensione e tipo di font da utilizzare:

body{
background: white;
font-family: Georgia, serif;	
font-size: 12pt;
color: black;}

Quindi passiamo a dimensioni e margini degli elementi che contengono il testo: ammesso che quest’ultimo si trovi all’interno del div “content”, a sua volta inserito dentro ad un div “container”, una soluzione può essere quella di impostare il padding per il primo e la larghezza per il secondo:

#container {#width: 100%;}
#content {#padding: 10px;}

Infine, qualcosa che tornerà decisamente utile agli utenti che stanno leggendo il nostro sito su carta, sperando che abbiano stampato usando un browser degno di questo nome. Impostiamo il foglio di stile in modo che gli indirizzi a cui puntano i link (i quali evidentemente non potranno essere cliccati…) compaiano per esteso tra parentesi quadre dopo che è stato riportato il link stesso:

a:link:after, a:visited:after {content:" [" attr(href) "] "; }

Ed ecco questo elementare foglio di stile per intero:

body{
background: white;
font-family: Georgia, serif;	
font-size: 12pt;
color: black;}

#container {#width: 100%;}
#content {#padding: 10px;}

a:link:after, a:visited:after {content:" [" attr(href) "] "; }

Evidentemente, queste poche regole potranno essere completate con altre legate ad aspetti specifici del nostro html, e saranno inoltre integrate in maniera decisiva dal markup utilizzato per i contenuti. In particolare non dovremo (ancora una volta) trascurare i tag H1, H2 o H3, ecc., che anche se non specificati nel CSS, avranno l’aspetto che il browser assegna loro di default, e contribuiranno a rendere leggibile e piacevole la nostra pagina.

Come al solito, se non siete d’accordo su qualcosa, o avete suggerimenti, vi aspetto nei commenti…

Qualche link utile:
http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
http://www.alistapart.com/stories/goingtoprint/
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Editor visuali WYSWYG javascript all’interno del tuo sito web

daniele — Mon, 17 Mar 2008 12:00:45 +0000

Webdistortion stila una lista delle principali librerie javascript per trasformare una semplice textarea in un editor di testo visuale all’interno di una pagina web. Da TinyMCE a FCKeditor, dall’editor della Yahoo User Interface a Niceedit: c’è solo l’imbarazzo della scelta. Queste librerie si rivelano veramente utili grazie al fatto che sono altamente personalizzabili dal webdeveloper. Non solo: grazie alla presenza in rete di una serie di componenti aggiuntivi che ne estendono le funzionalità, abbiamo a disposione strumenti veramente potenti per permettere all’utente di inserire nel sito quello che vuole come vuole.
Ma è questo quello che noi vogliamo veramente? L’utilizzo prevalente degli editor visuali avviene a livello di CMS per aiutare chi amministra il sito a inserire testo ben formattato, che risulti gradevole all’utente finale.
A mio avviso, questi strumenti devono essere assolutamente “ponderati” (e non è certo difficile , visto l’alto grado di personalizzazione che possiamo raggiungere): lasciamo a disposizione le funzioni veramente necessarie (a seconda del tipo di sito e delle esigenze di chi lo amministra), in modo da permettere all’amministratore il giusto controllo su testi, link e immagini, ma non eliminiamo quelle opzioni che lasciando troppa libertà all’amministratore potrebbero compromettere le scelte stilistiche che riteniamo fondamentali per il nostro design.

Fogli di stile per la stampa

daniele — Thu, 13 Mar 2008 09:17:43 +0000

photo credit: Hanataro

CSS per la stampa: un aspetto troppo spesso trascurato dai webdesigner, ma di fondamentale importanza.
Su Csstricks troviamo un semplice Css che imposta gli aspetti fondamentali per il layout del nostro sito una volta stampato.
La priorità fondamentale per l’autore è rendere il documento leggibile, il più possibile. Per questo cerca di utilizzare tutto lo spazio a disposizione sulla pagina impostando un font serif e la largezza del contenitore principale a 100% ed escludendo dalla stampa gli elementi secondari rispetto al contenuto della pagina, come sidebar header e footer.

Poche regole precise, quelle elencate: il css in questione infatti si affida agli stili di default del browser. Nel caso della stampa questa fiducia è ben riposta, spiega csstricks, ma a patto che il markup dell’html sia corretto.

Link: CSS-Tricks Finally Gets A Print Stylesheet

Proteggere le proprie foto sul web con i css

daniele — Mon, 25 Feb 2008 08:10:03 +0000

Esistono vari modi più o meno invasivi ed efficaci per proteggere le immagini e le fotografie pubblicate su un sito internet. Derek Powazek, suggerisce una tecnica basata sui css.

Si modifica l’immagine originale in modo da aggiungere una parte contenente licenza d’uso della foto, credits, e contatti dell’autore.
Nella pagina html si inserisce un elemento div con le dimensioni dell’immagine originale, quindi priva delle aggiunte. Si applica come sfondo del DIV l’immagine contentente la parte con le avvertenze. Quest’ultima in realtà non viene visualizzata nella pagina web, perchè il div contenitore ha dimensioni pari all’immagine originale. Il disclaimer compare solo quando l’utente prova a scaricarla.

In questo modo si complica la vita a chi vuole scaricare l’immagine: all’utente non sarà più sufficiente un click con il tasto destro per ottenere il file. Anche quando l’avrà ottenuto dovrà utilizzare un software per eliminare il disclaimer in fondo all’immagine.
Inoltre, Come sottolinea lo stesso Powazek, si mettono in risalto gli usi legittimi che l’utente può fare dell’immagine, grazie all’eventuale licenza creative commons.

Resta, ovviamente, una via anomala, e quindi eccezionale, di pubblicazione delle foto: si perdono infatti gli attributi alt e title, oltre che la possibilità di linkare l’immagine.