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で簡単に細部まで作り込みたい時なんかにはオススメかと思います。

Photoshopの移動ツールでオブジェクトを直接選択して移動・拡大・縮小・回転ができるようにするやり方前のページ

日本にいる住所を英語の住所に簡単に変換してくれるWebサービス「JuDress」次のページ

関連記事

  1. Web Service

    CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」

    ちょっと面白かったのでご紹介します。Chromeの拡張機能で、CSSで…

  2. Web Service

    Google検索結果で1年以内のものに限定してくれるChrome拡張機能「ato-ichinen」

    Chromeの拡張機能「ato-ichinen」を使ってみました。これ…

  3. タイマーループ

    Web Service

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

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

  4. Web Service

    背景パターンをお手軽に作成することができる「BgPatterns」

    背景パターンをとてもお手軽に作成することができるWebアプリ「BgPa…

  5. Web Service

    iPhoneからWordPressの記事を投稿、編集できるアプリ「するぷろ for iPhone」を…

    このブログはワードプレスを使っているのですが、最近iPhoneから直接…

  6. Macの天気予報アプリ「そら案内」

    Web Service

    Macの天気予報アプリ「そら案内」がとても使いやすい

    Macの天気予報アプリ「そら案内」をインストールしてみました。必要な情…

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP