MENU

NEWS
ニュース

地味に便利なコーディングの小技集

本日のブログ記事では個人的な備忘録も兼ねて、コーディングの小技みたいなものを2例ほど紹介したいと思います。

HTMLをランダムで表示させる方法

ボタンをクリックすると今日の運勢が表示されます。
<DEMO>

 

デモではごく簡易的なおみくじを作ってみました。
サイトのメインビジュアルなどをランダム表示させたい!という時などにもおすすめです。

 

ちなみに先ほどテストしたら三回連続大吉が出たので、今週いっぱいは口内炎ができないと思います。

 

グラデーションの背景にtransitionを効かせる方法

それぞれのボタンにマウスオーバーしてください。
<DEMO>

 

background: linear-gradientにはtransitionプロパティが効かないため、hoverの動きがカクついてしまいます。
そこで、背景色を疑似要素+positionプロパティで重ねて置き、opacityによって色を切り替えます。
opacityにはtransitionが有効なので、綺麗に切り替わってくれます。

いかがでしたでしょうか。
地味だけどこの先絶対使わないとも言えない…という絶妙なラインの技だと思います。
気になった方はぜひ試してみてくださいね。

PAGETOP