{"id":1185,"date":"2011-03-09T14:43:42","date_gmt":"2011-03-09T13:43:42","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=1185"},"modified":"2011-05-07T12:13:20","modified_gmt":"2011-05-07T11:13:20","slug":"css3-rgba-le-trasparenze-senza-opacity","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/","title":{"rendered":"CSS3 RGBA: le trasparenze senza Opacity"},"content":{"rendered":"
\n<\/div>

\"CSS3<\/a><\/p>\n

Continua la rubrica mensile Propriet\u00e0 CSS3<\/a><\/strong>, che permettono di colorare con leggerezza il vostro sito.<\/p>\n

La propriet\u00e0 CSS3 di oggi \u00e8: RGBA<\/strong> che assegna a un elemento un colore in formato rgb<\/strong> e un’opacit\u00e0<\/strong>. Prima di questa propriet\u00e0 si utilizzava la propriet\u00e0 Opacity<\/strong>, che presentava per\u00f2 diverse carenze, che in seguito analizzer\u00f2.<\/p>\n

Vediamo subito come si presenta:<\/p>\n

Testo Opaco<\/h1>\n

La sintassi della propriet\u00e0 RGBA:<\/p>\n

\r\ncolor: rgba(quantit\u00e0 rosso, quantit\u00e0 verde, quantit\u00e0 blu, opacit\u00e0);\r\n<\/pre>\n
 <\/p>\n
RGBA<\/h4>\n
Ci sono diversi modi per rappresentare un colore; il pi\u00f9 diffuso \u00e8 quello della codifica esadecimale (#9966FF) o del nome inglese del colore (red). Un’altro pratica per rappresentare i colori \u00e8 l’utilizzo della specifica rgb<\/strong> (0,100,255).<\/p>\n
La propriet\u00e0 CSS3 RGBA, dove A st\u00e0 per Alpha<\/strong>, introduce un nuovo valore per determinare il grado di opacit\u00e0 del colore<\/strong>:
\n0 corrisponde al 0% di opacit\u00e0, con 0.5 il 50% di opacit\u00e0 e via dicendo, fino a raggiunge il valore massimo, 1, cio\u00e8 il 100% di opacit\u00e0, quindi la trasparenza totale<\/strong>.<\/p>\n
Esempio di base di una scritta con opacit\u00e0 al 40%:<\/p>\n
Testo CSS3 RGBA con opacit\u00e0 40%<\/h1>\n
\r\ncolor: rgba(100, 200, 0, 0.4);\r\n<\/pre>\n
 <\/p>\n
Che differenza c’\u00e8 tra RGBA e Opacity?<\/h4>\n
A questo punto nascono le prime domande:
\nLa vecchia propriet\u00e0 Opacity non era uguale, se non meglio, dato che aveva una sintassi pi\u00f9 breve?<\/p>\n
La sintassi della propriet\u00e0 Opacity:<\/p>\n
\r\nopacity: 0.7;\r\n<\/pre>\n
La risposta \u00e8 semplice, opacizzando una scritta il risultato \u00e8 lo stesso, utilizzando una o l’altra propriet\u00e0, ma cosa succede se applichiamo a un div la propriet\u00e0 Opacity a differenza di RGBA:<\/p>\n
\n
\n
\n
RGBA<\/h1>\n<\/div>\n<\/div>\n
\n
\n
Opacity<\/h1>\n<\/div>\n<\/div>\n<\/div>\n
Notate la differenza?<\/p>\n
La propriet\u00e0 RGBA<\/strong> applica la trasparenza solo all’elemento div, mentre Opacity<\/strong> applica la trasparenza a tutti gli elementi contenuti all’interno del div, provocando spiacevoli risultati.<\/p>\n
A quali elementi posso attribuire la propriet\u00e0 RGBA?<\/h4>\n
RGBA, pu\u00f2 essere applicata a tutti gli elementi a cui pu\u00f2 essere assegnata la propriet\u00e0 color<\/strong>, background-color<\/strong> e border-color<\/strong>, quest’ultimo rappresenta la vera novit\u00e0 introdotta da RGBA, cio\u00e8 la dissolvenza dei bordi di un box. Di seguito vedremo alcuni esempi.<\/p>\n
 <\/p>\n
Testo opaco<\/h4>\n
www.simonedesign.it<\/h1>\n
\r\nh1 {\r\n    color: rgba(0,129,204,0.5);\r\n}\r\n<\/pre>\n
\r\n
www.simonedesign.it<\/h1>\r\n<\/pre>\n
 <\/p>\n
Box con trasparenza<\/h4>\n
<\/p>\n
\n
\n
www.simonedesign.it<\/h1>\n<\/div>\n<\/div>\n
<\/center><\/p>\n
\r\n.sfondo {\r\n    margin-bottom:10px;\r\n    background: url(bg.png) #093172;\r\n    padding:20px;\r\n}\r\n\r\n.box {\r\n    padding:10px;\r\n    background-color: rgba(0,129,204,0.5); \r\n}\r\n<\/pre>\n
\r\n
\r\n    
\r\n        
www.simonedesign.it<\/h1>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
 <\/p>\n
Dissolvenza bordi<\/h4>\n
<\/p>\n
\n
www.simonedesign.it<\/h1>\n<\/div>\n
<\/center><\/p>\n
\r\n.box {\r\n    width:300px;\r\n    padding:10px;\r\n    border: 20px solid rgba(0,129,204,0.5);\r\n}\r\n<\/pre>\n
\r\n
\r\n    
www.simonedesign.it<\/h1>\r\n<\/div>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Continua la rubrica mensile Propriet\u00e0 CSS3, che permettono di colorare con leggerezza il vostro sito. La propriet\u00e0 CSS3 di oggi \u00e8: RGBA che assegna a un elemento un colore in formato rgb e un’opacit\u00e0. Prima di questa propriet\u00e0 si utilizzava la propriet\u00e0 Opacity, che presentava per\u00f2 diverse carenze, che in seguito analizzer\u00f2.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[58],"class_list":["post-1185","post","type-post","status-publish","format-standard","hentry","category-css","tag-css3"],"yoast_head":"\nCSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"Continua la rubrica mensile Propriet\u00e0 CSS3, che permettono di colorare con leggerezza il vostro sito. La propriet\u00e0 CSS3 di oggi \u00e8: RGBA che assegna a un elemento un colore in formato rgb e un’opacit\u00e0. Prima di questa propriet\u00e0 si utilizzava la propriet\u00e0 Opacity, che presentava per\u00f2 diverse carenze, che in seguito analizzer\u00f2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-03-09T13:43:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-05-07T11:13:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/\",\"name\":\"CSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg\",\"datePublished\":\"2011-03-09T13:43:42+00:00\",\"dateModified\":\"2011-05-07T11:13:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg\",\"width\":\"500\",\"height\":\"400\",\"caption\":\"CSS3 RGBA le trasparenze senza Opacity\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 RGBA: le trasparenze senza Opacity\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/","og_locale":"it_IT","og_type":"article","og_title":"CSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign","og_description":"Continua la rubrica mensile Propriet\u00e0 CSS3, che permettono di colorare con leggerezza il vostro sito. La propriet\u00e0 CSS3 di oggi \u00e8: RGBA che assegna a un elemento un colore in formato rgb e un’opacit\u00e0. Prima di questa propriet\u00e0 si utilizzava la propriet\u00e0 Opacity, che presentava per\u00f2 diverse carenze, che in seguito analizzer\u00f2.","og_url":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2011-03-09T13:43:42+00:00","article_modified_time":"2011-05-07T11:13:20+00:00","og_image":[{"width":500,"height":400,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/","url":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/","name":"CSS3 RGBA: le trasparenze senza Opacity | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg","datePublished":"2011-03-09T13:43:42+00:00","dateModified":"2011-05-07T11:13:20+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2011\/03\/CSS3-RGBA-le-trasparenze-senza-Opacity1.jpg","width":"500","height":"400","caption":"CSS3 RGBA le trasparenze senza Opacity"},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/css3-rgba-le-trasparenze-senza-opacity\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 RGBA: le trasparenze senza Opacity"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=1185"}],"version-history":[{"count":76,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1185\/revisions"}],"predecessor-version":[{"id":1488,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/1185\/revisions\/1488"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=1185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=1185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=1185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}