CSS - Archives

多種多様な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で出来る表現をまとめたもの。スタ...
Ads

動画を再生したまま一部だけチラ見せする

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. 以前書いたものとは別で、こちらは任意の場所で区切...

子要素の数が特定の数の間である場合にスタイルを適応させる

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. フローチャート式のサイトマップというか、...

SVGとanimationで滑らかな動きの波っぽいやつ

Result See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen. ヒーローイメージに...

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のスタイルいろいろを小奇麗にし...
Ads