CSS, Web

Show your ‹body›

Ieri –9 aprile– è stato il giorno del nudo integrale in rete, il CSS naked day.

Io l’ho scoperto per caso leggendo i miei feed una volta tornato a casa dal lavoro: scopo dell’iniziativa è svestire il tuo <body> da tutti quegli orpelli e suppellettili “quasi” inutili, ovvero i CSS o cascading style sheet, il tutto per promuovere gli standard e l’accessibilità in rete, perché un sito bello rimane tale anche se svestito, no?

Andate a vederne qualcuno, anche se sarà ritornato ad indossare i soliti, vecchi, banali abiti di sempre… (ho fatto qualche screenshot qua e là dalla lista degli aderenti all’iniziativa).

css-naked-day-1
Continua a leggere

Standard
CSS, Design, Software, Web

WP “fixed” bar

Ieri sera, dopo aver letto questo articolo, ho suggerito allo staff di WordPress di rendere la barra (visibile di seguito) fluttuante sulla pagina tramite la classe CSS “position: fixed;“.

In tal modo si avrebbe sempre disponibili sotto mano le opzioni in essa collocate, anche se si scrolla la pagina verso il basso.

Oggi mi è stato risposto che la miglioria è interessante e sarà sottoposta a valutazione da parte dello staff.
Sono curioso di vedere quanto tempo occorrerà per attualizzare tale suggerimento (tra l’altro non capisco perché nessun’altro ci avesse già pensato?!).

Mi spiace solo per gli utenti di Internet Explorer < 7 per cui tale miglioria potrà essere resa possibile solo tramite degli hack al codice, come si evince dai numerosi esempi (a tal riguardo devo ritrovare un interessante articolo secondo cui lo il team di sviluppo di IE8 avrebbe chiesto agli utenti di rendere i propri siti compatibili con il prossimo browser).
Standard
CSS, Design, Grafica

CSS Homer

Questo non potevo non segnalarlo, è troppo bello: un Homer competamente disegnato attraverso i caratteri tipografici di varie dimensioni e colori.

Nella versione copia–incolla qui di seguito si riescono a riconoscere alcune parti che altrimenti per utenti non esperti rimarrebbero “invisibili”.

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(
-

Potenza dei CSS! (vecchio articolo 1 e 2)

[grazie a <edit>]
Standard
Blog, Browser, CSS, Tutorial

IEblog

Stavo leggendo <edit> e solo adesso capisco perché IE non supporta bene CSS, Javascript e tant’altro, crasha di continuo, non è esteticamente bello… va bhè, non voglio infierire: Davide ha già vinto contro Golia da molto tempo…

Comunquesia, se gli standard a cui sono abituati quelli di Microsoft sono i siti glitterati di Myspace e –sotto– il blog ufficiale di Internet Explorer, allora capisco perché questo è così scarsino.
E non ditemi che “è bello”: fa paura!

ieblog.png

Voglio proporvi altre cose, queste veramente belle, che gli utenti del suddetto browser (IE6) non potranno mai godersi appieno.

Per primo, la parallasse.
Per chi non sapesse cosa sia, il consiglio è quello di andare un po’ a giocare con i vecchi videogiochi in cui lo sfondo si muove più lentamente del livello su cui si trova il protagonista.

Capito cosa si intende? Ora guardate il sito SilverBack… il consiglio è quello di ridimensionare manualmente la finestra del browser dall’angolo che di solito si trova in basso a destra.

La spiegazione per poterlo realizzare da queste parti.

Per secondo, godetevi l’elegante soluzione, visibile su Justin Kropp o su HickDesign, che permette di aggiungere un bordo al sito, conferendogli una parvenza che a me richiama molto l’aspetto di un giornale.

bordogiornale.png

A questo sito per la spiegazione in parole povere.


IE7 fa quasi tutto quello che deve fare, il 6 non lo fa. E “Microsoft non vuole rinunciare ai moltissimi utilizzatori delle versioni precedenti del proprio prodotto“, come appare scritto su <edit>: ma questo è un errore! Certo che non deve rinunciare agli utenti che usano IE, storico browser che ha pure dato il nome all’interfaccia di navigazione di Windows, ma che almeno permetta a tali utenti di aggiornarlo con una versione pienamente funzionante.

Standard
CSS, Web

CSS Sketcher

Altro esempio della bellezza e delle utilità (ancora tutte da scoprire) della potenza dei CSS:

Pure CSS Sketcher

css-sketcher.png
Il precedente esempio: selezionando il testo compare l’immagine (colore del testo e dello sfondo sono resi uguali tramite i CSS)

css-google.png

Se volete provare da voi potete fare qualche tentativo su Text + Image + CSS3 = CrazyDelicious.

css-bbrr.png

Standard
CSS

CSS power–up

Leggevo stamani di ciò che ha trovato Emaaa sugli affascinanti CSS.

Peccato che mi tocca reindirizzarvi senza potervi mostrare direttamente quello che si può fare con un po’ di sanissima conoscenza dei CSS, uno script come il seguente –per la generazione automatica di “immagini” composte da caratteri tipografici– e una semplice selezione.

Pensate ai risvolti di immagine che può avere una soluzione del genere all’interno di blocchi di testo.

Qualcuno ci aveva già pensato con cose del genere che sotto capodanno sono fioccate…

Ad esempio mi viene in mente il sito di un qualsiasi giornale cartaceo, spesso citati dai blogger… quando stai per fare il copia–incola, ecco che compare una immagine, –certo un po’ pixelosa, ma non si può mica scrivere in 1px di altezza che non si leggerebbe niente– ma anche una pubblicità.

Ecco, qui il territorio si fa un po’ impervio e mi fermo: mi sono già divertito abbastanza a buttare il sasso, non che voglia nascondere la mano, ma per questo genere di ricerche la pratica è la cosa migliore, no?

Ah! dimenticavo… Firefox e Safari vedranno tutto benissimo, Internet Explorer un po’ meno… anzi, nulla! anche la versione 7… sigh!
Standard