Della opacità, secondo intervento

Abbiamo visto come giocare con le immagini e i link, in modo da renderli trasparenti in maniera “sensibile” al nostro mouse. Ora, facciamo un ulteriore passo, manipolando testo e sfondo di un DIV, in per ottenere effetti tipografici.

Gli effetti di trasparenza applicati al testo

Iniziamo con l’applicare diversi gradi di opacità al testo, facendolo giocare sullo sfondo. Non è difficile.

L’opacità del testo

Se l’oggetto è un elemento contenitore, allora l’effetto risulta come se il contenuto dell’elemento contenitore venisse sfumato sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.

Questo testo è di colore nero, con un valore di opacità al 50%

Vediamo il codice utilizzato per ottenere questo effetto:

Da notare che abbiamo aggiunto width:100 dato che l’opacità funziona solo tramite il posizionamento o il layout indicato (in Internet Explorer). Un valore di width o height, un float o qualcosa d’altro che consenta al navigatore di elaborare un posizionamento attiverà l’effetto.

Definire l’opacità dello sfondo

Nero e Bianco

LO SFONDO E’ BIANCO
Lo sfondo è un elemento da tenere ben in considerazione nell’utilizzo dell’effetto di opacità. Se non utilizzassimo un colore di sfondo (noi abbiamo usato white), le estremità del testo potrebbero risultare seghettate. Impostare il colore a transparent non sempre funziona.

…questo assomiglia ad alcuni
titoli o sotto titoli che siamo abituati a vedere
in una
rivistaimpaginata…

DIV
Il testo qui sulla destra è un div in cui il testo è di colore black e lo sfondo white. L’opacità del div è 50 e width è a 150px.

SPAN
L’elemento span all’interno del div ha un’opacità a 25. Le estremità non dovrebbero risultare seghettate. Il padding a 10 pixel nello span è stato utilizzato per non perderci il fondo della g in rivistaimpaginata.

FUORIUSCITA DEL TESTO
Se forzato, il testo sforerà la larghezza di 150px e, naturalmente, i navigatori non gestiscono la fuoriuscita tutti allo stesso modo. Non preoccupiamoci dello sforamento e scriviamo rivistaimpaginata tutto attaccato, in modo da esplorare da vicino l’effetto di fuoriuscita.

Per ottenere questo tipo di impaginazione, copiate il seguente codice:

L’opacità del paragrafo

Rosso Mattone e Bianco

P
In questo esempio useremo il marcatore di Paragrafo

al posto del

. Il codice è lo stesso che abbiamo appena visto, solo abbiamo sostituito div con p e cambiato il colore da black a maroon.

…questo assomiglia ad alcuni titoli o sotto titoli che siamo abituati a vedere
in una rivistaimpaginata… Spaziatore da 150 pixel di larghezza

Il codice è lo stesso, solo abbiamo utilizzato il marcatore di paragrafo invece di quello del div. Alla fin fine, potrebbe addirittura risultare più semplice da comprendere per chi non è addentro alle complicazioni e idiosincrasie dei CSS.

Abbiamo utilizzato, per questo paragrafo, un bordo di 2px, nero a puntini, e lo stesso abbiamo fatto attorno all’area da 150px, qui sulla destra.

La larghezza che abbiamo definito per la trasparenza dei titoli è di 150 pixel, ma abbiamo intenzionalmente unito le parole rivistaimpaginata per mostrare che il testo non rimane necessariamente confinato nello spazio indicato.

Lo Spaziatore da 150 pixel di larghezza all’interno della parte destra del paragrafo mostra un’immagine che è larga esattamente 150 pixel: possiamo così vedere dove sarebbe finito il nostro paragrafo se non avessimo unito le parole rivistaimpaginata formando un testo troppo lungo per rimanere confinato.

Definire l’opacità nei CSS

Come facciamo a definire il carattere di opacità all’interno dei nostri CSS?

…questo è
lo stile p.pulltrans definito nel file stile1.css CSS che trovate qui
e può variare nel tempo…………..

P.pulltrans {
color:black;
width:150px;
background:white;
filter:alpha(opacity=50);-moz-opacity:.50;
opacity:.50;
float:right;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
font-size: 28px;
line-height:26px;
text-align: right;
}

Quello che vedete è un semplice ma flessibile stile CSS, definito come p.pulltrans nel file di stile esterno. Da notare che questo file va caricato insieme alla pagina tutte le volte che questa deve essere visualizzata al navigatore. Quindi, se pensate di usarlo molto spesso, inseritelo nel foglio di stile principale del vostro sito.

Il codice da copiare nella pagina html è molto semplice e non ci sono parti superflue, tant’è che probabilmente ci converrebbe utilizzarlo come stile in linea.

Per l’esempio dei titoli appena visti, abbiamo aggiunto un marcatore e un , mentre per dare un po’ di vivacità abbiamo introdotto la definizione style="color:navy" per superare aggirare il colore nero predefinito e avere un bel testo azzurro.

Il codice da inserire nella nostra pagina, sarà quindi:

Bene, per ora è tutto. Fate qualche esperimento, giocate un po’, magari andate a dare un’occhiata al sito da cui ho tradotto questa guida e fra qualche giorno ci risentiremo, per approfondire ulteriormente l’interazione fra testo e immagini per il tramite dell’opacità.

Windows OEM, basta al traffico degli hard disk!

Hard DiskCos’è Windows OEM (Original Equipment Manufacturer)?

Uhm…semplicemente delle copie di Windows sprovviste di scatola e manuale, destinate a chi vende PC e che costano molto meno delal versione per utente finale.

Avete presente i computer che comperate nei centri commerciali o nel negozio sotto casa? Si, proprio quelli che vengono mostrati accesi con Windows che gira in allegria.

Ok, costruttori che se ne fanno di scatole e manuali? A loro interessa pagare poco la licenza di Windows e darvi il computer funzionante, poi che voi non sappiate come usare il sistema operativo è un problema VOSTRO.

Ora, se io vado ad acquistare una copia di Windows per utente finale e confronto il prezzo con la copia OEM, non ci sono confronti. Quest’ultima è di gran lunga più conveniente, costa sensibilmente di meno.

E se volessi mettere una copia OEM sul mio computer? In fin dei conti, se comprassi un PC nuovo mi ritroverei comunque con un Windows senza manuali. Magari il computer già ce l’ho, a questo punto perché non caricarci sopra un bell’OEM?

Attenzione però: Microsoft non vende solo il sistema operativo in OEM, ma anche Office e se caricare un OS può interessare a pochi, avere la suite più famosa in circolazione e pagarla molto meno, beh questo può piacere a parecchia gente.

In effetti, i termini della licenza di acquisto di una copia OEM di Windows od Office implica che si deve acquistae anche (traduzione mia):

un componente hardware per computer che non sia una periferica.

Ed è questa dicitura che ha scatenato la tratta dei dischi rigidi e dei cavi di alimentazione.

Semplice. Basta vendere uno dei due prodotti insieme a un cavo per rispettare la licenza. In origine, ovviamente, la licenza avrebbe dovuto consentire solo agli assemblatori di potere acquistare un copia di Windows o Microsoft OEM. Giustamente: se acquisto un pezzo di computer che non sia una scheda audio o video, ma un componente essenziale come un disco rigido o una CPU, questo sta a significare che molto probabilmente ho un PC in costruzione e quindi sono un assemblatore.

Già…peccato che anche un cavo di alimentazione sia un pezzo per computer e NON sia una periferica.

Ergo, parecchia gente, tra commercianti tradizionali e ebayer, vendono prodotti Microsoft a prezzi parecchio scontati, senza infrangere formalmente alcuna licenza Microsoft, ma andando contro la sostanza della licenza stessa.

Microsoft, però, ha appena cambiato i termini della licenza (link ad accesso riservato unicamente ai membri del programma System Builder), che ora consente ai rivenditori di distribuire le confezioni di Windows e Office non aperte ai “system builder” (i costruttori di PC), senza più dovere associare parti sfuse di computer (traduzione mia):

Se non aprite la confezione, potete redistribuirla ad altri costruttori di sistemi senza alcun hardware.

La parte più interessante della nuova licenza, però, consiste nella identificazione dei “system builder”, cui vengono associati ora anche gli hobbisti e chiunque si voglia costruire un PC in casa (traduzione mia):

Le confezioni di programmi per OEM system builder sono da intendersi UNICAMENTE per costruttori o assemblatori di PC e server. A meno che l’utente finale stia realmente assemblando il proptio PC, nel cui caso questo utente è parimenti considerato un system builder.

Allora, miei cari, fate un gesto etico e contribuite a fermare questa ignobile tratta di dischi e cavi: costruitevi da soli il vostro PC e richiedete una copia di Windows od Office per OEM!

Farete un gesto caritatevole e risparmierete dei bei soldoni!

Notizia riportata via Edbott.com.

Cucina alternativa? Pedalare gente, pedalare

Rimasti a corto di gas? State pensando a una cena romantica e sul più bello sparisce anche la corrente elettica? Niente microonde, forno a convezione, niente di niente?

Un incubo!

Rimanete ben fermi davanti allo specchio!

Calma, con un centinaio di dollari si risolve tutto. Armati di un buona dose di coraggio è sempre possibile ordinare da Terra.org una stupenda cucina solare, in grado di risolvere qualsiasi problema di cottura, sempre che non abitiate in Val Padana o nelle Highlands scozzesi…

Bello eh, per carità. Certo, non proprio pratico: con il modello più piccolo KSOL-10, vi fare una macchinetta di caffé per 6 in 10 minuti. Il problema, occhio è croce è prendere la macchinetta, chi ha il coraggio di infilare la mano nel centro dello specchio ustorio?

Il modello più grande, KSOL-14 (153 euro), equivale a un fornello in vetroceramica da 600W , ha un diametro di 1,4 mt, pesa 19 Kg, struttura in acero e ve lo dovete montare a manina. Certo, però, che dopo potrete dare dei pranzi (le cene meglio evitarle, vero?) equo solidali radical chic: vi ci vorranno sempre quei 9 minuti per portare a ebollizione un litro d’acqua, quindi meglio non avere più di una decina di invitati, però, volete mettere la bellezza di un forno a 200 gradi montato in terrazza? Nel caso, proprio per essere in tono, consiglierei l’acquisto della relativa pentola da 12 litri, 28 cm di diametro, che per soli 26 euro con il suo colore nero profondo aiuterà a velocizzare la cottura e a mantenere quell’atmosfera etnica che tanto piace nelle festicciole contemporanee.

Pedalare gente, pedalare

Essere radical, ecological chic è un impiego a tempo pieno: è impensabile offrire un pranzetto alla luce del forno solare, per poi mettere sotto carica i cellulari in vista di una biciclettata post prandiale con gli amici.

ORRORE.

No, no, no, non si fa così. Forza, tutti a munirsi di Pedal Power, uno stupendo accrocchio che ricorda le vecchie luci da bicicletta, con la dinamo attaccata al copertone a ruotare follemente per una fioca lucina da sfoggiare davanti al manubrio.

La dinamo è rimasta, solo che al posto della lampadina ci sono uno spinotto e un porta telefono da agganciare al manubrio: pedalando per 70 minuti a 19 Kmh questo aggeggino vi ricarica tranquillamente il cellulare, mentre per percorsi più brevi e velocità minori, contribuirà a mantenere alta la carica del telefonino.

Insomma, con 38 euro non dovrete più spendere una lira per ricaricare le batterie del telefono.

Giusto farvi il giro del mondo.

L’ora fugge e non si ritrova

Il tempo riveste, nella nostra società, un aspetto mitico, implacabile, ineluttabile, una corsa senza tempo verso il tempo della fine. Insomma, date tempo al tempo e vi ritroverete senza tempo.

Giusto, non vi pare?

Urge, quindi, tenere sott’occhio il tempo per impedirgli strani giochetti, scherzetti, frizzi, lazzi e motivetti, insomma, vi serve un orologio che vi dica l’ora dell’ora del presente.

Se siete rimasti indietro con l’orologio, sospesi fra il presente e gli anni ’70, non potrà che piacervi lo stupendo orologio a L.E.D. qui sotto, molto retrò e decisamente poco pratico:

Orologio Diode

Tradizionalmente metallico, con dei bellissimo diodi rossi (quanto li adoro), DIODE della Saishin arriva direttamente direttamente dal Giappone con ben 84 punti luminosi sul quadrante. Luminosi? Si, tanto da poter essere facilmente visti anche in pieno giorno.

Ma come leggerlo? Allora…i diodi si illuminano uno dietro l’altro fino a quando raggiungono l’altezza dell’ora e dei minuti indicati, per poi fermarsi un attimo e ridiscendere a zero. Molto Hi-Tech, nemmeno troppo difficile.

Unixsex, ooops, unisex, l’orologio misura 3,5 cm quadrati e fa il suo bell’effetto fashion vintage al polso della persona più ricercata, come a quello del più imbranato.

E dire che non costa nemmeno troppo…102.58 euro. Ahem…insomma…meno di un Cartier…accattatevillo.

Orologio Star Performer

Preferite qualcosa di più criptico? Più matrixiano, colorato, puffettoso e anni ’80?

Allora, Star Performer di Pimp è l’orologio per il vostro polso.

Piccolo corso per capire cosa accade sullo schermo dell’orologio (quando ci vuole, ci vuole):

L’orologio mostra le funzioni attivate, illuminando il numero nella colonna relativa. Ad, esempio, nella foto in questa pagina, l’orologio mostra le 06:02 PM. Da notare che l’ora pomeridiana è indicata dallo chiccosissimo bicchiere di Martini in alto, illuminato.

Le quattro icone nella prima riga in alto, indicano le modalità selezionate e rappresentano un Orologio, il Sole, il segno del dollaro $ e un bicchiere di Martini.

L’orologio rappresenta l’ora e, in modalità 12 ore, viene coadiuvato dal bicchiere di Martini per indicare il Post Meridiam.

Il sole rappresenta il giorno e la data: le cifre dall’1 al 7, sulla sinistra indicano i giorni, ovvero l’1 è la Domenica e il 7 il Sabato, fate voi per i giorni nel mezzo. Le due colonne a sinistra rappresentano, per infine, i giorni.

L’icona del dollaro $ rappresenta l’anno e suggerisce la speranza di fare sempre più soldi, anno dopo anno.

E, infine, la modalità Pimp, che accende tutte le luci come in un carosello, attiva automaticamente alle 7 del pomeriggio fino all’1 del mattino. E nemmeno potete disattivarla…Numeri e icone che si accendono e spengono, quasi che l’orologio fosse impazzito…notevole.

Altra bizzarria, se dall’1 AM fino alle 7 PM premete il tasto per visualizzare l’ora, l’orologio si accenderà ogni minuto, per 12 minuti.

Misure: 2,9 cm di larghezza, 5,5 di lunghezza e 1.1 cm di spessore.

Andatelo a prendere qui, l’unico posto a rivenderlo fuori Giappone. Ah, costa solo 118.08 euro.