マウスホバーで画像にスプリットエフェクト
Result See the Pen Split Image on hover by kachibito (@kachibito) on CodePen. 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです ...
CSS - Archives
CSSで要素を斜めに2分割して境界線を透過
Result See the Pen Animated CSS mask-image gradient by kachibito (@kachibito) on CodePen. mask-imageとlinear-gradie...
CSSで横向きのフローチャート
Result See the Pen CSS Horizontal Family Tree by kachibito (@kachibito) on CodePen. 横向きのフローチャートです。家系図とかにも使えそう コードは固...
CSSでベン図っぽいやつ
Result See the Pen CSS Grid and Shape-Outside Venn Diagram by kachibito (@kachibito) on CodePen. ベン図(Wikipedia)っぽいやつ...
簡単なコードでマウスホバーした要素以外を透過する
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. 下線がグラデーションになっているかのようにする 疑似要素を...