自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子...
CSS - Archives
filterプロパティで、どんな背景画像でもテキストが読める状態にする
Result See the Pen Text Over Any Background by kachibito (@kachibito) on CodePen. どんな背景でもテキストを読める状態にする、というもの ...
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する
Result See the Pen CSS-only Todo by kachibito (@kachibito) on CodePen. いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで...
CSSだけでシンプルなLight/Darkモード
Result See the Pen Dark Mode without Javascript by kachibito (@kachibito) on CodePen. Webアプリやスマホアプリ等でよくあるダークモ...
CSSでフォルダツリーを作る
Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ...
CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル
Result See the Pen Pure CSS Responsive Accordion Table by kachibito (@kachibito) on CodePen. PCではテーブル、スマホやタ...
CSSだけで簡易的なリストのソート
Result See the Pen Sort Elements with Flexbox (Pure CSS) by kachibito (@kachibito) on CodePen. 選択したグループに該当するア...
Clip Pathで画像内の任意の箇所にスポットライトを当てる
Result See the Pen Highlight a part of the image - Clip Path + Grid by kachibito (@kachibito) on CodePen. CSS...
レスポンシブ対応のヘキサゴンブロックを使ったハニカム構造のグリッドレイアウト
Result See the Pen Responsive Honeycomb Layout by kachibito (@kachibito) on CodePen. flexboxでハニカム構造なレイアウトです ...
背景画像にアニメーションで変化するグラデーション
Result See the Pen demo:Hero Image × CSS Gradient #2 by kachibito (@kachibito) on CodePen. 以前かいたfilterを使う方法とは異なり、複数設...
「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする
Result リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです サンプル上が従来の疑似要素を使った方法で...
マウスホバーで画像にスプリットエフェクト
Result See the Pen Split Image on hover by kachibito (@kachibito) on CodePen. 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです ...
CSSで要素を斜めに2分割して境界線を透過
Result See the Pen Animated CSS mask-image gradient by kachibito (@kachibito) on CodePen. mask-imageとlinear-gradie...
CSSで横向きのフローチャート
Result See the Pen CSS Horizontal Family Tree by kachibito (@kachibito) on CodePen. 横向きのフローチャートです。家系図とかにも使えそう コードは固...
CSSでベン図っぽいやつ
Result See the Pen CSS Grid and Shape-Outside Venn Diagram by kachibito (@kachibito) on CodePen. ベン図(Wikipedia)っぽいやつ...
簡単なコードでマウスホバーした要素以外を透過する
Result See the Pen Sibling fade by kachibito (@kachibito) on CodePen. かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライト...
SVGでアニメーションしながら形状が遷移する検索フォーム
Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...
contenteditable属性でページ内のCSSを変更する
Result See the Pen A style tag styling itself. by kachibito (@kachibito) on CodePen. 実用性はさておき、面白かったので備忘録。 コンテンツを編集...
任意のコンテンツを徐々に表示させる
Result See the Pen Happy Ada Lovelace Day by kachibito (@kachibito) on CodePen. CSSだけでアクセス時に徐々に任意のコンテンツを表示させます 本記事で...
CSSでinputに入力したらlabelのスタイルが変更されるようにする
Result See the Pen @supports for selectors by kachibito (@kachibito) on CodePen. :placeholder-shown疑似クラスを使ってlabelのスタ...
border-radiusを使って要素をアニメーションでいろいろな形に変形させる
Result See the Pen Animating border-radius by kachibito (@kachibito) on CodePen. border-radiusで作れる様々な形状を利用してkeyframe...
クリックで展開するSNSシェアボタン
Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...