CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ
Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且...
CSS - transform
クリックで展開するSNSシェアボタン
Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...
CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト
Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...
シンプルな矢印いろいろ
Result See the Pen Pure CSS Arrows by kachibito (@kachibito) on CodePen. CSSだけで作るシンプルなアローアイコンいろいろです 以前ご紹介したCSSのみで作れ...
SVGとCSSでアニメーションする円状プログレスバー
Result See the Pen SVG circular progress: CSS animated & Angle gradient by kachibito (@kachibito) on CodePen. SVGとC...
クリックで展開する円状のメニュー
Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...
文章の一部を訂正した風のスタイル
Result See the Pen del-ins pair by kachibito (@kachibito) on CodePen. こういうやつ。insとdelタグを使用します フォントやrotateを使う事でリアル感...
detailsタグでクリックで開閉するFAQコンテンツ
Result See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen. detailsタグでFAQコンテンツっぽいや...
CSSだけで3Dなカルーセル
Result See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen. 数年前に見かけた懐かしい感じの3Dなカルーセルです。 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...
CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ
Result See the Pen Pure Css Popup by kachibito (@kachibito) on CodePen. 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :t...
背景を斜めにする
Result See the Pen dJNjQo by kachibito (@kachibito) on CodePen. 親要素を回転させ、子要素を逆回転で元に戻してます css html via none
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 DIAMONDS by kachibito (@kachibito) on CodePen. ダイヤモンドの形のボタン。 シンプルに、オブジェクトを回転させ、テキストだけ元の角度に戻してます ...
CSSだけでマウスホバーした方向に応じてエフェクトを変える
Result See the Pen Direction aware hover pure CSS by kachibito (@kachibito) on CodePen. CSSだけでどうやってるんだろう、と思ってコード見たらい...
アニメーションエフェクト付きのチェックボックス
Result See the Pen Delightful Checkbox Animation by kachibito (@kachibito) on CodePen. チェックするとチェックボックス内でチェックマークがアニメ...
画像にマウスホバーすると枠を残してスライド移動する、みたいなエフェクト
Result See the Pen Image hover animation by kachibito (@kachibito) on CodePen. マウスホバーで画像がスライド移動する際、枠が残るように見えるエフェクトを実...
画像のマウスホバーしたら少し拡大+テキストがアニメーション表示
Result See the Pen Zoomy Anchor Thing by kachibito (@kachibito) on CodePen. 画像のマウスホバーエフェクトです css html via Zo...
CSSだけで任意のテキストにタイピングアニメーション
Result See the Pen Typewriter animation pure CSS by kachibito (@kachibito) on CodePen. タイプライターのようなエフェクトを任意のテキストに与えます...
リンクにホバーしたら下線をアニメーション表示
Result See the Pen xpwoGq by kachibito (@kachibito) on CodePen. 非表示にした疑似要素をホバー時に表示+遷移するようにしてあります css html via...