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

    画像を指定すれば色の値を教えてくれるジェネレーター「Color Palette Generator」…

    便利そうだったので使ってみました。画像のURLを指定すれば、その画像に…

  2. Web Service

    送信と受信ができて60分だけ使用可能な使い捨てメールアドレス「GuerrillaMail.com」

    ちょっと便利そうだったのでメモしときます。送信と受信ができて60分だけ…

  3. Web Service

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

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

  4. Web Service

    サクっと簡単にクールなロゴを作成することができる「GraphicSprings」

    こういうサイトのおかげで誰でも簡単にプロが作ったようなロゴを作成するこ…

  5. Web Service

    話題のiPhoneのTODO管理アプリ「Clear」を使ってみた

    いくつかの記事で話題になっていたTODO管理アプリのClearがいつの…

  6. Web Service

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

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

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP