CSSで背景のみをぼかす方法
今回はCSSで背景画像のみをぼかす方法を紹介します。 ぼかすとなると「 filter: blur();」を使うことは簡単に想像できると思いますが、これが少し厄介なんですよね。背景だけには適応できず、内包している要素がすべてぼかされてしまいます。 そこで擬似要素を使用して実現します。 デモサイト html <div class="key" style="background-image:url(key.jpg)"> <p><img src="key.jpg" alt=""></p> </div> インラインで背景画像の指定 インラインで背景画像の指定をしているのはCMS等でアイキャッチ画像と共通の画像を背景画像に設定することを想定しています。 .key{ background: no-repeat center center; background-size: cover; padding:
透明を使った美しいグラデーションを描くことができるPhotoshop用のグラデーション素材
美しいグラデーションを描くポイントは、濃淡のシマシマがでてしまうバウンディング。透明を使った美しいグラデーションを描くPhotoshop用のグラデーション素材を紹介します。 Exponential Gradient バウンディングの解決方法としてはCS6以降だとグラデーションの設定で「ディザ」にチェックをいれたり、あとはCS5以前だと「ぼかし」をいれる方法があります。 「ぼかし」を使う方法は、下記の記事を参考にしてください。 グラデーションをより滑らかにするPhotoshopのチュートリアル しかし、これらの方法は透明ではないグラデーションでしか機能しません。黒から白、描画色から背景色など。 ここで紹介するグラデーションを使用すると、透明を使った美しいグラデーションを描くことができます。 Photoshopで用意されているグラデーションは通常、両端に不透明度の分岐点が用意されているだけです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
