うっすらと背景のグラデーションが動くサイトってたまにありますよね。あれのジェネレーター。このサイトもよく見ると、うっすらとグラデーションが動いてますが、このコードを生成する事ができます。画面左にはグラデーションの方向と、アニメーションの方向指定があり、その下にはグラデーションで使う色の指定があります。色については2色だけでなく3色以上のグラデ指定もできるようです。これらを指定した後で「Preview」ボタンを押すと、サイトの背景に適用されます。指定した内容は随時右側に出てるCSSコードに反映されるので、気に入ったグラデーションが出来たらそれをコピーすればオッケ。いやーこのジェネレーター便利ですな。
Webタイポグラフィーの作例をギャラリー形式で紹介しているサイト。各作例はどれも「見出し」「小見出し」「本文」「引用」という一般的な文書フォーマットで構成されており、また使われている色についてもHEX指定で一通り紹介されています。そしてCSSも一式見れるようになっているので、コードをコピペすれば近いデザインの文書をサクっと作る事もできます。いやこれナイスですね。ただしフォント指定は欧文圏のものなので、日本語のサイト制作に応用する際には置き換えた方が良さそうです。
ランダムに2色グラデーションを生成してくれるサイト。使い方は右上にある「Roll」ボタンを押すだけ。押す度にグラデーションを作ってくれます。とってもシンプルです。気に入ったグラデができた時には、「Code」ボタンを押せば2色それぞれのRGB, HEX, HSLを表示してくれます。また併せてCSSコードも出してくれるので便利です。フラットデザインの流れになった後、ノーシャドウ＆ノーグラデーションが主流になるかと思ったんですが、個性的なグラデーションはiOS 7のデザインのせいか、結構使われる機会が多いですな。
コードのコピペで使えるSVGアイコン。使いたいアイコンをクリックすると、アイコンを描画するためのHTMLコードが出てきますので、基本これをコピペするだけで使えます。pathという見慣れないタグで描画されてるんだけど、これはSVGでシェイプを描画する際に使われるタグだそうです。また導入に関してはベーシックCSSファイルの併記も必要です。用意されているアイコンはどれもモバイル環境などで一般的な、UIとしてよく使われる類のアイコンばかりです。コードのコピペだけでアイコンを導入できるので便利ですね。
使い勝手の良いSVGパターンの配布サイト。ファイルは一式という形でダウンロードする事ができ、サイト内ではそれらの色や大きさを変えて試す事ができます。どう使い勝手が良いかというと、まずSVGであるという点。ベクターパターンなので拡大縮小が簡単です。次に各パターンは画像ファイル単体ではなく、CSSファイル内にData URIとして埋め込まれている点。なのでパターンを配置する際に画像ファイルを置かなくても、コードのコピペだけで使えます。またCSSだけでなくSCSSファイルも同梱されてるので、記述方法がSCSSメインの人やサイトにも対応ができます。いやこれ便利ですね。パターンの数もそこそこあるので、コーディングベースでの装飾に使えそうです。
CSS記述をショートハンドフォーマットに変換してくれるオンラインツール。サイトを開くと「例えばこんなCSSならこうしちゃうYO！」という例が表示されてます。fontやbackground、margin、padding、borderあたりに効きそうですね。ただショートハンド記述ってどちらかというと、書く人がラクに書けるように用意されたものであって誰かに変換してもらうようなものでもないという気もします。ショートハンド記述が苦手な人がお手本にするのが正しい使い方なのかも。この記述法だと結果的にデータ量も減ってCSSも圧縮できますしね。
SVG画像のオンラインジェネレーター。プリセットされているパターンがいくつか用意されており、それぞれのパターンを細かくカスタマイズしてダウンロードする事ができます。このサイトナイスなのが、SVGフォーマットでダウンロードする手法以外に、CSSに簡単に埋め込めるようBase64でエンコードしたテキスト形式でも画像の取得が可能という点です。エンコード済みなのでテキストをCSSファイルにコピペするだけで、背景画像なんかにサクっと貼る事ができます。とってもお手軽でナイスです。
Javascriptを使わない、Pure CSSなパララックススクロールの手法が紹介されてます。コードを見るとtransform: translateZ()を使って、ブロック要素をZ軸にズラしているようですが、細かい事は実際に導入してみないと分かりませんね。対象ブラウザはFirefox, Safari, Opera, Chromeとの事なので、ウンコIEさえ無視する事ができれば導入の敷居も低そうです。CSSだけでパララックススクロールの動きを作れるというのはなかなかナイスですな。
