CSSのみで、クリックするとGIFアニメが再生されるやつ Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG...2020.07.20 | 10時08分57秒
CSSだけでサムネイルをクリックすると画像が切り替わるイメージギャラリー Result See the Pen CSS Image Gallery by kachibito (@kachibito) on CodePen. こういうやつです。割と今更感な内容ですが書いてなかった気がするの...2020.05.07 | 10時05分21秒
CSSで「続きを読む」を作る Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切...2019.10.03 | 9時52分28秒
CSSだけで作られたストップウォッチ Result See the Pen CSS-only chronometer by kachibito (@kachibito) on CodePen. CSSだけで作られたストップウォッチです。実用性を無視した...2019.07.11 | 10時14分37秒
簡単なコードでマウスホバーした要素以外を透過する Result See the Pen Sibling fade by kachibito (@kachibito) on CodePen. かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライト...2018.11.29 | 11時18分37秒
クリックで展開する円状のメニュー 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秒
detailsタグでクリックで開閉するFAQコンテンツ Result See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen. detailsタグでFAQコンテンツっぽいや...2018.05.07 | 10時34分18秒
画像にマウスホバーでグラデーションのオーバーレイエフェクト Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...2018.03.10 | 10時25分59秒
アニメーション&フェードエフェクトで複数画像を表示する Result See the Pen Ken Burns effect CSS only by kachibito (@kachibito) on CodePen. css html via Ken Bur...2018.02.14 | 10時06分45秒
CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ Result See the Pen Pure Css Popup by kachibito (@kachibito) on CodePen. 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :t...2018.01.31 | 11時11分25秒
マウスホバーするとグラデーションの背景と、遅延してテキストが浮かび上がる Result See the Pen Simple Tile Hover Effect by kachibito (@kachibito) on CodePen. よく見るやつです。テキストは遅延表示されます css ...2017.08.27 | 13時27分48秒
アニメーションやData URI scheme、clip-path等を使った高度なテキストホバーエフェクト集#1 Result See the Pen 10 stunning hover effects with scss by kachibito (@kachibito) on CodePen. 高度なテキストホバーエフェクトのサンプル集です...2017.08.21 | 23時20分01秒
テキストを一文字ずつフェードインさせる Result See the Pen Text blurring animation by kachibito (@kachibito) on CodePen. デモでは繰り返しアニメーションしtれいますが、タイトル通りフェードイン...2017.08.17 | 20時19分04秒
様々な色のグラデーションに変化する背景 Result See the Pen Aurora by kachibito (@kachibito) on CodePen. 色が変化するグラデーション。filter効果を使用しています css html v...2017.08.15 | 0時46分02秒
画像のマウスホバーしたら少し拡大+テキストがアニメーション表示 Result See the Pen Zoomy Anchor Thing by kachibito (@kachibito) on CodePen. 画像のマウスホバーエフェクトです css html via Zo...2017.08.14 | 23時03分10秒
リンクにホバーしたら下線をアニメーション表示 Result See the Pen xpwoGq by kachibito (@kachibito) on CodePen. 非表示にした疑似要素をホバー時に表示+遷移するようにしてあります css html via...2017.08.06 | 22時58分20秒
ピュアCSSでコンテンツフィルター Result See the Pen Pure CSS content filter by kachibito (@kachibito) on CodePen. クリックすると該当するコンテナを除いて非表示になる、というコンテンツフ...2017.08.04 | 11時34分58秒
ボタンのホバーアニメーションサンプル集#2 Result See the Pen Animated CSS3 Buttons by kachibito (@kachibito) on CodePen. 疑似要素を応用したホバーエフェクト集。コードは上PENにて。 via ...2017.07.25 | 11時52分09秒
ボタンのホバーアニメーションサンプル集#1 Result See the Pen 12 fancy buttons by kachibito (@kachibito) on CodePen. コードは上PENで確認できます via 12 fancy buttons2017.07.23 | 10時19分50秒
テキストとCSSだけでローディング中を明示するアニメーション Result See the Pen Loading by kachibito (@kachibito) on CodePen. css html via Loading2017.07.18 | 22時52分31秒
フォームの要素に入力したらlabelが浮かび上がり、表示される Result See the Pen Float Label HTML+CSS Only! by kachibito (@kachibito) on CodePen. :validを使って実装。:validと:invalidは過去記...2017.07.17 | 22時26分13秒