おすすめCSS3ジェネレーター

こんにちは山梨ブドウです。
今回は簡単にCSS3を適用できるジェネレーターを紹介したいと思います。

スマートフォンサイトでCSS3を使うことが多くなってきました。そこで、CSS3を使ってサイトを作成する方に、少しでも作業量を減らすためにCSS3ジェネレーターを活用することをおすすめします。

「CSS3 Generator」を活用

「CSS3 Generator」は、グラデーション、角丸、シャドウ、透明度などを視覚的に調整できる便利なツールです。調整も簡単で気に入った形を作成し、CSS3のコードを容易に発行することができます。

また、「CSS3 Generator」には、特に便利な機能があり、コードを発行したときに古いバージョンのIEや各ブラウザ(Firefox、Operaなど)に対応したCSS3のコードを作成してくれます。これは、ブラウザによってCSS3のコードの書き方が違うのでとても役に立ちます。

blog01

URL:http://www.css3.me/

「CSS3 Generator」の使い方

1.「border-radius」は角丸の調整。

2.「box-shadow」はシャドウの調整。

3.「background gradient」を”ON”にするとグラデーションの調整が可能。

4.「opacity」は透明度の調整。

5.「GET THE CODE!」をクリックするとコードが発行させるのでコピーして貼り付ければ完了。

サンプルコード

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffffff, #000000);
background-image: -ms-linear-gradient(top, #ffffff, #000000);
background-image: -o-linear-gradient(top, #ffffff, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
background-image: -webkit-linear-gradient(top, #ffffff, #000000);
background-image: linear-gradient(top, #ffffff, #000000);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

まとめ

以上が、「CSS3 Generator」の紹介です。最近ではCSS3のみで装飾することも増えてきていますので制作時間短縮の上でも活用してはいかがでしょうか。CSS3をまだ使ったことがない人もこのツールを使ってコードに慣れるのもいいと思います。

カテゴリー: html5, Webサイト, その他, スマホアプリ, 技術開発 パーマリンク