detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ
Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...
CSS - Archives
簡易的なダークモード・その2
Result See the Pen Smarter inverted “dark mode” by kachibito (@kachibito) on CodePen. 以前書いたCSSで出来る簡易的なダークモードの...
イージングを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だけでヒーローイメージのセクションにシンプルなパララックス効果
Result See the Pen JjGZEBp by kachibito (@kachibito) on CodePen. CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれま...
CSSだけで任意のテキストを1クリックで全選択
Result See the Pen Select All by kachibito (@kachibito) on CodePen. 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません ...
CSSだけでサムネイルをクリックすると画像が切り替わるイメージギャラリー
Result See the Pen CSS Image Gallery by kachibito (@kachibito) on CodePen. こういうやつです。割と今更感な内容ですが書いてなかった気がするの...
円状の要素の中にテキストを収める
Result See the Pen HTML text inside a circle shape by kachibito (@kachibito) on CodePen. 円の中にテキストが自動で収まるように...
contenteditableな要素にplaceholderを与える
Result See the Pen Placeholder support for contentEditable elements, without JavaScript by kachibito (@kachibito...
CSS製のユニークな背景パターン集
Result See the Pen #the100dayproject CSS patterns by kachibito (@kachibito) on CodePen. ちょうど100のパターンがあります。イ...
多種多様なCSSローダー集
Result See the Pen Loaders for website by kachibito (@kachibito) on CodePen. CSS製ローダー集です。以前は一つの要素で三角を使った複雑な...
clip-pathで背景を斜めにカットする
Result See the Pen CSS Tip of the Day 17 by kachibito (@kachibito) on CodePen. CSSで背景を斜めにカットする方法です。別段特別な内容で...
CSSと1つのdiv要素で出来る表現いろいろ
Result See the Pen Single div challenge by kachibito (@kachibito) on CodePen. 1つのブロック要素とCSSで出来る表現をまとめたもの。スタ...
動画を再生したまま一部だけチラ見せする
Result See the Pen Video button animation by kachibito (@kachibito) on CodePen. 動画をあらかじめ再生しておいて一部だけ見せる事でユーザ...
CSSのみでスクロール時に各セクションを固定するパララックス
Result See the Pen Sticky Sections (Pure CSS) by kachibito (@kachibito) on CodePen. タイトルでうまく説明できませんでしたけどこうい...
CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ
Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且...
blend-modeで白抜き文字
Result See the Pen KKKEYaw by kachibito (@kachibito) on CodePen. SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ 縁取りだけなら...
CSSだけで画像のビフォーアフターを見れるやつ
Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という...
CSSだけでページ内スムーススクロールとスクロール先のテキストをハイライト
Result See the Pen Footnotes by kachibito (@kachibito) on CodePen. ページ内をスムーススクロールするとそのターゲットとなる箇所が移動後にハイライトする、...
なるべく少ないコードでレスポンシブなtable
Result See the Pen Responsive Tables #2.5: Flexbox by kachibito (@kachibito) on CodePen. ※内容は最新の方法的なものではなく以前か...
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. 以前書いたものとは別で、こちらは任意の場所で区切...