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

    iPhoneでWikipediaを調べるためのアプリ「Wikiamo」が便利すぎる

    最近色々調べものをする機会が多くて、何かiPhoneで便利なアプリでも…

  2. Web Service

    現在見ているページのタイトルとURLを1クリックでコピーできるChrome拡張機能「Copy Tit…

    とても便利そうだったので試してみました。現在見ているページのタイトルと…

  3. CSSViewer

    Web Service

    マウスを乗せた場所のCSSコードを気軽に確認することができるChrome拡張機能「CSSViewer…

    とても便利そうだったので使ってみました。マウスを乗せた場所のCSSコー…

  4. Web Service

    あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」

    iPhoneであとで読むアプリとしてRead it Laterを使って…

  5. Web Service

    文字をペーストするだけで文字数をカウントしてくれるChrome拡張機能「文字数カウンタ」

    何気に入れておけば便利かと思ったのでインストールしてみました。文字をペ…

  6. タイマーループ

    Web Service

    複数のタイマーを設定して組み合わせることができるGoogle Chrome拡張機能「タイマーループ」…

    ブラウザの拡張機能で便利なタイマーを探していたんですが、とてもよさげな…

コメント

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

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

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP