【CSS3 GENERATOR】CSS3の値をビジュアル上で操作して角丸、グラデーションなどのCSSを簡単に作れるウェブサービス

2015.02.12

角丸、影付き、グラデーションなどのCSSを書くのは毎回ちょっとめんどくさい。。

イメージ画像
角丸などのCSSを書くのはベンダープレフィックスなどもあるので、
毎回書くのがおっくうになる時があります。

そんな時はCSS3 GENERATORがとても便利です。

指定できる内容は、
  • ・border-radius ・・・要素の角丸
  • ・box-shadow ・・・要素の影付き
  • ・background gradient ・・・要素のグラデーション
  • ・opacity ・・・要素の透明度
が指定できます。

使い方

使い方はビジュアル上で操作できるので、
ほぼ迷うことはないと思います。

スライダーなどでグリグリいじって、
「GET THE CODE!」をクリックするとジェネレートされたコードが表示されます。

ベンダープレフィックスもOld Microsoft、Old Mozilla、Webkitなど必要なベンダーを選べるようになっているので、
必要なベンダープレフィックスにチェックしてコピーして必要な箇所に貼り付けてください。
イメージ画像

参考にしたホームページ・ブログ- I thank for this article. -

← 【device.js】ホームページにアクセスしたデバイスに関するClassをhtmlタグに付与するJavaScript
jQueryで$(this)の子要素、孫要素などの子孫要素を取得する方法 →