CSSだけでテキストのモーフィングアニメーション Result See the Pen CSS morphing by kachibito (@kachibito) on CodePen. JavaScriptやSVGなども使わず、純粋なCSSだけで上のようなモーフィ...2021.06.07 | 10時03分26秒
SVGを使ったCSSツールチップ Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...2021.05.08 | 9時53分37秒
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...2020.11.14 | 10時04分37秒
CSSのみで、クリックするとGIFアニメが再生されるやつ Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG...2020.07.20 | 10時08分57秒
blend-modeで白抜き文字 Result See the Pen KKKEYaw by kachibito (@kachibito) on CodePen. SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ 縁取りだけなら...2019.11.22 | 9時48分37秒
CSSだけで画像のビフォーアフターを見れるやつ Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という...2019.11.13 | 9時56分42秒
なるべく少ないコードでレスポンシブなtable Result See the Pen Responsive Tables #2.5: Flexbox by kachibito (@kachibito) on CodePen. ※内容は最新の方法的なものではなく以前か...2019.10.18 | 9時48分15秒
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ...2019.10.13 | 10時13分31秒
フローチャート式のサイトマップ Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、...2019.09.05 | 10時28分25秒
hrの使いやすそうなスタイリングいろいろ Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし...2019.07.01 | 10時02分20秒
CSSのみでアコーディオン・2パターン Result See the Pen Pure CSS Accordion by kachibito (@kachibito) on CodePen. 今更感半端ないですが、CSSのみでアコーディオン 全部開けら...2019.06.15 | 10時39分10秒
CSSでフォルダツリーを作る Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ...2019.04.04 | 9時08分21秒
CSSで要素を斜めに2分割して境界線を透過 Result See the Pen Animated CSS mask-image gradient by kachibito (@kachibito) on CodePen. mask-imageとlinear-gradie...2018.12.21 | 10時12分04秒
CSSで横向きのフローチャート Result See the Pen CSS Horizontal Family Tree by kachibito (@kachibito) on CodePen. 横向きのフローチャートです。家系図とかにも使えそう コードは固...2018.12.10 | 7時25分46秒
クリックで展開するSNSシェアボタン Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...2018.10.15 | 9時43分19秒
アニメーションエフェクト付きのtoggleボタン Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...2018.10.04 | 8時49分05秒
画面を斜めに分割して2つの動画を表示する Result See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen. 画面を斜めに分割して動画を2つ同時に再生するサンプルで...2018.09.02 | 9時38分15秒
CSS Gridを使ったガントチャート Result See the Pen CSS-Grid Gantt Chart by kachibito (@kachibito) on CodePen. CSS Gridを使ったガントチャートの実装例です css ...2018.08.13 | 10時13分05秒
SVGとCSSでアニメーションする円状プログレスバー Result See the Pen SVG circular progress: CSS animated & Angle gradient by kachibito (@kachibito) on CodePen. SVGとC...2018.08.06 | 10時15分06秒
グラデーションな下線 Result See the Pen Underline gradient animation by kachibito (@kachibito) on CodePen. 下線がグラデーションになっているかのようにする 疑似要素を...2018.07.24 | 10時04分28秒
SVGで作る非長方形なヘッダ画像いろいろ Result See the Pen Non Rectangular Headers with inline SVG by kachibito (@kachibito) on CodePen. インラインに書いたSVGを画像に重ねる...2018.07.07 | 10時35分20秒
CSSだけでスクロールに応じたプログレスバー Result See the Pen CSS only scroll indicator by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが進んで、 あとどれくらいページの...2018.06.29 | 10時25分05秒