• GIZMODO
  • FUZE
  • DIGIDAY
  • gene
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • roomie
  • machi-ya
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

ゲストライター  -   06:00 PM

角丸や文字装飾からアニメーションまで自動作成できるCSS3ジェネレータ「CSS3.0 Maker」

角丸や文字装飾からアニメーションまで自動作成できるCSS3ジェネレータ「CSS3.0 Maker」

100820_css3maker.jpg


最近、CSS3のチュートリアルなど、CSS3関連の記事をよく見かけます。CSSを自動的に作成してくれる「ジェネレータ」も、続々登場しています。今回は、非常に使いやすくて、多機能なCSS3ジェネレータ「CSS3.0 Maker」を紹介します。

以下に使ってみた様子を載せておきます。

 


まず「CSS3.0 Maker」にアクセスしましょう。


100820_css3maker_00.jpg


  1. スタイルの設定
  2. プレビュー
  3. CSSのコード
  4. 対応ブラウザ

といった具合になっています。上部にメニューがあり、そこで様々なタイプのスタイルを選べます。以下に一部を紹介しますね。

Border Radius

100820_css3maker_01.jpg

いわゆる「角丸」というもので、角を丸くすることができます。

Gradient

100820_css3maker_02.jpg

図形の色をグラデーションできます。

Box Shadow

100820_css3maker_04.jpg

影をつけることができます。ぼかしも可能。

これらの他にも、図形を回転できる「Transform」や、テキストに影をつけられる「Tex Shadow」、動きをつけられる「Animation」など、様々なスタイルを作ることができます。

簡単にCSS3のコードを生成できるので、覚えておくと便利なサイトですね。


CSS3.0 Maker [via delicious]

(カメきち)

 

MORE FROM LIFEHACKER

powered by
    
    
    
  

Kotaku

Recommended

© mediagene Inc.