CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス
2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
これは知らないと損！背景が透明なPNG画像の輪郭をなじませるPhotoshopの使えるテクニック《動画解説付き》
人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像保存をしておくことで、さまざまな別の背景画像に入れ替えることが可能になり、バリエーションを増やすことができます。 関連記事 ⇒ これさえ身につけてしまえば、ほぼ思い通りの作品が作れるようになるPhotoshopの切り取りテクニック。 しかし、背景の色によっては合成したい画像がうまくなじまず、”カスカス”してしまう部分が出てくることがあるので、ここではカスカスさせることなく、うまく背景になじませるテクニックを解説します。（動画は最下部です↓） Photoshopを使っている人であれば、ブログのヘッダーデザインをする際などに、かなり役立つテクニックなので覚えておいて損はないと思います。 背景が透明なPNG画像があるとバリエーションを作るのがとても簡単！例えば、このような白い背景のヘッダーデザインをしてみます。 背景が透明なP
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
[配布] iOS7 iPhoneショートカットアイコン画像データSafariホーム画面に追加
3,383views／投稿 2013-09-30／更新 2019-04-30 iOS7になって以前よりもショートカットアイコンの角丸がさらに丸くなりiPhoneは、114px→120pxと少し大きくなり光沢も消えました。ホーム画面に追加される時の画像でもあり大切なWEBデータです。Illustratorなどで編集できるベクター画像データを作ったので配布します。 配布データのダウンロード ios7-iphoneshortcuticon.zip ホーム画面に追加：ショートカットアイコン設置方法 ドメイン直下の第一階層ディレクトリにPNG画像を１つ設置するだけです。 ファイル名は、 apple-touch-icon.png にします。こうするだけで、iPhoneのSafariが第二階層や第三階層のページ閲覧の時でも第一階層にあるアイコン画像を探して適用させてくれるので１つで済みます。第一階層に画
![[配布] iOS7 iPhoneショートカットアイコン画像データSafariホーム画面に追加](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c742663b8bbbf88c8e91485df049d10e5f4a340/height=288;version=1;width=512/https%3A%2F%2Fwebskillup.com%2Fwp-content%2Fuploads%2Fios7-iphoneshortcuticon.png)
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
