• GIZMODO
  • FUZE
  • BUSINESS INSIDER JAPAN
  • 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]

(カメきち)

 

  • ,,,,, - By 香川博人LIKE

    キレイ&リラックスだけじゃない。お風呂で男を磨く3つの身だしなみとは?

    Sponsored

    キレイ&リラックスだけじゃない。お風呂で男を磨く3つの身だしなみとは?

    キレイ&リラックスだけじゃない。お風呂で男を磨く3つの身だしなみとは?

    「あぁ、気持ちいい」と、お風呂で過ごす時間は、心身ともにリフレッシュできますが、実は、あなたの印象を大きく変える「身だしなみ」を整えるタイミングでもあります。 ビジネスマンにとっての身だしなみは、最低限のマナーであり、見えない部分にまで気を配ることで、安心感と自信を与えてくれます。 そこで、この春から実践したい「お風呂だからこそできる、男を磨く3つの身だしなみ」をご紹介します。  11:00 AM

MORE FROM LIFEHACKER

powered by
    
    
    
  

lifehacker

Recommended

© mediagene Inc.