単一要素で枠線のあるポップなbox-shadowを作る Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ちょっとコミック風の、枠線ありのポップなbox-shadowを単一要素で作...2022.06.24 | 10時05分50秒
SVGを使ったCSSツールチップ Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...2021.05.08 | 9時53分37秒
CSSだけでヒーローイメージのセクションにシンプルなパララックス効果 Result See the Pen JjGZEBp by kachibito (@kachibito) on CodePen. CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれま...2020.07.11 | 10時09分29秒
多種多様なCSSローダー集 Result See the Pen Loaders for website by kachibito (@kachibito) on CodePen. CSS製ローダー集です。以前は一つの要素で三角を使った複雑な...2020.02.18 | 10時05分10秒
CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且...2019.11.28 | 10時00分23秒
クリックで展開するSNSシェアボタン Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...2018.10.15 | 9時43分19秒
CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...2018.08.31 | 10時28分39秒
シンプルな矢印いろいろ Result See the Pen Pure CSS Arrows by kachibito (@kachibito) on CodePen. CSSだけで作るシンプルなアローアイコンいろいろです 以前ご紹介したCSSのみで作れ...2018.08.22 | 10時35分04秒
SVGとCSSでアニメーションする円状プログレスバー Result See the Pen SVG circular progress: CSS animated & Angle gradient by kachibito (@kachibito) on CodePen. SVGとC...2018.08.06 | 10時15分06秒
クリックで展開する円状のメニュー Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...2018.06.21 | 10時07分26秒
文章の一部を訂正した風のスタイル Result See the Pen del-ins pair by kachibito (@kachibito) on CodePen. こういうやつ。insとdelタグを使用します フォントやrotateを使う事でリアル感...2018.05.12 | 10時58分32秒
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秒
CSSだけで3Dなカルーセル Result See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen. 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時...2018.04.19 | 11時08分33秒
ボタンにSVGを使って水がせりあがる様なホバーエフェクト Result See the Pen Mana Button by kachibito (@kachibito) on CodePen. SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルタ...2018.02.18 | 10時38分23秒
アニメーション&フェードエフェクトで複数画像を表示する 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 dJNjQo by kachibito (@kachibito) on CodePen. 親要素を回転させ、子要素を逆回転で元に戻してます css html via ...2017.09.13 | 16時36分20秒
CSSのみで作られたスピナー集 Result See the Pen Such Spinners, Much Loading by kachibito (@kachibito) on CodePen. CSSのみで作られたスピナー集です。 見た目とは反してkey...2017.09.09 | 12時58分55秒
ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...2017.09.06 | 12時27分25秒
ダイヤモンド型のボタン Result See the Pen DIAMONDS by kachibito (@kachibito) on CodePen. ダイヤモンドの形のボタン。 シンプルに、オブジェクトを回転させ、テキストだけ元の角度に戻してます ...2017.09.04 | 10時45分59秒
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 Delightful Checkbox Animation by kachibito (@kachibito) on CodePen. チェックするとチェックボックス内でチェックマークがアニメ...2017.08.23 | 12時08分19秒