CSS - Archives

非推奨の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だけ...

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

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

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

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

SVGの形状に沿ってテキストを折り返す(shape-insideっぽく)

Result See the Pen Wrapping Text Inside an SVG: Shape Outside Prototype by kachibito (@kachibito) on CodePen...

CSS Gridで任意の要素を左右上下中央寄せにする

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. 今更な話題ですけどCSS Gridで任意の要素を左右上下中央寄せにするやつです...

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

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

CSSだけでマルチカラーなテキスト

Result See the Pen Multi Colored Text with CSS by kachibito (@kachibito) on CodePen. CSSだけでマルチカラーなテキストを作る...

CSSだけでテキストのモーフィングアニメーション

Result See the Pen CSS morphing by kachibito (@kachibito) on CodePen. JavaScriptやSVGなども使わず、純粋なCSSだけで上のようなモーフィ...

CSS製のローダーいろいろ

Result dev.toに沢山紹介されていたので気に入ったものをピックアップしました See the Pen The Dots by Temani Afif (@t_afif) on CodePen. ...

CSSだけでスムーズスクロールするページ内ナビゲーション

Result See the Pen CSS Only - Smooth Scrolling Sticky ScrollSpy Navigation by kachibito (@kachibito) on CodePen...

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でアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラ...

CSS Gridでシンプルなカレンダー表示

Result See the Pen Simple Calendar With CSS Grid by kachibito (@kachibito) on CodePen. CSS Gridを使ってカレンダーを作ろ...

detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ

Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...

簡易的なダークモード・その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. こういうやつです。割と今更感な内容ですが書いてなかった気がするの...
Ads