CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且... 2019.11.28
blend-modeで白抜き文字 Result See the Pen KKKEYaw by kachibito (@kachibito) on CodePen. SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ 縁取りだけなら... 2019.11.22
CSSだけで画像のビフォーアフターを見れるやつ Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という... 2019.11.13
CSSだけでページ内スムーススクロールとスクロール先のテキストをハイライト Result See the Pen Footnotes by kachibito (@kachibito) on CodePen. ページ内をスムーススクロールするとそのターゲットとなる箇所が移動後にハイライトする、... 2019.10.26
なるべく少ないコードでレスポンシブなtable Result See the Pen Responsive Tables #2.5: Flexbox by kachibito (@kachibito) on CodePen. ※内容は最新の方法的なものではなく以前か... 2019.10.18
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ... 2019.10.13
CSSで「続きを読む」を作る Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切... 2019.10.03
子要素の数が特定の数の間である場合にスタイルを適応させる Result See the Pen "Between" quantity queries by kachibito (@kachibito) on CodePen. 子要素が特定の数の場合のみスタ... 2019.09.20
フローチャート式のサイトマップ Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、... 2019.09.05
SVGとanimationで滑らかな動きの波っぽいやつ Result See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen. ヒーローイメージに... 2019.08.24
blockquoteのcite属性を使って引用元をユーザーに明示する Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも... 2019.08.23
チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る Result See the Pen Locked input field - CSS only by kachibito (@kachibito) on CodePen. ちょっと今更感ありますけど、チェックボックス... 2019.08.05
外部サイトのリンクにだけ特定のアイコンを付与する Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、... 2019.07.29
IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する Result See the Pen Multi-line-truncation in Pure CSS w/IE11 support (Exclusions) by kachibito (@kachibito) on Co... 2019.07.24
SVGテキストとCSSブレンドモードとの組み合わせ Result See the Pen SVG Blended Outline & Text by kachibito (@kachibito) on CodePen. 白抜きと通常のテキストを用意して少しずらし... 2019.07.14
CSSだけで作られたストップウォッチ Result See the Pen CSS-only chronometer by kachibito (@kachibito) on CodePen. CSSだけで作られたストップウォッチです。実用性を無視した... 2019.07.11
hrの使いやすそうなスタイリングいろいろ Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし... 2019.07.01
Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア... 2019.06.19
CSSのみでアコーディオン・2パターン Result See the Pen Pure CSS Accordion by kachibito (@kachibito) on CodePen. 今更感半端ないですが、CSSのみでアコーディオン 全部開けら... 2019.06.15
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. CSSカウンターで加えた数字をグラデーションに、とい... 2019.06.10
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子... 2019.06.01
filterプロパティで、どんな背景画像でもテキストが読める状態にする Result See the Pen Text Over Any Background by kachibito (@kachibito) on CodePen. どんな背景でもテキストを読める状態にする、というもの ... 2019.05.07