Della opacità

Zarrelli il domenica, 16 Ottobre, 2005

Sul sito di Mandarin Design, trovo un’interessante digressione su come utilizzare l’alfa blending nei css in modo da giocare con gli effetti di trasparenza.

Purtroppo, solo per Mozilla (anche Firefox) e Internet Explorer.

L’opacità può essere considerata come un’operazione di post processazione, ovvero dopo che un elemento è stato disegnato a video, il valore di opacità determina quanto quest’ultimo venga sfumato all’inteno di una immagine composita. Il valore di opacità attribuito tramite i CSS a un elemento può andare da 0.0 (trasparenza completa) a 1.0 (opacità completa) e ogni numero al di fuori di quest’arco verrà riportato al suo interno. Se l’oggetto è un elemento contenitore, l’effetto sarà applicato ai suoi contenuti come se venissero sfumati sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.

Qualche esempio

Il punto di partenza sarà la mia immagine in formato manga, giusto per avere qualcosa di brutto che non possa essere ulteriormente peggiorato dai nostri esperimenti:

Ora, giochiamo un po’.

Iniziamo a sfumare

Prendiamo l’immagine precedente e mettiamola in una serie di sfumature, partendo da un’opacità al 25% e salendo di 25% ogni volta:

Simpatico, vero? Ecco il codice che potrete inserire nelle vostre pagine e adattare:

Da notare che è stato utilizzato del codice specifico per il browser Mozilla moz-opacity, che con Firefox non si rende necessario. Meglio, comunque, utilizzarlo per una piena compatibilità con le versioni più vecchie di Mozilla.

Opacizziamo al passaggio del mouse

Definiamo alcune classi CSS che ci consentano di modificare l’opacità degli oggetti al passaggio del mouse:


E ora creiamo un testo in un div che ci consenta di gestire il passaggio del mouse:


Ora, l’effetto ottenuto sarà il seguente:

Passaci sopra con il mouse…Devi avere Mozilla o IE

Invertiamo l’attributo di partenza del div, e utiliziamo la classe transON, passando poi a transOFF

Passaci sopra con il mouse…Devi avere Mozilla o IE

Opacizziamo le immagini al passaggio del mouse

Applichiamo quanto finora visto alle immagini:

trans25
transON
trans75

Il relativo codice è:


Opacizziamo immagini e testo

Proviamo ad applicare la trasparenza contemporaneamente sia a immagini che al testo.

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 25%

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 50%

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 75%

Il relativo codice è:


Immagini opacizzate e link ipertestuali

Complichiamo un po’ le cose e proviamo a creare una immagine, che cambi opacità al passaggio del mouse e che funga anche da collegamento ipertestuale. Iniziamo con il creare un paio di stili ad hoc:


E adesso è il momento di inserire il seguente codice nella pagina html:


Fatto? Ok, il risultato è…

Decisamente interessante. Non rimane ora che fare qualche prova, in attesa della seconda puntata sulla trasparenza con i CSS, nella quale verranno affrontati applicazioni dell’opacità davvero attraenti.

GeekSquare – Top of the week

Zarrelli il domenica, 16 Ottobre, 2005

  • 19 Ottobre, nuova presentazione di Apple – Le sorprese in casa Apple sembrano davvero non finire mai: il 19 Ottobre 2005 si terrà un’altra presentazione in quel di New York…
  • I nuovi iMac G5 sono bacati? – Ora…osservate meglio la tabella proiettata alle spalle di Steve Jobs…c’è un errore. Chi riesce a vederlo?
  • Ecco il nuovo iPod! – Pare che qualcuno sia riuscito a prendere un’immagine del nuovo iPod presentato ufficialmente proprio oggi da Apple. Non possiamo assicurarne la veridicità, è ancora troppo presto per avere dei riscontri ufficiali,..
  • Il primo web server su PSP – Non ci crederete, ma qui potete trovare una pagina web ospitata dal primo web server interamente gestito da una PSP…
  • Yahoo! Search cerca nei blog – da questa notte le ricerche si sono arricchite di risultati provenienti da blog, da Flickr, podcast e dai link My Web…
  • LG V9000, il primo cellulare con la TV – Il V9000 di LG, è l’unico cellulare in circolazione compatible DMB (Digital Multimedia Broadcasting), che vi permette di vedere la TV ovunque voi siate…
  • P*Phone, la cornetta per Skype – Parliamoci chiaro: i vari telefoni USB, microfoni, cuffie, sono carini, forse anche utili, ma non hanno il fascino di questa stupenda cornetta vecchio stile di Hulger…
  • Laptop a energia solare – Il Notepower Solar Laptop Computer Charger trasformerà i raggi solari in energia sufficiente alle vostre necessità lavorative…
  • Cucù digitale – Questo simpatico segna tempo nasconde un lettore MP3 in grado di riprodurre dieci ore di canti di uccelli olandesi…
  • Piercing USB – Appassionati di tatuaggi e piercing? Non sarete mica rimasti ai tribali, vero? Siete o non siete techno geek? Allora fatevi installare qualche porta USB, non si sa mai che in futuro possano tornarvi utili…

Top of the week

Zarrelli il domenica, 9 Ottobre, 2005

Settimana un po’ presa da GeekSquare e quindi un po’ esanime su queste pagine. Sto preparando un paio di novità da mettere online su queste pagine, ma mi ci vogliono ancora alcuni giorni. Per adesso, ecco la Top of the week di Geeksquare:

  • Mac in Flash – Appassionati di Mac ma non avete tempo, voglia e soldi da spendere in questi preziosi gioiellini alla moda? Ok, abbiamo la soluzione giusta per voi…
  • Televisore a microonde – Molto techno, decisamente trendy, il concept presentato da Whirlpool per il microonde prossimo venturo: uno schermo piatto inserito nello sportello frontale…
  • Benvenuto Google Reader beta! – Ancora novità dal web 2.0: Google ha appena annunciato un nuovo servizio che consente di creare online il proprio aggregatore personalizzato…
  • Wi-Fi e Bluetooth in una sola scheda – Credeteci o no, davvero nessuno ci aveva ancora pensato. Eppure l’idea è quasi banale: raggruppare in una sola scheda le due funzionalità più utilizzate in questo momento, Wi-Fi e Bluetooth. L’idea l’ha avuta MSI con Dual Net Card…
  • Duke Nukem Forever finalmente il 2 Dicembre! – Forse, forse, diciamo forse, uno dei titoli più attesi nella storia dei videogiochi arriverà nelle case dei suoi innumerevoli fan il 2 Dicembre. In sviluppo dal 1997 Duke Nukem Forever è stato via via annunciato e rimandato un gran numero di volte…
  • Kit per paranoici – Siete parano…err…ponete sempre molta attenzione alla riservatezza durante il vostro lavoro in ufficio? Questo mini kit vi darà tutti gli strumenti per combattere qualsiasi complotto plutocratico…
  • Doom The movie – Il trailer – Esce il 21 Ottobre nelle sale d’oltre oceano il film dedicato al gioco che ha segnato un’epoca, con tanto di mostri e assalti ripresi con una prospettiva in prima persona che immergerà i più nostalgici nelle atmosfere di questo classico del 1996…
  • Uncyclopedia, non ci credete? – Uncyclopedia è un’enciclopedia piena di disinformazione e di vere e proprie menzogne. E’ più o meno come il congresso o il Parlamento.
  • Apple gossip – Arriva l’iPod video? – …si affollano le voci non confermate, le rivelazioni, le notizie fornite da “fonti segrete ma attendibili” che, in questa occasione, sembrano concordi nell’anticipare l’ultima meraviglia della Mela: il vagheggiato iPod video da 60 giga,…
  • Account usa e getta – Se volete un account usa e getta, solo per ricevere posta in maniera anonima e senza correre il rischio di essere preda dello spam, fate un giro su dodgeit. Inventatevi un indirizzo a caso @dodgeit.com, datelo a chi volete vi spedisca un messaggio…
  • Gmail offre 2 Giga? 30Gigs ne offre… – Beh, facile da intuire, www.30gigs.com mette a disposizione dei propri utenti account da 30 Gigabyte…Ancora non siete soddisfatti? Va bene, puntate il navigatore su MailNation e fatevi una casella da 1 Terabyte…

Si scrive GeekSquare

Zarrelli il mercoledì, 5 Ottobre, 2005

GeekSquare Logo

Per il prossimo futuro il ritmo dei post su questo sito sarà rallentato. Perché? Beh, perché ho iniziato a scrivere per GeekSquare, un sito dedicato alla tecnologia, ai gadget e alle curiosità che giorno per giorno lancia veloci notizie dalle proprie pagine web.

Nel caso voleste leggermi quotidianamente, io sono la, per gli approfondimenti, le scervellaggini, e pensieri affini queste pagine sono a disposizione.

Longhorn fuori dalla finestra con vista…

Zarrelli il lunedì, 26 Settembre, 2005

Secondo questo interessante articolo di SmartOffice News, il codice di Longhorn è stato buttato alle ortiche da Allchin, co-direttore della divisione Prodotti Platform e servizi, per ripartire da uno stile di programmazione davvero nuovo per Microsoft: invece di sviluppare parti di codice separate, create da programmatori diversi e poi assemblate in un nuovo programma, si è deciso di partire alla “Linux way”. Come? Iniziando da un kernel minimale e aggiungendo di volta in volta le funzioni necessarie.

Riporto solo alcuni estratti dall’articolo:

Gli ingegneri di microsoft lo stavano costruendo (Longhorn, ndr.) proprio nel modo in cui avevano sempre creato programmi. Ogni singolo programmatore fra le migliaia (impiegate da Microsoft, ndr.), creava il proprio pezzo di codice, che veniva assemblato (insieme agli altri, ndr.), in un programma raffazzonato. Ma Longhorn/vista era troppo complesso: Microsoft doveva iniziare da capo, disse Allchin a Gates.

E quale è stato questo “nuovo inizio”?

Quindi, secondo (quanto riportato da, ndr.) il Wall Stret Journal, Microsoft percorse la strada di Linux, sviluppando prima un kernel solido per ciò che ora viene chiamato Vista. Ora, sta aggiungendo le funzionalità che desidera, una per una

E che dire di WinFS, il rivoluzionario filesystem di Windows prossimo venturo, che aiuterà a organizzare e recuperare le informazioni salvate nei supporti?

WinFS era così problematico che gli ingegneri iniziarono a discutere se fossero in grado di fa “volare il maiale”. Immagini di maiali con le ali iniziarono ad apparire nelle presentazioni e negli uffici.

Questo nuovo inizio potrebbe spiegare anche la riorganizzazione in seno a Microsoft…

La crisi di Longhorn aiuta a spiegare la radicale ristrutturazione che il CEO di Microsoft Steve Ballmer ha annunciato recentemente per riorganizzare la società in tre grandi unità aziendali. Un obbiettivo fondamentale è di forzare Microsoft a essere più agile nel produrre e distribuire il software.

Ma perché Microsoft incorre in questo genere di problemi? Possibile che si renda conto solo dopo averci messo mano che un programma è diventato ingestibile?

Le riforme di Allchin si rivolgono a un problema che Microsoft si porta dietro dagli inizi. La vecchia scuola di computer science poneva richiedeva pratiche di scrittura di codice metodiche per assicurarsi che i grandi computer usati dalle banche, dai governi e dagli scienziati non si bloccassero. Ma quando i personal computer spiccarono il volo negli anni ’80, le aziende come Microsoft non avevano tempo per tutto questo (per le pratiche di scrittura metodiche, ndr.). Gl utenti PC volevano delle funzionalità belle e utili in fretta. Tolleravano — o non notavano — i bachi che affliggevano il codice. I problemi potevano sempre essere corretti con una patch. Con ogni patch e ogni miglioramente, divenne più difficile allegare nuove funzionalità al software dato che il nuovo codice aveva effetti imprevedibili su tutto il resto.

Non male vero? Pigia e ripigia, il codice esplode…