{"id":7678,"date":"2011-06-22T16:16:49","date_gmt":"2011-06-22T14:16:49","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=7678"},"modified":"2023-03-06T16:25:04","modified_gmt":"2023-03-06T16:25:04","slug":"riflessi-css-in-firefox","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/","title":{"rendered":"Riflessi CSS in Firefox"},"content":{"rendered":"

In questi giorni \u00e8 uscita la versione 5.0 di Firefox, che aggiunge supporto alle animazioni CSS e miglioramenti all’interfaccia<\/strong>. Ho quindi deciso di dedicare un’articolo a questo browser, per quanto personalmente continui a ritenere WebKit superiore.<\/p>\n

Da oltre 3 anni in WebKit \u00e8 presente una propriet\u00e0 CSS che permette di riflettere per intero un elemento del DOM: -webkit-box-reflect<\/a>.<\/p>\n

In firefox questa propriet\u00e0 non \u00e8 presente, ma possiamo sfruttare l’interessante -moz-element<\/a> che permette di impostare come background di un elemento, una copia del contenuto di un’altro elemento<\/strong>, riferendosi ad esso tramite l’id.<\/p>\n

Utilizzando -moz-element<\/em> in accoppiata con -moz-transform<\/em> possiamo copiare il contenuto dell’elemento da riflettere e ribaltarne l’asse Y.<\/p>\n

In Pratica<\/h3>\n

Nel nostro esempio utilizziamo un tag IMG all’interno di un DIV che servir\u00e0 a fare da contenitore al riflesso.<\/p>\n

[code gutter=”false” language=”html”]<\/p>\n

<\/div>\n

[\/code]<\/p>\n

Da CSS applichiamo uno stile allo pseudo elemento #box::before<\/em>, dandogli le stesse dimensioni dell’immagine e posizionandolo subito al di sotto di essa. Quindi a #box<\/em> assegnamo un’altezza doppia a quella dell’immagine, in modo da lasciare uno spazio libero per il suo riflesso e, per dare un effetto dissolvenza, applichiamo anche un gradiente di sfondo semitrasparente, assicurandoci per\u00f2 di posizionare il riflesso sotto di esso tramite z-index<\/em>.<\/p>\n

Tutto quello che resta da fare \u00e8 applicare il background con -moz-element<\/em> e ribaltare l’asse Y con “-moz-transform: scaleY(-1)<\/em>” o come nell’esempio con la funzione matrix<\/strong>.<\/p>\n

[code gutter=”false” language=”css”]
\n#box {
\nposition: relative;
\nheight: 602px; \/* 2x img height *\/
\nbackground: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,1));
\n}<\/p>\n

#box::before {
\ncontent: ”;
\nwidth: 601px;
\nheight: 301px;
\nbackground: -moz-element(#img) no-repeat;
\nposition: absolute;
\ntop: 301px;
\n-moz-transform: matrix(1, 0, 0, -1, 0, 0);
\nz-index: -1;
\n}
\n[\/code]<\/p>\n

Ecco l’esempio all’opera (visualizzare con Firefox):
\n[iframe src=”\/\/jsfiddle.net\/mtorromeo\/eUmR9\/2\/embedded\/result,css,html”]<\/p>\n

Potenzialit\u00e0<\/h3>\n

La cosa veramente interessante di -moz-element<\/em> \u00e8 che qualsiasi modifica applicata all’elemento da riflettere si “rifletter\u00e0” (scusate il gioco di parole) LIVE sulla copia.<\/p>\n

Di seguito lo stesso esempio di prima al quale ho applicato una piccola animazione CSS (visualizzare con Firefox 5 o superiore):
\n[iframe src=”\/\/jsfiddle.net\/mtorromeo\/eUmR9\/3\/embedded\/result,css,html”]<\/p>\n","protected":false},"excerpt":{"rendered":"

\"\"In questi giorni \u00e8 uscita la versione 5.0 di Firefox, che aggiunge supporto alle animazioni CSS e miglioramenti all’interfaccia<\/strong>. Ho quindi deciso di dedicare un’articolo a questo browser, per quanto personalmente continui a ritenere WebKit superiore.<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[85,69,238,163,106],"class_list":["post-7678","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-animazioni-web","tag-css3","tag-firefox","tag-gradient","tag-html5"],"yoast_head":"\n\u2022 Riflessi CSS in Firefox - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\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.artera.net\/it\/marketing\/riflessi-css-in-firefox\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Riflessi CSS in Firefox - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-22T14:16:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-06T16:25:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2018\/02\/artera-logo-color.png\" \/>\n\t<meta property=\"og:image:width\" content=\"425\" \/>\n\t<meta property=\"og:image:height\" content=\"281\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Massimiliano Torromeo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Massimiliano Torromeo\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/\"},\"author\":{\"name\":\"Massimiliano Torromeo\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/f0793d88769c8429e457f364de9ae071\"},\"headline\":\"Riflessi CSS in Firefox\",\"datePublished\":\"2011-06-22T14:16:49+00:00\",\"dateModified\":\"2023-03-06T16:25:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/\"},\"wordCount\":352,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"keywords\":[\"animazioni web\",\"CSS3\",\"firefox\",\"gradient\",\"html5\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/\",\"name\":\"\u2022 Riflessi CSS in Firefox - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"datePublished\":\"2011-06-22T14:16:49+00:00\",\"dateModified\":\"2023-03-06T16:25:04+00:00\",\"description\":\"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/riflessi-css-in-firefox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Riflessi CSS in Firefox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/f0793d88769c8429e457f364de9ae071\",\"name\":\"Massimiliano Torromeo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g\",\"caption\":\"Massimiliano Torromeo\"},\"description\":\"Passionate about computer science since I was a child, I started programming as a self-taught person from about the age of twelve. Over time, I have become a staunch supporter of free software and the open source movement. This fondness for free software soon led me to approach the Linux world and in 2011 I became a member of the Arch Linux Trusted Users team. In Artera since 2007 I deal with all aspects related to our infrastructure, internal development of software and enterprise solutions, research and development and internal training of our programming and support departments.\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/massimiliano-torromeo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Riflessi CSS in Firefox - Artera","description":"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","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.artera.net\/it\/marketing\/riflessi-css-in-firefox\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Riflessi CSS in Firefox - Artera","og_description":"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2011-06-22T14:16:49+00:00","article_modified_time":"2023-03-06T16:25:04+00:00","og_image":[{"width":425,"height":281,"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2018\/02\/artera-logo-color.png","type":"image\/png"}],"author":"Massimiliano Torromeo","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Massimiliano Torromeo","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/"},"author":{"name":"Massimiliano Torromeo","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/f0793d88769c8429e457f364de9ae071"},"headline":"Riflessi CSS in Firefox","datePublished":"2011-06-22T14:16:49+00:00","dateModified":"2023-03-06T16:25:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/"},"wordCount":352,"commentCount":1,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"keywords":["animazioni web","CSS3","firefox","gradient","html5"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/","url":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/","name":"\u2022 Riflessi CSS in Firefox - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"datePublished":"2011-06-22T14:16:49+00:00","dateModified":"2023-03-06T16:25:04+00:00","description":"Leggi dal blog: Riflessi CSS in Firefox. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/riflessi-css-in-firefox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Riflessi CSS in Firefox"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/f0793d88769c8429e457f364de9ae071","name":"Massimiliano Torromeo","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c8c79e6f7da11d2b45e20c77201173517aecba437175f94ec02f729095cb40c2?s=96&d=mm&r=g","caption":"Massimiliano Torromeo"},"description":"Passionate about computer science since I was a child, I started programming as a self-taught person from about the age of twelve. Over time, I have become a staunch supporter of free software and the open source movement. This fondness for free software soon led me to approach the Linux world and in 2011 I became a member of the Arch Linux Trusted Users team. In Artera since 2007 I deal with all aspects related to our infrastructure, internal development of software and enterprise solutions, research and development and internal training of our programming and support departments.","url":"https:\/\/www.artera.net\/it\/author\/massimiliano-torromeo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=7678"}],"version-history":[{"count":2,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7678\/revisions"}],"predecessor-version":[{"id":255369,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/7678\/revisions\/255369"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=7678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=7678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=7678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}