CSS - box-shadow

border-radiusを使って要素をアニメーションでいろいろな形に変形させる

Result See the Pen Animating border-radius by kachibito (@kachibito) on CodePen. border-radiusで作れる様々な形状を利用してkeyframe...

アニメーションするボケ

Result See the Pen Bokeh effect (CSS) by kachibito (@kachibito) on CodePen. アニメーションで動くボケた玉をCSSで実装したもの 方法はシンプルで、以下のよ...

水の波紋っぽいエフェクト

Result See the Pen CSS ripple effect by kachibito (@kachibito) on CodePen. 水上で起こる波紋のようなエフェクトです css html via...

CSSのみで作られたスピナー集

Result See the Pen Such Spinners, Much Loading by kachibito (@kachibito) on CodePen. CSSのみで作られたスピナー集です。 見た目とは反してkey...

box-shadowを利用したボタンのホバーエフェクト集

Result See the Pen Hover buttons using box-shadow inset by kachibito (@kachibito) on CodePen. box-shadowを応用したボタンのホバー...

タグにマウスホバーすると記事数がスライドする

Result See the Pen Sliding Tags by kachibito (@kachibito) on CodePen. 記事に紐付けられたタグ等の数値がマウスホバーでスライドする、みたいなの これ自体はだいぶ昔...

アニメーションやData URI scheme、clip-path等を使った高度なテキストホバーエフェクト集#1

Result See the Pen 10 stunning hover effects with scss by kachibito (@kachibito) on CodePen. 高度なテキストホバーエフェクトのサンプル集です...

アニメーションで移動するスライダー式のradioボタン

Result See the Pen Radio buttons as a slider by kachibito (@kachibito) on CodePen. スライダー式に見せたradioボタンです。box-shadowを使...

inputにフォーカスしたらハイライトする

Result See the Pen Focus on a textfield by kachibito (@kachibito) on CodePen. 入力時にフォーカスして視認性を高める 良い手とは言えないし使用ケースを選ぶ...

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

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

センターに配置したテキストの両側を線で挟むやつ

Result See the Pen CSS line behind title text by kachibito (@kachibito) on CodePen. よくあるやつです。ベーシックな方法、spanを使わないパターン、...
Ads