動画を再生したまま一部だけチラ見せする Result See the Pen Video button animation by kachibito (@kachibito) on CodePen. 動画をあらかじめ再生しておいて一部だけ見せる事でユーザ...2019.12.17 | 10時11分35秒
Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア...2019.06.19 | 10時20分10秒
CSSのみでアコーディオン・2パターン Result See the Pen Pure CSS Accordion by kachibito (@kachibito) on CodePen. 今更感半端ないですが、CSSのみでアコーディオン 全部開けら...2019.06.15 | 10時39分10秒
「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする 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秒
SVGでアニメーションしながら形状が遷移する検索フォーム Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...2018.11.25 | 9時25分50秒
クリックで展開する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秒
CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...2018.08.31 | 10時28分39秒
クリックで展開する円状のメニュー Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...2018.06.21 | 10時07分26秒
CSSだけでLightbox風に画像ポップアップ Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...2018.06.11 | 10時49分17秒
CSSだけでOne page scrollなWebサイト Result See the Pen One page scroll by kachibito (@kachibito) on CodePen. 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト(On...2018.04.17 | 11時33分36秒
画像にマウスホバーでグラデーションのオーバーレイエフェクト Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...2018.03.10 | 10時25分59秒
CSS変数でイージングアニメーションを管理 Result See the Pen LQgZBv by kachibito (@kachibito) on CodePen. カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにします css ...2018.02.26 | 11時35分00秒
ボタンにSVGを使って水がせりあがる様なホバーエフェクト Result See the Pen Mana Button by kachibito (@kachibito) on CodePen. SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルタ...2018.02.18 | 10時38分23秒
CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ Result See the Pen Pure Css Popup by kachibito (@kachibito) on CodePen. 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :t...2018.01.31 | 11時11分25秒
サーチアイコンをクリックすると検索窓がスライド表示する Result See the Pen Animated search Form by kachibito (@kachibito) on CodePen. アイコンをクリックで検索窓が飛び出す、みたいなの css html ...2017.09.16 | 17時07分53秒
box-shadowを利用したボタンのホバーエフェクト集 Result See the Pen Hover buttons using box-shadow inset by kachibito (@kachibito) on CodePen. box-shadowを応用したボタンのホバー...2017.09.08 | 12時28分58秒
フォーカスするとlabelが上部に移動しながらテキストが縮小する Result See the Pen Floating Label Pattern by kachibito (@kachibito) on CodePen. プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部...2017.09.07 | 12時41分50秒
ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...2017.09.06 | 12時27分25秒
CSSだけでマウスホバーした方向に応じてエフェクトを変える Result See the Pen Direction aware hover pure CSS by kachibito (@kachibito) on CodePen. CSSだけでどうやってるんだろう、と思ってコード見たらい...2017.08.31 | 18時52分55秒
マウスホバーするとグラデーションの背景と、遅延してテキストが浮かび上がる Result See the Pen Simple Tile Hover Effect by kachibito (@kachibito) on CodePen. よく見るやつです。テキストは遅延表示されます css ...2017.08.27 | 13時27分48秒