角丸・グラデーション・影・透過を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」

CSS3 Generatorアイキャッチ画像

簡単に角丸・グラデーション・影・透過を表現する高度なCSS3を自動生成してくれる「CSS3 Generator」を紹介します。

バーを調整して視覚的に設定してから出力できるのでわかりやすいですね。

CSS3 Generator操作解説

操作方法

  • border-radius:角丸の設定
  • box-shadow:影をつける設定
  • background gradient:背景をグラデーションにする設定
  • opacity:透過させる設定

また上部にあるedit the basicsをクリックすると下の画像のように枠が表示され、枠線の太さ・色・背景色を設定することができます。

CSS3 Generatorの基本設定

またこのサイトで出力されたコードは古いブラウザやInternet Explorerのサポートも付いているので便利です。

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

顔バレを防げてSNSのアイコンにも使えるBrickapic。簡単にレゴ風自画像が作れて便利!
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
WEB制作で無料写真素材を探すならPixabay!高品質で素敵な画像が役立ち過ぎる!
本や雑誌の表紙の洗練された配色コードを簡単に調べることができる「Color of Book」
関西のWebデザイナー・クリエイター等のIT関係のセミナーをまとめてみました。
無料で使えるロゴをダウンロードできる素材集サイト「LogoInstant」
初心者必見!PHPを勉強したい方へおすすめしたい学習サイト6選
PDFが劇的に圧縮される!無料・オンラインでPDFの容量を減らすSmallpdf.com
Webデザインをする時に参考にしたいウェブデザインのまとめサイト ※国産サイト
HTMLとCSSをリアルタイムにプレビュー確認できるWebサービス「CSSDesk」
作成したHTMLやCSS・JavaScriptコードを共有できる「jsdo.it」
プログラミング等を3分動画で初心者向けに動画で解説してくれる「ドットインストール」
.htaccessや.htpasswdなどの生成してくれる「lufttools」がすこぶる使える!
好きな色や大きさにカスタマイズしたアイコンを無料でダウンロードできる「PNGify Me」が便利!
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」

Menu

HOME

 TOP