CSS - 画像周り

filterプロパティで、どんな背景画像でもテキストが読める状態にする

Result See the Pen Text Over Any Background by kachibito (@kachibito) on CodePen. どんな背景でもテキストを読める状態にする、というもの ...

Clip Pathで画像内の任意の箇所にスポットライトを当てる

Result See the Pen Highlight a part of the image - Clip Path + Grid by kachibito (@kachibito) on CodePen. CSS...

マウスホバーで画像にスプリットエフェクト

Result See the Pen Split Image on hover by kachibito (@kachibito) on CodePen. 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです ...

CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト

Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...

SVGで作る非長方形なヘッダ画像いろいろ

Result See the Pen Non Rectangular Headers with inline SVG by kachibito (@kachibito) on CodePen. インラインに書いたSVGを画像に重ねる...

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

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

CSSだけで3Dなカルーセル

Result See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen. 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時...

画像をタイル画風にする

Result See the Pen Image Mosaic Effect with CSS Grids & Blend Modes by kachibito (@kachibito) on CodePen. 画像の上に要素を重ね...

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

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...

画像を背景にした吹き出し

Result See the Pen Image arrow (Pure CSS) by kachibito (@kachibito) on CodePen. よく見るCSS吹き出しに画像背景を設定した案 通常の吹き出しを作る方法...

画像にマウスホバーすると枠を残してスライド移動する、みたいなエフェクト

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...

画像にグラデーションのフィルターをかける

Result See the Pen Gradient filtering images by kachibito (@kachibito) on CodePen. css html off topic 空要素であ...

CSS Shapesで円状の画像に沿ってテキストを回り込ませる

Result See the Pen Wrapping Text Around A Circular Image With CSS Shapes by kachibito (@kachibito) on CodePen. shape...

画像を三角形に切り取って綺麗に並べる

Result See the Pen CSS Triangle Image Crop by kachibito (@kachibito) on CodePen. 画像を三角形に切り取って重ならないように配置 clipプロパティを使...
Ads