最新のInternet Explorerでご覧ください。

お使いのInternet Explorerは古いバージョンのため、このウェブサイトを正しく表示することができません。
マイクロソフトのホームページ で最新バージョン(無料)を入手してください。※IE10以上推奨

Windows XPをお使いの場合は、最新のFirefox(無料)を mozilla社ホームページ よりダウンロードしてご利用ください。

CSSのみで要素をキラリと光らせる

2019.05.17

CATEGORY / コーディング

画像などをキラリと光らせる方法です。
jQueryを使う方法もありますが、ここではもっと簡単にできるCSSで光らせる方法をお伝えします。

HTMLはこのような感じです。

続いてCSS。

div class=”reflection”の中にdivを作ってもよいのですが、ここはスマートに疑似要素“::after”を使っています。このほうがHTMLソースがすっきりしますね。

以下サンプルです。

See the Pen
reflection CSS
by Show Design Lab (@ShowDesignLab)
on CodePen.

TAG / , , ,

戻 る