背景画像にアニメーションで変化するグラデーション Result See the Pen demo:Hero Image × CSS Gradient #2 by kachibito (@kachibito) on CodePen. 以前かいたfilterを使う方法とは異なり、複数設...2019.01.16 | 10時12分53秒
「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする Result リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです サンプル上が従来の疑似要素を使った方法で...2019.01.09 | 10時10分38秒
マウスホバーで画像にスプリットエフェクト Result See the Pen Split Image on hover by kachibito (@kachibito) on CodePen. 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです ...2019.01.05 | 9時30分02秒
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秒
CSSでベン図っぽいやつ Result See the Pen CSS Grid and Shape-Outside Venn Diagram by kachibito (@kachibito) on CodePen. ベン図(Wikipedia)っぽいやつ...2018.12.08 | 9時02分32秒
簡単なコードでマウスホバーした要素以外を透過する Result See the Pen Sibling fade by kachibito (@kachibito) on CodePen. かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライト...2018.11.29 | 11時18分37秒
SVGでアニメーションしながら形状が遷移する検索フォーム Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...2018.11.25 | 9時25分50秒
contenteditable属性でページ内のCSSを変更する Result See the Pen A style tag styling itself. by kachibito (@kachibito) on CodePen. 実用性はさておき、面白かったので備忘録。 コンテンツを編集...2018.11.18 | 10時23分26秒
任意のコンテンツを徐々に表示させる Result See the Pen Happy Ada Lovelace Day by kachibito (@kachibito) on CodePen. CSSだけでアクセス時に徐々に任意のコンテンツを表示させます 本記事で...2018.10.29 | 8時45分49秒
CSSでinputに入力したらlabelのスタイルが変更されるようにする Result See the Pen @supports for selectors by kachibito (@kachibito) on CodePen. :placeholder-shown疑似クラスを使ってlabelのスタ...2018.10.22 | 9時00分49秒
border-radiusを使って要素をアニメーションでいろいろな形に変形させる Result See the Pen Animating border-radius by kachibito (@kachibito) on CodePen. border-radiusで作れる様々な形状を利用してkeyframe...2018.10.17 | 10時14分07秒
クリックで展開する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秒
テキストリンクの下線をマウスホバーで波のようにアニメーションさせる Result See the Pen Link Effectz - Squiggle by kachibito (@kachibito) on CodePen. リンクにマウスホバーすると波のようにアニメーションする、というもの ...2018.09.23 | 10時33分05秒
CSS Gridで作るカレンダーのレイアウトサンプル Result See the Pen CSS grid calendar by kachibito (@kachibito) on CodePen. CSS Gridを使ったカレンダーUIのサンプルです コードはCodepenをご...2018.09.22 | 10時04分35秒
CSS Gridを使った超シンプルなグリッドシステム Result See the Pen vzzKNb by kachibito (@kachibito) on CodePen. CSS Gridを使った超シンプルなグリッドシステムです。 必須コードは5行くらいでカラム数は必要に応...2018.09.16 | 10時50分17秒
画面を斜めに分割して2つの動画を表示する Result See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen. 画面を斜めに分割して動画を2つ同時に再生するサンプルで...2018.09.02 | 9時38分15秒
CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...2018.08.31 | 10時28分39秒
異なる複数の絵文字を連続表示させる Result See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen. 特に凝ったものではなく、keyframesで連続表示しています。 ア...2018.08.26 | 10時21分31秒
シンプルな矢印いろいろ Result See the Pen Pure CSS Arrows by kachibito (@kachibito) on CodePen. CSSだけで作るシンプルなアローアイコンいろいろです 以前ご紹介したCSSのみで作れ...2018.08.22 | 10時35分04秒
CSS Gridを使ったガントチャート Result See the Pen CSS-Grid Gantt Chart by kachibito (@kachibito) on CodePen. CSS Gridを使ったガントチャートの実装例です css ...2018.08.13 | 10時13分05秒