CSS3グラデーション作成サイト-Grad? Gradient!-作ってみました

ひとまず、この手のCSS3のプロパティや値を表示してくれるジェネレータは結構見かけますが、一番CSS3で取っ付きにくいその一つとしてグラデーションだと思う方も多いでしょう。

レンダリングエンジンによって書き方も変わってくるグラデーションはなかなか憶えにくいので、少なくともそこだけ作れたら良いなと思って、なにか作ってみようと思うのがキッカケでした。

1.jpg
(↑そろそろちゃんとサイトを持ってそこで運営しないとなあ、と思ってます、ひとまず個人ブログで。)

JavaScript始めたばかりといってもいいので、ソースはとんでもない事になってますが、FireFox, Safari, Chrome(どれもMac版)でしか確認とれてませんが、テストで上げてみます。

習作ということでご理解ください、たまにおかしなCSSソースを吐くかもしれません。。

2.jpg
縦のグラデーションスライダーは、PhotoshopやFireworksなどでも可能な、色の追加が可能です。クリックすると、そこにスポイトみたいなのが現れます、ダブルクリックでカラーピッカーが出ますので、色を選択してOK。

3.jpg
左下のボタンは、サンプルとして使えます。
クリックすると、そのボタンのグラデーションの状態が左上スライダーにも反映されます。
このサンプルグラデーションからさらに加工ができます。

5.jpg
右下にはCSS3コードが出てきます、ただし、この「Grad? Gradient!」はCSS2の知識がある方に向けて(つまり僕みたいな)作ってあるので、font-weightやpaddingといったプロパティは吐きません。
(そこまで作るのも大変、、、)

4.jpg
ただし、右上のtext-shadowなど、ここは練習のため、自分で書くようにして憶えましょう!
(その方が自分のためだと思って...)

あくまで無責任に作ってある習作なので、いかなる責任も負えません(笑)

Category

Facebook

このページの最初へもどる