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
Motion Blur Effect with SVG | Codrops
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter. Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements. Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural. Motion blur is the apparent streakin
ピントが合わなかったりブレてしまったりした写真でも後から修正できるソフト「SmartDeblur」
ピントがずれていたり、撮影のタイミングでブレてしまったりした写真を、撮影後に独自のアルゴリズムで編集してピントの合ったきれいな写真に直すことができるのが「SmartDeblur」です。写真の加工は一体どのくらいのレベルにあるのか、実際にどれぐらいのレベルのピンぼけを修正できるのか試しに使ってみました。 SmartDeblur - blurred images restoration http://smartdeblur.net/ まずは上記公式サイトから「DOWNLOAD」をクリックしてインストーラーをダウンロード。 ダウンロードが完了したら、インストーラーを起動 「実行」をクリック 「Next」をクリック 「I accept the agreement」にチェックを入れて「Next」をクリック 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をク
グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える - かちびと.net
JavaScriptでよく見かける、ホバー 状態のアイテム以外にエフェクトを かける、みたいなのをCSSで実装する という内容です。目新しい手法では 無いです。 サンプルはtext-shadowを使います。 Sample 親要素に:hoverを使って、全体にエフェクトをかけ、子要素の:hoverで元の表示に戻るようにするとホバーしてるアイテム以外にエフェクトがかかったように見えます。 .menu ul li a {/*メニューの基本スタイル*/ color: black; float: left; text-decoration: none; padding: 10px ; letter-spacing: 1px; } .menu:hover li a {/*親要素にホバーで子要素全体にエフェクト*/ text-shadow: 0px 0px 10px #555; color: #ddd;
[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点
Fun With Blurred Text デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } しかし、このままでは危険です。colorには対応していて、text-shadowには対応していないブラウザでは、何も見えない状態になってしまいます。 これを解決するには、「modernizr」を使用して、対応ブラウザかどうか確認して適用します。 .textshadow .blurry-t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
