Web Service

CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPainter」

CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPainter」を使ってみました。結構細かな部分まで調整できるのでグラフィカルな要素を作成できるのがいいですね。使い方もプレビューで確認しながらバーを左右で調整していくだけなので簡単ですね。ということで以下使い方です。

[ads_center]

使い方

box-shadowではinsideにチェックを入れると内側にシャドウを入れることができるようになります。外側にしたい場合はチェックを外します。

box-shadowの設定

offsetやblur、colorなどでお好みのシャドウに調整していきます。追加したい場合はaddをクリックして追加していきます。

addで追加

基本的にはこんな感じで他にもtextやtext-shadow、border-radiusなどを設定していきます。

また、右下にはサンプルも用意されていてとても参考になります。例えば「Pink ball」をクリックするとこんな感じになります。

サンプルも用意されている

ちなみに画像を直接クリックしてドラッグしながら移動させたりもできます。この場合はpositionの値が変わります。

positionの値変更

また、右下にある矢印を引っ張ったりすることでsizeを調整することができます。

size調整

コードは右下に表示されているので、使う時はコピーして取得できます。

コード取得

ということで、CSSで簡単に細部まで作り込みたい時なんかにはオススメかと思います。

関連記事

  1. Web Service

    ChromeからワンクリックでDropboxにアクセスできる拡張機能

    ChromeからDropboxにワンクリックでアクセスできる拡張機能「…

  2. Noise Texture

    Web Service

    手軽にノイズテクスチャの画像を作成できるツール「Noise Texture」

    手軽にノイズテクスチャの画像を作成できる便利なツール「Noise Te…

  3. Web Service

    ChromeでクリックするだけでPocket (Formerly Read It Later)に保存…

    あとで読むためのWebサービスでPocketを使ってるんですが、Chr…

  4. Web Service

    iPhoneからWordPressの投稿や固定ページ編集、コメント承認もできるアプリ「WordPre…

    前回iPhoneからWordPressの記事を投稿、編集できるアプリ「…

  5. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  6. Web Service

    CSSで使えるカラーネームの一覧を見やすく表示してくれる「147 Colors」

    覚えておくと便利そうだったのでメモしときます。CSSでも使える147種…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP