CSS - transform

単一要素で枠線のあるポップなbox-shadowを作る

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ちょっとコミック風の、枠線ありのポップなbox-shadowを単一要素で作...

SVGを使ったCSSツールチップ

Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...

CSSだけでヒーローイメージのセクションにシンプルなパララックス効果

Result See the Pen JjGZEBp by kachibito (@kachibito) on CodePen. CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれま...
Ads

多種多様なCSSローダー集

Result See the Pen Loaders for website by kachibito (@kachibito) on CodePen. CSS製ローダー集です。以前は一つの要素で三角を使った複雑な...

CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ

Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且...

クリックで展開する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 ...

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. チェックするとチェックボックス内でチェックマークがアニメ...
Ads