CSS - 小技

:has()を使って親要素内に存在する子要素を数えるCSSのサンプル

Result See the Pen Counting child items with :has() by kachibito (@kachibito) on CodePen. かなり世間から遅れていて今...

非推奨のmarqueeタグのような動作をモダンなCSSで再現

Result See the Pen CSS Marquee Examples by kachibito (@kachibito) on CodePen. ジオシティーズ時代のWebサイトの象徴のような存在...

文章の任意の行で文字省略を3点リーダーでなくグラデーションで

Result See the Pen MDN's cool truncation by kachibito (@kachibito) on CodePen. 長い文章を自動で省略するやつです。 CSSだけ...
Ads

CSSだけでスクロールに合わせて動くホログラムっぽいやつ

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. 角度を変えたり等、動かす事でキラキラする、いわゆるホログラムっぽいものをC...

単一要素で枠線のあるポップなbox-shadowを作る

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ちょっとコミック風の、枠線ありのポップなbox-shadowを単一要素で作...

CSSの@counter-styleでリストのマーカーを自由に生成する

Result See the Pen Counter style with @counter-style by kachibito (@kachibito) on CodePen. @counter-style...

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. 外部サイトのリンクにだけ特定のアイコンを付ける、...
Ads