blurに関するnibushibuのブックマーク (19)
-
nibushibu 2019/01/04
-
Brusher - Create Interactive Backgrounds for Webpages
brusher A lightweight library to create interactive backgrounds Star Background of this page has been auto created by brusher. Move your mouse around to see it in action. All you need is an image. Below code shows how the current page has been initialized const brusher = new Brusher({ image: 'abstract.png' }); brusher.init(); There are several options that you can use to modify the result. Have a
-
Liquid CSS！まるで液体のようなデザインを実装するCSS技
Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です（※制限あり）。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感＋高コントラストの要素にさらに background で背景色を指定します。 すると
-
Background Blur - plugin by @msurguy
$tintedHolderEl.backgroundBlur({ imageURL : 'url-of-the-image', blurAmount : 10, imageClass : 'tinted-bg-blur', overlayClass : 'tinted-bg-overlay', duration: 1000, endOpacity : 1 }); .tinted-bg-blur { z-index: -2; opacity: 0; position: absolute; min-height: 100%; height: auto; display: block; top: 0; max-height: none; /* Add this CSS to remove transparent border around the image */ left: -10%; wid
-
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応 iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 投稿日2015年05月07日 更新日2015年05月07日 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before, * {
-
-
Avgrund - A modal UI concept
A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try. Open modal Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use. Avgrund is Swedish for abyss. Created by Hakim El Hattab @hakimel — http://hakim.se
-
ActionScriptを使わずにグラデーションマスクをかける小技
こんばんはムーチョ改めジョーになりそうなムーチョです。 残暑の厳しい週でしたがみなさんいかがお過ごしでしょうか？ 今日もCinderネタで行こうと思ったのですが、 お仕事中に｢あれ？どうやるんだっけ？｣となり、 また忘れそうなのでメモ。 Flashでグラデーションマスクをかける方法です。 本来のやり方なら、ActionScriptを使うんですが、 mc.cacheAsBitmap=true; maskmc.cacheAsBitmap=true; mc.mask=maskmc; 俺はタイムライン派なんだぜっ！ という兄貴なやり方を。 やり方ですが、ブレンドモードを使用します。 まず空のMCを用意して、(mc) その中に、マスクをかけたいオブジェクトをレイヤーに置いていきます。(text1,text2) そして一番上のレイヤーにマスクをかけるMCを配置し、(mask) ブレンドモードを消去にし
-
-
-
Testing -webkit-filter : Playground for CSS webkit filters
What? Why? Reading on the Chromium blog about the new CSS -webkit-filter made me wonder what kind of effects can be created, using just one single line of CSS, resulting in this playground. Browser compatibility Above features should work using at least Chrome 19. Read more Understanding CSS Filter Effects - HTML5 Rocks Chromium Blog: Accelerated CSS Filters Landed in Chromium About Last update Ja
-
Gaussian Blur and CSS3/SVG - CSS-Plus
Attention: This article is old and the content is outdated. I've left the article here for historical purposes. Edited: 07 January 2014 - Updated article to reflect current browser support. Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of 'filter' power within a browser environment. Before we get started, I think it's just important to
-
Blurjs.com - For Sale
Project Title Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12! Client: Start Bootstrap Date: April 2014 Service: Web Development Close Project Title Use this area of the page to describe your project. The icon a
-
フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル:phpspot開発日誌
Fullscreen Image Blur Effect with HTML5 | Codrops フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプルが公開されています。 画像切替の際のぼかしアニメーションがなかなかいい感じです。サンプルをダウンロードできるので写真を置き換えればそれっぽく利用することができそうです FlashかHTML5なんていう話にもなったりしますが、画面のデザインがある程度CSSででき、画像の指定もHTMLでかけちゃうっていうのはデベロッパー側としては嬉しい場面も多そうですね 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 Flash使って
-
Item Blur Effect with CSS3 and jQuery
Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects u
-
-
-
jp.ferv.blog » Blog Archive » Tweensy – filter
Tweensy - filter TweensyでFilterのプロパティをアニメーションしてみる。Filterオブジェクトを作ってそのFilterオブジェクトのプロパティをTweensyでTweenするイメージ。で、updateパラメータにそのFilterを適用するインスタンスを指定する。 ActionScript TestTweensy_8.as Source package { import com.flashdynamix.motion.extras.ColorMatrix; import com.flashdynamix.motion.Tweensy; import fl.motion.easing.Linear; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.
-
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
