CSSの@counter-styleでリストのマーカーを自由に生成する
Result See the Pen Counter style with @counter-style by kachibito (@kachibito) on CodePen. @counter-style...
CSS - 小技
SVGを使ったCSSツールチップ
Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する
Result See the Pen zYoLQYq by kachibito (@kachibito) on CodePen. 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目...
CSSでアスペクト比を管理する
Result See the Pen oNzebOr by kachibito (@kachibito) on CodePen. CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラ...
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ
Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...
イージングをCSS関数で管理する
Result See the Pen Easings Are Rad by kachibito (@kachibito) on CodePen. 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で...
CSSのみで、クリックするとGIFアニメが再生されるやつ
Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG...
CSSだけで任意のテキストを1クリックで全選択
Result See the Pen Select All by kachibito (@kachibito) on CodePen. 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません ...
contenteditableな要素にplaceholderを与える
Result See the Pen Placeholder support for contentEditable elements, without JavaScript by kachibito (@kachibito...
clip-pathで背景を斜めにカットする
Result See the Pen CSS Tip of the Day 17 by kachibito (@kachibito) on CodePen. CSSで背景を斜めにカットする方法です。別段特別な内容で...
CSSだけで画像のビフォーアフターを見れるやつ
Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という...
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる
Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ...
CSSで「続きを読む」を作る
Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切...
子要素の数が特定の数の間である場合にスタイルを適応させる
Result See the Pen "Between" quantity queries by kachibito (@kachibito) on CodePen. 子要素が特定の数の場合のみスタ...
フローチャート式のサイトマップ
Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、...
blockquoteのcite属性を使って引用元をユーザーに明示する
Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも...
外部サイトのリンクにだけ特定のアイコンを付与する
Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、...
IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する
Result See the Pen Multi-line-truncation in Pure CSS w/IE11 support (Exclusions) by kachibito (@kachibito) on Co...
hrの使いやすそうなスタイリングいろいろ
Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし...
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. CSSカウンターで加えた数字をグラデーションに、とい...
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子...
CSSだけでシンプルなLight/Darkモード
Result See the Pen Dark Mode without Javascript by kachibito (@kachibito) on CodePen. Webアプリやスマホアプリ等でよくあるダークモ...