CSS - opacity

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

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は過去記...

クリックで開閉するナビゲーション

Result See the Pen Pure CSS Header Menu by kachibito (@kachibito) on CodePen. よくあるオフキャンバスナビゲーションの類ではなく、その場で開閉するパターンで...

アニメーションするシンプルなローディングアイコン

Result See the Pen CSS Loding animations by kachibito (@kachibito) on CodePen. css html via CSS Loding anim...

コンテンツの評価をする☆1~5をradioで作る

Result See the Pen MOLXwd by kachibito (@kachibito) on CodePen. cssでレーティングボタンを実装します。 radioボタンで作られています css html ...

マウスホバーで吹き出しの形のツールチップを表示する

Result See the Pen YEBLZX by kachibito (@kachibito) on CodePen. css html via w3schools.com
Ads