SVGとanimationで滑らかな動きの波っぽいやつ
Result See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen. ヒーローイメージに...
CSS - Archives
blockquoteのcite属性を使って引用元をユーザーに明示する
Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも...
チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る
Result See the Pen Locked input field - CSS only by kachibito (@kachibito) on CodePen. ちょっと今更感ありますけど、チェックボックス...
外部サイトのリンクにだけ特定のアイコンを付与する
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...
SVGテキストとCSSブレンドモードとの組み合わせ
Result See the Pen SVG Blended Outline & Text by kachibito (@kachibito) on CodePen. 白抜きと通常のテキストを用意して少しずらし...
CSSだけで作られたストップウォッチ
Result See the Pen CSS-only chronometer by kachibito (@kachibito) on CodePen. CSSだけで作られたストップウォッチです。実用性を無視した...
hrの使いやすそうなスタイリングいろいろ
Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし...
Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する
Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア...
CSSのみでアコーディオン・2パターン
Result See the Pen Pure CSS Accordion by kachibito (@kachibito) on CodePen. 今更感半端ないですが、CSSのみでアコーディオン 全部開けら...
リストに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カウンターを親要素と子要素の入れ子...
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 リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです サンプル上が従来の疑似要素を使った方法で...