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. Show Title Tag

    Web Service

    Webページの長いタイトルを画面隅っこに表示させることができるChrome拡張機能「Show Tit…

    Webページを見ている時にタイトルを確認したい時ってありますよね。Ch…

  2. Shazam

    Web Service

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

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

  3. Web Service

    2ちゃんねるまとめブログのまとめを手軽に見ることができるChrome拡張機能「2ちゃんねるまとめ」

    2ちゃんねるまとめブログのまとめをChrome画面から手軽に見る事がで…

  4. iPhoneの天気予報アプリ「そら案内」

    Web Service

    iPhone定番人気の天気予報アプリの「そら案内」を使ってみた

    前回、Mac版の「そら案内」を使ってみたら素晴らしすぎるアプリだったの…

  5. Web Service

    ドラッグしたテキストを音声で読み上げてくれるChrome拡張機能「SpeakIt!」を使ってみた

    こういうの欲しかったのでかなり嬉しいです。ドラッグしたテキストを音声で…

  6. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

コメント

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

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

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP