[CSS] CSS Checkbox Styles From CodePen – チェックボックス装飾の作例まとめ
CSSで行うチェックボックス装飾の作例をまとめた記事。どの作例もCodepenで作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。
Tag Archives: Snipet
[CSS] A huge collection of CSS backdrops – CSSだけで描画するクールなグラデーション背景
CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。
[CSS] Basscss – 汎用クラスをまとめたCSSフレームワーク
汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。
[CSS] You Might Not Need Javascript – ソレもしかしたらJSじゃなくも良くね？という作例集
Javascript使わなくてもCSSだけでできるYO！という作例集。例えばイメージスライダーやModal、ビュースイッチャー（タブ切り替え）、ファイルアップロード、フォームバリデーション、アコーディオン、Lightboxなどを、JSを使わずにCSSだけで実現する方法が紹介されています。CSSはSCSS形式で記述されているので、通常のCSSの方が使いやすいという人はSassMeisterあたりを使えばエンコードできます。JS使わなくてもわりと色々できちゃうんですよね。
[CSS] 18 Simple Styles for Horizontal Rules (hr CSS Design) – 罫線デザインの作例
罫線のデザイン作例。hrタグに対してCSS適用するだけなので簡単に導入できます。自分の場合Webで罫線デザインするのって結構やりかた忘れるので（borderだっけheightだっけみたいな）、これ系のコードスニペット用意しておくとサクっと使えるのでわりと重宝してます。地味ですけどね。けど大事ですよねこういうネタ帳。
[Web Design] Use Cases for Fixed Backgrounds in CSS – 固定背景の使い方色々
CSSで背景を固定した演出方法が色々と紹介されています。背景固定って早い話が「background-attachment: fixed;」なんですが、例えばvh単位を使った縦幅いっぱいにスライド形式で見せる方法や、ヘッダの大きめビジュアルだけ固定した印象的な見せ方、フィルタやマスクを使った変則的な背景演出など、Webでよく使われる手法がCodepenを使って紹介されています。スクロール芸のネタ帳としてなかなかナイスなまとめ記事。
[CSS] Progress Button Styles – プログレスバーを兼ねたボタン作例
プログレスバーを兼ねたSubmitボタンの作例まとめ。クリックするとボタンの中、もしくは周辺でプログレスバーが展開されます。ファイルのアップロードとか、進捗の確認ができた方がいいボタン作る時なんかに良さそうです。
[CSS] 4 Really Useful, Re-Useable Code Snippets from Codepen – マジで使える4つのコードスニペット
クッソ使える（このへんの訳で合ってんのかなこれ）コードスニペット4つを紹介した記事。かっちょいいローディングバー、Pure CSSなパララックスピクセル、Pure CSSなカルーセル（イメージスライダー）、マウスオーバーで拡張するフォトギャラリーの4つが紹介されています。Codepenを使って紹介されているので動作確認も導入もサクっとできそうです。JSいらずのカルーセルとかイイっすね。