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アプリ「Read It Later」の基本的な設定や簡単な使い方

    あとで読むためのiPhoneアプリ「Read It later」が流行…

  2. Pocketのリスト並べ替え

    Web Service

    Pocket(Web版)で記事リストを最新から最古に並べ替える設定方法

    Web版(ブラウザ)のPocketで記事リストを表示させるとデフォルト…

  3. Web Service

    カラフルなニュースリーダーがおもしろい!GoogleChromeの拡張機能「HitFT (Japan…

    とても個人的に面白いニュースリーダーがあったので備忘録がてらご紹介しま…

  4. ブラウザでストップウォッチ

    Web Service

    ブラウザで手軽にストップウォッチが利用できるサービス

    ブラウザでちょっと何かの時間を計りたい時に役立つストップウォッチのサー…

  5. Web Service

    ストライプの背景パターンをサクっと作ることができる「Striped Backgrounds」

    とてもシンプルで使いやすいかったのでメモがてらエントリー。背景なんかに…

  6. CSS Color Chart

    Web Service

    CSSのカラーネーム、HEX、RGBを1クリックでコピーできるカラーチャート「CSS Color C…

    CSS Color Chartがとても便利だったのでご紹介します。とて…

コメント

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP