クリックで展開する円状のメニュー
Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...
CSS - position
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を使う事でリアル感...
カラフルな3Dテキスト
Result See the Pen Single element, multi coloured 3d text effect by kachibito (@kachibito) on CodePen. テキストを3D化してカ...
CSSだけで3Dなカルーセル
Result See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen. 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時...
CSSだけでOne page scrollなWebサイト
Result See the Pen One page scroll by kachibito (@kachibito) on CodePen. 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト（On...
シャドウもグラデーションにする
Result See the Pen Simple button with gradient shadow in CSS by kachibito (@kachibito) on CodePen. ボタンがグラデーションなのでシャド...
画像をタイル画風にする
Result See the Pen Image Mosaic Effect with CSS Grids & Blend Modes by kachibito (@kachibito) on CodePen. 画像の上に要素を重ね...
画像にマウスホバーでグラデーションのオーバーレイエフェクト
Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...
アニメーションする簡易的なバーチャート
Result See the Pen simple bar chart with css by kachibito (@kachibito) on CodePen. 必要最低限のCSSで実装する、みたいな、お手軽チャートの実装例です...
ボタンにSVGを使って水がせりあがる様なホバーエフェクト
Result See the Pen Mana Button by kachibito (@kachibito) on CodePen. SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルタ...
アニメーション&フェードエフェクトで複数画像を表示する
Result See the Pen Ken Burns effect CSS only by kachibito (@kachibito) on CodePen. css html via Ken Bur...
アスタリスク表示してマウスホバーで注釈表示
Result See the Pen CSS Only In-Place Translation by kachibito (@kachibito) on CodePen. 注釈がある事をアスタリスク（これ→*）で明示し、マウスホバ...
テーブルに自動で行数を表示する
Result See the Pen CSS table row numeration by kachibito (@kachibito) on CodePen. tableに行数を表示します。疑似要素にcss-countersで加...
CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ
Result See the Pen Pure Css Popup by kachibito (@kachibito) on CodePen. 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :t...
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen. たまに見かけるコンテンツの表示/非表示のトグルです c...
ノイズが走っているようなエフェクトのテキスト
Result See the Pen CSS Glitched Text by kachibito (@kachibito) on CodePen. CSSのみでノイズなテキストエフェクトを実装しています。 clipとkeyfra...
サーチアイコンをクリックすると検索窓がスライド表示する
Result See the Pen Animated search Form by kachibito (@kachibito) on CodePen. アイコンをクリックで検索窓が飛び出す、みたいなの css html ...
シンプルなタイムライン
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. 矢印型...
フォーカスするとlabelが上部に移動しながらテキストが縮小する
Result See the Pen Floating Label Pattern by kachibito (@kachibito) on CodePen. プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部...