[CSS3] 20 Free Open Source CSS3 User Interface Kits – コーディング済みのUIキット
ボタンや各種フォームパーツなどを含むUIキットをまとめた記事。これ系のUI素材でよくあるPSD形式ではなく、すでにコーディングされたソース一式として配布されている点が特徴。それぞれの装飾はCSS3でされているようです。どの作例も作りこみが丁寧で、ソースコードからサクっと導入ができそうです。UIパーツ類どうしよっか、って時なんかにナイスです。
Tag Archives: CSS
[CSS] Tridiv – ブラウザ上で動作する3D CSSエディター
ブラウザ上で動作する3D CSSエディター。3D CGのモデリングツールではあるんだけど、以前紹介したTinkercadとは違い出力先がCSSという点が個性的なエディター。動作するのはSafariとChromeだけなので、Webkit系のブラウザを対象としたツールという位置づけ。この2つカバーできるならほとんどのスマホに対応できますね。サイト内にはサンプルが用意されているので、まずはそれらを開くのがオススメ。出力先がCSSであるため、簡単な面と線で構成されたシンプルな3D CGモデルです。もちろんいちから作る事もでき、作ったものはHTML + CSSのソースコード一式としてリアルタイムに出力されます。またiframeを使ったembedもできるみたい。特別なプラグイン類が必要ない点もナイスです。その筋の人から見ればツールとしては低機能すぎるのかもしれませんが、ブラウザ内でこんな事までできるんだなーとしみじみと感心しました。
[CSS3] 40 CSS3 Animated Button Tutorials And Experiments – アニメーションを併用したCSS3ボタン作例まとめ
アニメーションを使って表現したCSS3ボタンの作例まとめ。30のボタン作例がまとめられてます。押した時に凹んだり、マウスオーバーで展開したりします。CSS3が一般化した事で最近こういう動きよく目にするようになりました。ところでこの手の作例紹介で必ず目にするCodropsというサイト、作例の量も質もはんぱねぇなぁと前から思ってました。こういうの書く人スゴいなぁと。
[CSS Framework] Magazine Grid – iPadでの誌面風表示に適したCSSフレームワーク
iPadでWebを誌面風に表示するのに適したCSSフレームワーク。一般的なグリッド数によるレイアウト方式で、見たところページ送りの機能なんかもあるっぽいです。サイズも軽く、サクっとiPadに対応したサイトを作る際に使えそうです。けどこれ系の単独デバイスものは複数デバイスに対応させる用途には逆に向かないのかもしれません。試してないので何とも言えませんが。
[CSS] atMedia.info – メディアクエリのジェネレーター
自分が使っているデバイス向きのメディアクエリジェネレーター。サイトにアクセスすると使っているディスプレイの解像度を調べてくれます。ただしインチ数だけは手動入力で、ここ入力するとDPIを計算してくれます。ページ下部にはサイトにアクセスしているデバイス向けのメディアクエリを書き出してくれて、さらにその指定がアクティブであるかどうかも色で判断してくれます。PCからアクセスしている人は、ブラウザウィンドウを縮小してみると色が緑から黒になって指定がアクティブでなくなる様子が分かると思います。メディアクエリ使う機会増えましたからね、なかなか便利なジェネレーターですな。
[CSS] BASIC READY-TO-USE CSS STYLES – すぐに使えるベーシックなCSS装飾
サクっと使えるCSSスニペットをまとめた記事。動作デモはこちら。シャドウを使ったボックス装飾、角丸の指定色々、リンクに背景色を付けたりボーダーを点線にする装飾、Metroっぽい装飾、ボーダーを使った装飾、フォーム装飾などが紹介されてます。どれもclass記述だけでサクっとできるタイプのものなので使い勝手が良さそうです。
[CSS3] One div – The single element HTML/CSS icon database – CSSだけで描画したアイコンギャラリー
画像を使わずにCSSだけで描画されたアイコンギャラリー。サイト名の通り、全てのアイコンはdivひとつだけで記述され、シェイプや動きについては画像ファイルを使わずにCSSだけで作られてます。各アイコン下部にある「CSS」ボタンを押すと、CSS記述がModal表示されます。また「ZIP」ボタンでソースコード一式のダウンロードもできます。CSSコピるだけでサクっと描画できるので、ちょっとしたアイコン探しにも便利そう。種類も結構多いです。