CSSでベン図っぽいやつ
Result See the Pen CSS Grid and Shape-Outside Venn Diagram by kachibito (@kachibito) on CodePen. ベン図(Wikipedia)っぽいやつ...
CSS - Archives
簡単なコードでマウスホバーした要素以外を透過する
Result See the Pen Sibling fade by kachibito (@kachibito) on CodePen. かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライト...
SVGでアニメーションしながら形状が遷移する検索フォーム
Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...
contenteditable属性でページ内のCSSを変更する
Result See the Pen A style tag styling itself. by kachibito (@kachibito) on CodePen. 実用性はさておき、面白かったので備忘録。 コンテンツを編集...
任意のコンテンツを徐々に表示させる
Result See the Pen Happy Ada Lovelace Day by kachibito (@kachibito) on CodePen. CSSだけでアクセス時に徐々に任意のコンテンツを表示させます 本記事で...
CSSでinputに入力したらlabelのスタイルが変更されるようにする
Result See the Pen @supports for selectors by kachibito (@kachibito) on CodePen. :placeholder-shown疑似クラスを使ってlabelのスタ...
border-radiusを使って要素をアニメーションでいろいろな形に変形させる
Result See the Pen Animating border-radius by kachibito (@kachibito) on CodePen. border-radiusで作れる様々な形状を利用してkeyframe...
クリックで展開するSNSシェアボタン
Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...
アニメーションエフェクト付きのtoggleボタン
Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...
テキストリンクの下線をマウスホバーで波のようにアニメーションさせる
Result See the Pen Link Effectz - Squiggle by kachibito (@kachibito) on CodePen. リンクにマウスホバーすると波のようにアニメーションする、というもの ...
CSS Gridで作るカレンダーのレイアウトサンプル
Result See the Pen CSS grid calendar by kachibito (@kachibito) on CodePen. CSS Gridを使ったカレンダーUIのサンプルです コードはCodepenをご...
CSS Gridを使った超シンプルなグリッドシステム
Result See the Pen vzzKNb by kachibito (@kachibito) on CodePen. CSS Gridを使った超シンプルなグリッドシステムです。 必須コードは5行くらいでカラム数は必要に応...
画面を斜めに分割して2つの動画を表示する
Result See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen. 画面を斜めに分割して動画を2つ同時に再生するサンプルで...
CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト
Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...
異なる複数の絵文字を連続表示させる
Result See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen. 特に凝ったものではなく、keyframesで連続表示しています。 ア...
シンプルな矢印いろいろ
Result See the Pen Pure CSS Arrows by kachibito (@kachibito) on CodePen. CSSだけで作るシンプルなアローアイコンいろいろです 以前ご紹介したCSSのみで作れ...
CSS Gridを使ったガントチャート
Result See the Pen CSS-Grid Gantt Chart by kachibito (@kachibito) on CodePen. CSS Gridを使ったガントチャートの実装例です css ...
SVGとCSSでアニメーションする円状プログレスバー
Result See the Pen SVG circular progress: CSS animated & Angle gradient by kachibito (@kachibito) on CodePen. SVGとC...
グラデーションな下線
Result See the Pen Underline gradient animation by kachibito (@kachibito) on CodePen. 下線がグラデーションになっているかのようにする 疑似要素を...
任意のテキストでチェックボックス
Result See the Pen Text Only Checkboxes by kachibito (@kachibito) on CodePen. 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます ...
SVGで作る非長方形なヘッダ画像いろいろ
Result See the Pen Non Rectangular Headers with inline SVG by kachibito (@kachibito) on CodePen. インラインに書いたSVGを画像に重ねる...
CSSだけでスクロールに応じたプログレスバー
Result See the Pen CSS only scroll indicator by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが進んで、 あとどれくらいページの...