Webアクセシビリティーに配慮したカラーパレットを生成してくれて、さらに投票もできるサイト。一定のコントラストが確保された、背景色と文字色を出力してくれます。あとパレット生成の度にCSSコードも吐き出してくれます。よくあるカラーパレットオススメツールではあるんだけど、出て来る配色がイイ感じのものが多かったのが個人的にグっときました。ちなみに「a11y」ってなんのこっちゃ、って最初思ったんですが、この言葉って「accessibility」の略語なんですね。「単語なげーから途中の11文字略したわ！」的な流れで出来たそうで。こういう乱暴な略し方嫌いじゃないです。
たまに目にする、コンテンツの境目の背景色を斜めにするデザイン、アレをサクっと導入できるSCSS。導入は簡単で、ダウンロードした「_angled-edges.scss」をメインのSCSSファイルから読み込むだけ。mixinを使って斜めってる角度の調整なんかもできます。斜めになっている部分はSVGで描画されるので、様々な形や色に対応できるようです。境界線を斜めにすると動きを出せるのでイイですね。導入も簡単だし早速何かに使おうと思ってます。
CSSライブラリやフレームワークが50個紹介されてます。そんなにあるの！？って思いましたが、わりと細かいネタCSSなんかもあって、ゆるーい感じで見れます。例えばStar Wars Intro.css、もうこれはアレです、スター・ウォーズのイントロを再現しただけのCSSです。他にはマイクラっぽい3Dオブジェクトを作るもの、CSSだけで作るローディングアニメーションなどもあります。Brand ColorsなんかはCSSライブラリというよりはカラーピッカーですね。結構量も多いので見応えあります。
クールサイトを紹介するデザインギャラリー。ファッションやアートなどの、意識高い系サイトが多く紹介されてます。サイト名のhttpsterが一見hipsterに見えるのも、多分狙ってるのでしょう。ソレ系の人が好きそうな作例が多いです。そういや数年前の事だけど、一時期山ほどあった「CSSなんちゃら」系のデザインギャラリーサイトってどこ行ったんでしょうね。
CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。
動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。
CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。
画像を使わずに、CSSだけで描画できるアイコンセット。アイコンをクリックすると、HTMLとCSSコードが表示されるので、あとはそれをコピペして使うだけ。HTMLタグはdivが使われているようです。またCSSコードにマウスオーバーすると、そのコードでアイコンのどの部分が描画されているのかも分かるようになってて、なかなか興味深いです。使い勝手の良さ以外に、サイトの軽量化という目的でも使えそうです。
