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

    iPhoneで撮影した写真の個人情報などにモザイクや黒の塗りつぶしで隠すことができるアプリ「hide…

    iPhoneで撮影した写真で顔やメールアドレスなどの個人情報が写ってい…

  2. Shazam

    Web Service

    【超便利】この曲なんだろうと思う曲を一発で教えてくれる便利なiPhoneアプリ「Shazam」

    個人的にすごい便利なiPhoneアプリを発見したのでご紹介します。「S…

  3. Web Service

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

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

  4. Web Service

    WebサイトのタイトルとURLを簡単に取得できて自分用HTMLリンクも作成できるChrome拡張機能…

    現在見ているWebサイトのタイトルとURLを簡単に取得できたり、自分用…

  5. flatuicolorpicker

    Web Service

    フラットデザインの色の見本(RGB、HEX)が豊富にある「flatuicolorpicker」

    フラットデザインを取り入れる上で難しいのが色の選択。実際にどのような色…

  6. Web Service

    Chromeのダウンロード履歴を自動で消去してくれる拡張機能「Always Clear Downlo…

    ちょっと良さげだったので入れてみました。Google Chromeのダ…

コメント

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

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

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP