mercoledì, dicembre 31, 2008

Come migliorare le immagini con Internet Explorer

Internet Explorer è da sempre la gioia degli sviluppatori incompetenti e la croce di quelli che invece ne sanno. Il motivo è che permette di scrivere codice a capocchia e più o meno le cose funzionano ma nello stesso tempo non implementa correttamente un sacco di aggeggi e questo può essere parecchio fastidioso.

Ho trovato questo articolo: Code: Flickr Developer Blog - On UI Quality (The Little Things): Client-side Image Resizing
Dato che è in inglese ve lo riassumo.

I browser "moderni" usano la "interpolazione bicubica" per ridisegnare le immagini quando vengono "scalate" all'interno di una pagina, cioè quando la loro dimensione originaria viene cambiata dal browser. IE7 invece no, quindi la qualità di queste immagini risulta inferiore a meno che non specifichiate questa proprietà via CSS:

img { -ms-interpolation-mode:bicubic; }

Ma in IE6 e precedenti non funziona quindi bisogna usare il "AlphaImageLoader Filter", cioè:
<div style="width:320px;height:320px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagename.gif', sizingMethod='scale');"></div>

Questo mette come "sfondo" del div di 320x320px l'immagine scalata.
Nota: questo "filtro" si usa anche per ottenere la trasparenza con le immagini PNG in IE. Bella roba eh?

domenica, dicembre 28, 2008

Martina a quattro mesi


Martina si sveglia


Martina con lo zio Lorenzo


Martina col papà Guido e la nonna Nada


Pappa

martedì, dicembre 16, 2008

Aggiungere ombra al testo con CSS

Ho scoperto da poco questa proprietà CSS: w3c.org - CSS2: text-shadow

Esempio:
Do you see the shadow?


Codice copia&incolla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
div#ombra {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 32px;
text-shadow: 3px 3px 8px #708090;
}
-->
</style>
</head>

<body>

<div id="ombra">Do you see the shadow?</div>

</body>
</html>

Questa proprietà NON è supportata da:
IE6 e superiori e da Firefox fino a 3.0 (testato).
E' invece supportata da:
Firefox 3.1, Opera 9.62 (testato).
Probabilmente è anche supportata da Safari 2 e superiori (non testato).

lunedì, dicembre 08, 2008

Museo Fotografia Contemporanea

Non tutti sanno che... a Cinisello Balsamo c'è il Museo di Fotografia Contemporanea, ricavato in un'ala di Villa Ghirlanda, antica villa signorile acquisita in passato dal Comune.
Eccovi il sito: MFC // Museo.
Mi dispiace, non so chi abbia realizzato il sito ma è semplicemente inguardabile, al solito. Spero che almeno glielo abbiano fatto a titolo gratuito altrimenti è un furto.

Nota a margine: in questo weekend è stata inaugurata la linea "metro tramviaria" che provenendo dall'asse di Viale Zara, costeggiando Parco Nord, entra nel centro di Cinisello. In futuro mi riprometto di fotografare l'effetto finale dell'opera.