{"id":95,"date":"2005-11-05T18:39:31","date_gmt":"2005-11-05T17:39:31","guid":{"rendered":"http:\/\/www.zarrelli.org\/new_blog\/?p=95"},"modified":"2005-11-05T18:39:31","modified_gmt":"2005-11-05T17:39:31","slug":"della-opacita-secondo-intervento","status":"publish","type":"post","link":"https:\/\/www.zarrelli.org\/blog\/della-opacita-secondo-intervento\/","title":{"rendered":"Della opacit\u00e0, secondo intervento"},"content":{"rendered":"<p>Abbiamo visto come giocare con le immagini e i link, in modo da renderli trasparenti in maniera &#8220;sensibile&#8221; al nostro mouse. Ora, facciamo un ulteriore passo, manipolando testo e sfondo di un <code>DIV<\/code>, in per ottenere effetti tipografici.<\/p>\n<h2>Gli effetti di trasparenza applicati al testo<\/h2>\n<p>Iniziamo con l&#8217;applicare diversi gradi di opacit\u00e0 al testo, facendolo giocare sullo sfondo. Non \u00e8 difficile.<\/p>\n<h3>L&#8217;opacit\u00e0 del testo<\/h3>\n<blockquote>\n<p>Se l&#8217;oggetto \u00e8 un elemento contenitore, allora l&#8217;effetto risulta come se il contenuto dell&#8217;elemento contenitore venisse sfumato sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) \u00e8 il valore di opacit\u00e0 indicato.<\/p>\n<\/blockquote>\n<p><\/p>\n<div class=\"testo_cinquanta\">\n<p>Questo testo \u00e8 di colore nero, con un valore di opacit\u00e0 al 50%<\/p>\n<\/div>\n<p>Vediamo il codice utilizzato per ottenere questo effetto:<\/p>\n<form><textarea rows=\"10\" cols=\"55\" ><\/p>\n<div style=\"width:100%;color:black;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-size: 18px;\">Questo testo \u00e8 di colore nero, con un valore di opacit\u00e0 al 50%<\/div>\n<p><\/textarea><\/form>\n<p>Da notare che abbiamo aggiunto <code>width:100<\/code> dato che l&#8217;opacit\u00e0 funziona solo tramite il posizionamento o il layout indicato (in Internet Explorer). Un valore di width o height, un float o qualcosa d&#8217;altro che consenta al navigatore di elaborare un posizionamento attiver\u00e0 l&#8217;effetto.<\/p>\n<h2>Definire l&#8217;opacit\u00e0 dello sfondo<\/h2>\n<h5>Nero e Bianco<\/h5>\n<p><b>LO SFONDO E&#8217; BIANCO<\/b><br \/>\nLo sfondo \u00e8 un elemento da tenere ben in considerazione nell&#8217;utilizzo dell&#8217;effetto di opacit\u00e0. Se non utilizzassimo un colore di sfondo (noi abbiamo usato <code>white<\/code>), le estremit\u00e0 del testo potrebbero risultare seghettate. Impostare il colore a <code>transparent<\/code> non sempre funziona.<\/p>\n<div class=\"pullquote\">&#8230;questo assomiglia ad alcuni<br \/>\n<b>titoli o sotto titoli che siamo abituati a vedere<\/b><br \/>\nin una<br \/>\n<span class=\"pullspan\">rivista<b>impaginata&#8230;<\/b><\/span>\n<\/div>\n<p><b>DIV<\/b><br \/>\nIl testo qui sulla destra \u00e8 un <code>div<\/code> in cui il testo \u00e8 di colore <code>black<\/code> e lo sfondo <code>white<\/code>. L&#8217;opacit\u00e0 del <code>div<\/code> \u00e8 <code>50<\/code> e <code>width<\/code> \u00e8 a 150px.<\/p>\n<p><b>SPAN<\/b><br \/>\nL&#8217;elemento <code>span<\/code> all&#8217;interno del <tt>div<\/tt> ha un&#8217;opacit\u00e0 a 25. Le estremit\u00e0 non dovrebbero risultare seghettate. Il padding a 10 pixel nello span \u00e8 stato utilizzato per non perderci il fondo della g in <span style=\"font-weight:bold;\">rivistaimpaginata<\/span>.<\/p>\n<p><b>FUORIUSCITA DEL TESTO<\/b><br \/>\nSe forzato, il testo sforer\u00e0 la larghezza di 150px e, naturalmente, i navigatori non gestiscono la fuoriuscita tutti allo stesso modo. Non preoccupiamoci dello sforamento e scriviamo <span style=\"font-weight:bold;\">rivistaimpaginata<\/span> tutto attaccato, in modo da esplorare da vicino l&#8217;effetto di fuoriuscita.<\/p>\n<p><b>Per ottenere questo tipo di impaginazione, copiate il seguente codice:<\/b><\/p>\n<form><textarea rows=\"10\" cols=\"55\" >&lt;div style=&#8221;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-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px;  text-align: right;&#8221;><br \/>\n&#8230;.questo assomiglia a ad alcuni<br \/>\ntitoli o sotto titoli che siamo abituati a vedere<br \/>\nin una &lt;span style=&#8221;width:150px;padding-bottom:10px;float:right;text-align:left;color:black;background:white;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;&#8221;>rivista<b>impaginata&#8230;<\/b>&lt;\/div><\/textarea><\/form>\n<h3>L&#8217;opacit\u00e0 del paragrafo<\/h3>\n<p><b>Rosso Mattone e Bianco<\/b><\/p>\n<p><b>P<\/b><br \/>\nIn questo esempio useremo il marcatore di Paragrafo <code><\/p>\n<p><\/code> al posto del <code><\/p>\n<div><\/div>\n<p><\/code>. Il codice \u00e8 lo stesso che abbiamo appena visto, solo abbiamo sostituito <code>div<\/code> con <code>p<\/code> e cambiato il colore da <code>black<\/code> a <code>maroon<\/code>.<\/p>\n<p class=\"pullquote_maroon\">&#8230;questo assomiglia ad alcuni <b>titoli o sotto titoli che siamo abituati a vedere<\/b><br \/>\nin una <span class=\"pullspan_maroon\">rivista<b>impaginata&#8230;<\/b> <img loading=\"lazy\" decoding=\"async\" src=\"\/blog\/wp-content\/images\/spacer.gif\" alt=\"Spaziatore da 150 pixel di larghezza\" title=\"Largo 150 pixel\" width=\"150\" height=\"10\" style=\"border:2px dotted black;background:gold;\" \/><\/span><\/p>\n<p>Il codice \u00e8 lo stesso, solo abbiamo utilizzato il marcatore di paragrafo invece di quello del div. Alla fin fine, potrebbe addirittura risultare pi\u00f9 semplice da comprendere per chi non \u00e8 addentro alle complicazioni e idiosincrasie dei CSS.<\/p>\n<p style=\"border:2px dotted black;padding:5px;background:gold;\">Abbiamo utilizzato, per questo paragrafo, un bordo di 2px, nero a puntini, e lo stesso abbiamo fatto attorno all&#8217;area da 150px, qui sulla destra.<\/p>\n<p>La larghezza che abbiamo definito per la trasparenza dei titoli \u00e8 di 150 pixel, ma abbiamo intenzionalmente unito le parole <span style=\"font-weight:bold;\">rivistaimpaginata<\/span> per mostrare che il testo non rimane necessariamente confinato nello spazio indicato.<\/p>\n<p>Lo <img loading=\"lazy\" decoding=\"async\" src=\"\/blog\/wp-content\/images\/spacer.gif\" alt=\"Spaziatore da 150 pixel di larghezza\" title=\"Largo 150 pixel\" width=\"150\" height=\"10\" style=\"border:2px dotted black;background:gold;\" \/> all&#8217;interno della parte destra del paragrafo mostra un&#8217;immagine che \u00e8 larga esattamente 150 pixel: possiamo cos\u00ec vedere dove sarebbe finito il nostro paragrafo se non avessimo unito le parole <span style=\"font-weight:bold;\">rivistaimpaginata<\/span> formando un testo troppo lungo per rimanere confinato.<\/p>\n<h2>Definire l&#8217;opacit\u00e0 nei CSS<\/h2>\n<p>Come facciamo a definire il carattere di opacit\u00e0 all&#8217;interno dei nostri CSS?<\/p>\n<p class=\"pulltrans\" style=\"color:navy;\">&#8230;questo \u00e8<br \/>\n<b>lo stile<\/b> <code>p.pulltrans<\/code> definito nel file stile1.css <small>CSS che trovate<\/small> <a href=\"\/blog\/wp-content\/themes\/crisis\/stile1.css\">qui<\/a><br \/>\ne pu\u00f2 variare nel tempo&#8230;&#8230;&#8230;&#8230;..<\/p>\n<pre>\nP.pulltrans {\ncolor:black;\nwidth:150px;\nbackground:white;\nfilter:alpha(opacity=50);-moz-opacity:.50;\nopacity:.50;\nfloat:right;\nmargin-top:10px;\nmargin-bottom:10px;\nmargin-left:10px;\nfont-size: 28px;\nline-height:26px;\ntext-align: right;\n}\n<\/pre>\n<p>Quello che vedete \u00e8 un semplice ma flessibile stile CSS, definito come <code>p.pulltrans<\/code> 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.<\/p>\n<p>Il codice da copiare nella pagina html \u00e8 molto semplice e non ci sono parti superflue, tant&#8217;\u00e8 che probabilmente ci converrebbe utilizzarlo come stile in linea.<\/p>\n<p>Per l&#8217;esempio dei titoli appena visti, abbiamo aggiunto un marcatore <code><small><\/small><\/code> e un <code><b><\/b><\/code>, mentre per dare un po&#8217; di vivacit\u00e0 abbiamo introdotto la definizione <code>style=\"color:navy\"<\/code> per superare aggirare il colore nero predefinito e avere un bel testo azzurro.<\/p>\n<p>Il codice da inserire nella nostra pagina, sar\u00e0 quindi:<\/p>\n<form>\n<textarea rows=\"10\" cols=\"55\" ><\/p>\n<p class=\"pulltrans\" style=\"color:navy;\">&#8230;questo \u00e8 <b>lo stile<\/b> <code>p.pulltrans<\/code> definito nel file stile1.css <small>CSS che trovate<\/small> <a href=\"\/blog\/wp-content\/themes\/crisis\/stile1.css\">qui<\/a> e pu\u00f2 variare nel tempo&#8230;&#8230;&#8230;&#8230;..<\/p>\n<p><\/textarea><\/form>\n<p><\/p>\n<p>Bene, per ora \u00e8 tutto. Fate qualche esperimento, giocate un po&#8217;, magari andate a dare un&#8217;occhiata al <a href=\"http:\/\/www.mandarindesign.com\/opacity.html\" target=\"_blank\">sito<\/a> da cui ho tradotto questa guida e fra qualche giorno ci risentiremo, per approfondire ulteriormente l&#8217;interazione fra testo e immagini per il tramite dell&#8217;opacit\u00e0.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Abbiamo visto come giocare con le immagini e i link, in modo da renderli trasparenti in maniera &#8220;sensibile&#8221; 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&#8217;applicare diversi gradi di opacit\u00e0 al testo, facendolo &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[106,472,479],"class_list":["post-95","post","type-post","status-publish","format-standard","hentry","category-di-tutto-un-po","tag-acer","tag-fon","tag-internet","without-featured-image"],"_links":{"self":[{"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/posts\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":0,"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/posts\/95\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/media?parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/categories?post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zarrelli.org\/blog\/wp-json\/wp\/v2\/tags?post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}