Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する
Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア...
CSS - content
CSSでフォルダツリーを作る
Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ...
アニメーションエフェクト付きのtoggleボタン
Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...
異なる複数の絵文字を連続表示させる
Result See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen. 特に凝ったものではなく、keyframesで連続表示しています。 ア...
グラデーションな下線
Result See the Pen Underline gradient animation by kachibito (@kachibito) on CodePen. 下線がグラデーションになっているかのようにする 疑似要素を...
CSSだけでLightbox風に画像ポップアップ
Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...
水の波紋っぽいエフェクト
Result See the Pen CSS ripple effect by kachibito (@kachibito) on CodePen. 水上で起こる波紋のようなエフェクトです css html via...
文章の一部を訂正した風のスタイル
Result See the Pen del-ins pair by kachibito (@kachibito) on CodePen. こういうやつ。insとdelタグを使用します フォントやrotateを使う事でリアル感...
アスタリスク表示してマウスホバーで注釈表示
Result See the Pen CSS Only In-Place Translation by kachibito (@kachibito) on CodePen. 注釈がある事をアスタリスク（これ→*）で明示し、マウスホバ...
テーブルのセルが空だった場合にハイライトしたり文字を挿入したり
Result See the Pen GQKmMW by kachibito (@kachibito) on CodePen. 5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCS...
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen. たまに見かけるコンテンツの表示/非表示のトグルです c...
シンプルなタイムライン
Result See the Pen Responsive HTML Timeline by kachibito (@kachibito) on CodePen. RWD対応のシンプルなタイムライン css スマフォ向けのコード...
矢印型のパンくずナビゲーション
Result See the Pen Pure CSS3 breadcrumb navigation - the pixel perfect way by kachibito (@kachibito) on CodePen. 矢印型...
CSSのみで作られたスピナー集
Result See the Pen Such Spinners, Much Loading by kachibito (@kachibito) on CodePen. CSSのみで作られたスピナー集です。 見た目とは反してkey...
ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト
Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...
見出しでテキストの終わりから先は線にする
Result See the Pen gogOYa by kachibito (@kachibito) on CodePen. 平行線を挿入する見出しの左寄せ版、みたいなのです コードがシンプルで使いやすい印象でした css...
画像を背景にした吹き出し
Result See the Pen Image arrow (Pure CSS) by kachibito (@kachibito) on CodePen. よく見るCSS吹き出しに画像背景を設定した案 通常の吹き出しを作る方法...
タグにマウスホバーすると記事数がスライドする
Result See the Pen Sliding Tags by kachibito (@kachibito) on CodePen. 記事に紐付けられたタグ等の数値がマウスホバーでスライドする、みたいなの これ自体はだいぶ昔...
マウスホバーで下線が伸びてくるシンプルなアニメーションエフェクト
Result See the Pen underline effect by kachibito (@kachibito) on CodePen. よく見かけますね。疑似要素を使います css html via...
アニメーションエフェクト付きのチェックボックス
Result See the Pen Delightful Checkbox Animation by kachibito (@kachibito) on CodePen. チェックするとチェックボックス内でチェックマークがアニメ...
アニメーションやData URI scheme、clip-path等を使った高度なテキストホバーエフェクト集#1
Result See the Pen 10 stunning hover effects with scss by kachibito (@kachibito) on CodePen. 高度なテキストホバーエフェクトのサンプル集です...
画像にマウスホバーすると枠を残してスライド移動する、みたいなエフェクト
Result See the Pen Image hover animation by kachibito (@kachibito) on CodePen. マウスホバーで画像がスライド移動する際、枠が残るように見えるエフェクトを実...