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

    WebサイトのタイトルとURLを簡単に取得できて自分用HTMLリンクも作成できるChrome拡張機能…

    現在見ているWebサイトのタイトルとURLを簡単に取得できたり、自分用…

  2. Web Service

    pxからemに文字サイズを変換してくれるツール「px-em」

    最近ではレスポンシブWebデザインなどで文字サイズにemを使う機会も増…

  3. placekitten

    Web Service

    Webサイト作成時に可愛い猫のダミー画像を用意してくれる「placekitten」

    とても素敵なWebサービスがあったのでご紹介します。Webサイトを作成…

  4. プレーンテキストでペースト

    Web Service

    Evernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法

    意外と活用するシチュエーションが多いのでメモがてらご紹介します。Eve…

  5. PageSpeed Insights

    Web Service

    Webサイト高速化にするための必要項目を教えてくれるGoogleツール「PageSpeed Insi…

    Webサイトを高速化にするために必要な項目を教えてくれるGoogleツ…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP