HTML5 CSS3/Javascript Blur Mask

我們很多人都在尋找一種Javascript/CSS3解決方案，它可以在不使用flash的情況下在網頁中提供類似於windows7的用戶界面。HTML5 CSS3/Javascript Blur Mask

我們需要一個不透明蒙，圓潤的邊框和模糊...

我們已經得到了透明度和圓角邊框，現在我們需要能夠在一定的虛化效果應用到半透明股利。

我試圖從Pixastic圖書館BlurFast效果，但它只是模糊的實際圖像，而不是我們所看到的低谷圖片的背景...

基本上，我們希望有一個事業部作爲一個模糊面膜在其他內容...

如果有人確實有這個成功了，我會很高興知道其可能的:)謝謝

來源

2011-04-04 Olivier

您可以發佈您試圖從Windows 7模擬的效果的圖像或視頻嗎？ – 2011-04-04 23:38:42

它是這樣的：[航空窗口]（http://sites.google.com/site/hissorrow/pics/Non_rect_win.png） – 2011-04-04 23:51:17

啊，陷阱。 FWIW，我討厭那種效果。但這只是一個人的意見。我想不出用現在的HTML/CSS來處理這個問題的方法。 PaintBrush.js有能力，可能是一個開始的地方：http://mezzoblue.github.com/PaintbrushJS/demo/ – 2011-04-04 23:55:56

沒有辦法在目前這樣做有效地或跨瀏覽器。

可能能夠做到的唯一方法是使用Pixastic在Canvas中創建模糊圖像，以dataURI格式導出，然後將該圖像用作div的背景。如果div移動，那麼背景圖像的位置應該相應地移動。

來源

2011-04-04 23:50:34 typeof

謝謝，我想到了，但事情是，我的網站的背景將是互動的，沒有簡單的圖片... – Olivier 2011-04-05 00:42:37

這是一個重要的細節。你會有什麼樣的（非圖像）背景？ – typeof 2011-04-05 18:56:41

http://t.co/fFLPKnzC

上模糊很好的文章顯示技術狀態

傷心地「屏蔽」部分頁面，這背後模糊的一切，不是那麼容易。也許建議的部份博客幫助你，因爲他們是非常簡單的，並從一個完全不同的方向..

爲此，以使嵌入HTML SVG內使用HTML元素的SVG過濾器以後

來源

2012-01-12 10:24:43 zbug

思想這可能是相關的：Aero

就個人而言，我認爲事實上，筆者指出這是「換句話說，最混亂和最ineffecient實現有史以來的一個」 ... 和他能onlt得到在單個瀏覽器中工作的效果......非常有說服力。

來源

2013-09-27 15:30:02 Steve

HTML5 CSS3/Javascript Blur Mask

回答

相關問題