[CSS] Single Element CSS Spinners – CSSで描かれたローディングスピナー
CSSで描かれたローディングスピナー。HTMLエレメント1つで作られているようで、これなら導入もサクっとできそうです（作例ではdivタグで書かれてます）。各スピナー下にある「View Source」クリックで、HTMLとCSSそれぞれのコードを見る事ができます。
Tag Archives: CSS
[CSS3] Tutorials for Creating 3D Effects in CSS3 and JavaScript – CSSを使った3Dエフェクトのチュートリアルまとめ
CSSを使った3Dエフェクト作例をまとめた記事。エフェクトの性質上、マウスオーバーやクリックといったユーザーの動作によって、立体的に動くというものが多いようです。あとスライダーのトランジションなんかもあります。サイト内のリンクオブジェクトに対してマウスオーバー装飾したい時なんかに使えそうです。
[CSS3] CSS Filters Demo – 各種CSSフィルターのデモサイト
CSSフィルターのデモを一覧できるサイト。グレースケールやセピアなど、簡単なフィルタリングならCSSだけでできるので、その効果を一覧で確認できます。「なんでスポンジボブなんや」というツッコみはさておき、右上にある歯車アイコンクリックで画像を変更する事ができます。またURL入力によるカスタムイメージにも対応してるので、自分の作った画像で確認する事もできます。ってかCSSフィルターってVideoにも対応してたんですね。知らんかった。
[CSS3] CSS3 UI Kit (Source Code) – CSS3で書かれたUIキット
CSS3で書かれたUIキット。デモページはこちら。画像を使わずにCSSだけで書かれてるようで、いやースゴいなと。フォームパーツとしてもちゃんと機能してます。CSSだけなのでソースコードをコピペするだけで使えます。シンプルで品のあるあしらいなので、デザイン的な汎用性も高そうです。素晴らしい。
[CSS] After Dark in CSS – CSSで描画されたAfter Dark
いやーこれ懐かしいっすよ。オールドマックユーザーなら誰でも知っているAfter DarkをCSSで再現してます。初期Macにはスクリーンセーバーってなかったので、その頃はCRTの焼き付け防止に俺も使ってました。けど今見るとこの「フライング・トースター」ってものスゴい電波というかシュールというか、なんなんだよって感じですな。実用性という意味では皆無ですが、オッサンホイホイという事でひとつ。
[CSS] EnjoyCSS – 多機能なCSSジェネレーター
多機能なCSSジェネレーター。まずはフォーム、ブロック、ボタンの3種類の内からテンプレートを選びます。すると画面左に白いキャンバスが出てくるので、右側の各項目をエディットする事ができます。編集内容はキャンバスにリアルタイムに反映され、完成したら画面右上の「Get the Code」ボタンからCSSソースをダウンロードする事ができます。またGalleryには他の人が作った作例が色々掲載されているので、それをテンプレートにしてもイイかもしれません。慣れた人から見ると「んなもん自分で書いた方が早いよ」と思うかもしれませんが、コーディング初心者の人にとってはわりと使いやすいツールのような気がしないでもありません。
[CSS] CSS Tools for Organizing and Formatting CSS Code – CSSのコードフォーマットに関する便利なオンラインツール
CSSのコードフォーマットに関する便利なオンラインツールをまとめた記事。CSSのプロパティソート、CSS圧縮、nth-childのシミュレーター、CSS整形ツールなどが紹介されています。圧縮ツールが色々ありますね。整形や圧縮ツールって、作る側の癖に合うか合わないかってのもあるので、使い勝手の良いツールが見つかるといいですね。CSS書くのめっちゃ汚い人とかたまにいるので、そういう人に「お前これ使えや」とか言ったりするとちょっとイヤミになるのでアレだしナニだったりもしますが。
[CSS3] 10 Easy Image Hover Effects You Can Copy and Paste – コピペで使えるイメージホバーエフェクト
コピペで使えるイメージホバーエフェクトのコードスニペット集。リンク上にマウスカーソルを持ってきたタイミングで、CSS3を使った拡大や移動、ボカシ、円形ボーダー、フォトエフェクトなどにアニメーションします。サイト内のサムネール画像やボタンのマウスホバーエフェクトに使えそうです。コピペでサクっと使いやすいように簡潔にスニペットをまとめている点がとってもナイスです。