CSS - opacity

CSSのみで、クリックするとGIFアニメが再生されるやつ

Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG...

CSSだけでサムネイルをクリックすると画像が切り替わるイメージギャラリー

Result See the Pen CSS Image Gallery by kachibito (@kachibito) on CodePen. こういうやつです。割と今更感な内容ですが書いてなかった気がするの...

CSSで「続きを読む」を作る

Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切...
Ads

CSSだけで作られたストップウォッチ

Result See the Pen CSS-only chronometer by kachibito (@kachibito) on CodePen. CSSだけで作られたストップウォッチです。実用性を無視した...

簡単なコードでマウスホバーした要素以外を透過する

Result See the Pen Sibling fade by kachibito (@kachibito) on CodePen. かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライト...

クリックで展開する円状のメニュー

Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...

CSSだけでLightbox風に画像ポップアップ

Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...

detailsタグでクリックで開閉するFAQコンテンツ

Result See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen. detailsタグでFAQコンテンツっぽいや...

画像にマウスホバーでグラデーションのオーバーレイエフェクト

Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...

アニメーション&フェードエフェクトで複数画像を表示する

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 Simple Tile Hover Effect by kachibito (@kachibito) on CodePen. よく見るやつです。テキストは遅延表示されます css ...

アニメーションや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 Text blurring animation by kachibito (@kachibito) on CodePen. デモでは繰り返しアニメーションしtれいますが、タイトル通りフェードイン...

様々な色のグラデーションに変化する背景

Result See the Pen Aurora by kachibito (@kachibito) on CodePen. 色が変化するグラデーション。filter効果を使用しています css html v...

画像のマウスホバーしたら少し拡大+テキストがアニメーション表示

Result See the Pen Zoomy Anchor Thing by kachibito (@kachibito) on CodePen. 画像のマウスホバーエフェクトです css html via Zo...

リンクにホバーしたら下線をアニメーション表示

Result See the Pen xpwoGq by kachibito (@kachibito) on CodePen. 非表示にした疑似要素をホバー時に表示+遷移するようにしてあります css html via...

ピュアCSSでコンテンツフィルター

Result See the Pen Pure CSS content filter by kachibito (@kachibito) on CodePen. クリックすると該当するコンテナを除いて非表示になる、というコンテンツフ...

ボタンのホバーアニメーションサンプル集#2

Result See the Pen Animated CSS3 Buttons by kachibito (@kachibito) on CodePen. 疑似要素を応用したホバーエフェクト集。コードは上PENにて。 via ...

ボタンのホバーアニメーションサンプル集#1

Result See the Pen 12 fancy buttons by kachibito (@kachibito) on CodePen. コードは上PENで確認できます via 12 fancy buttons

テキストとCSSだけでローディング中を明示するアニメーション

Result See the Pen Loading by kachibito (@kachibito) on CodePen. css html via Loading

フォームの要素に入力したらlabelが浮かび上がり、表示される

Result See the Pen Float Label HTML+CSS Only! by kachibito (@kachibito) on CodePen. :validを使って実装。:validと:invalidは過去記...
Ads