Photoshopには、ファイルの保存形式に SVG形式はなく WEB用に保存でもSVG形式で保存することが出来ません SVGというのはベクトル画像というもので 拡大、縮小しても画質が劣化することが無いものです 点と線をで作られる画像ファイルとなっています その特性を活かして、CSSやjavascriptと組み合わせて アニメーションをつけたり出来ます。 そんなSVG画像なのですが Photoshopで実は出力することが可能です PhotoshopでSVG画像を出力する SVGとして出力できるのは、レイヤーもしくは、グループとなります PSDをそのままSVGとすることは出来ません 方法その1 レイヤー名に ファイル名+拡張子で拡張子の部分にSVGをつけてアセットを生成 複数のレイヤーをまとめたいときはグループ化して、グループ名を ファイル名+拡張子 で拡張子をSVGにします あとはファイル
ブラー(ぼかし)エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです!この「ぼかす」表現を「ブラー(blur)エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの?」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします! なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜! CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く