Web Service

PhotoshopのようなインターフェースのCSS3ジェネレーター「Layer Styles」

Photoshopに慣れてる人なら違和感なく使いこなせそうですね。CSS3ジェネレーター「Layer Styles」ではドロップシャドウやグラデーション、角丸なんかをサクっと生成してくれます。シンプルで機能も必要なものに絞られているので個人的にはとても使いやすかったです。

[ads_center]

使い方

Layer Styles 使い方

左上にあるパネルの中の「Styles」から各スタイルを選択して調整することができます。上から順に以下のようになります。

  • Drop Shadow → ドロップシャドウ
  • Inner Shadow → シャドウ
  • Background → 背景
  • Border → ボーダー
  • Border Radius → 角丸

グラデーションもこの通りPhotoshopで作業するような感じで作ることができます。

Layer Styles グラデーション

角丸も簡単に調整できます。

Layer Styles 角丸

出来上がったら左下にある「CSS Code」をクリックしてコードを取得します。

Layer Styles コード取得

ということで、CSS3を使う時なんかに覚えておくと作業がかなり捗りそうですね。

関連記事

  1. Web Service

    自分の興味にあったニュースや記事を推薦してくれる「Gunosy(グノシー)」を使ってみた

    自分の興味に合うニュースや記事を推薦してくれるGunosy(グノシー)…

  2. Web Service

    簡単にグラデーション、角丸、ボックスシャドウなんかを作成できるジェネレーター「CSS3 Genera…

    グラデーションや角丸、ボックスシャドウなどのCSS3コードを生成してく…

  3. Colors Palette Generator
  4. Web Service

    feedlyの登録者数を取得できる「Feedly Subscribers Checker 2」

    自分のブログをfeedlyに登録してくれている人の数を知りたいという方…

  5. Web Service

    住所や建物名を入力するとGoogleマップの座標を取得することができる

    地図上で、ある地点の座標を知りたいといった時があるかと思います。そんな…

  6. Web Service

    pxからemに文字サイズを変換してくれるツール「px-em」

    最近ではレスポンシブWebデザインなどで文字サイズにemを使う機会も増…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP