地味に便利なコーディングの小技集
本日のブログ記事では個人的な備忘録も兼ねて、コーディングの小技みたいなものを2例ほど紹介したいと思います。
HTMLをランダムで表示させる方法
ボタンをクリックすると今日の運勢が表示されます。
＜DEMO＞
デモではごく簡易的なおみくじを作ってみました。
サイトのメインビジュアルなどをランダム表示させたい！という時などにもおすすめです。
ちなみに先ほどテストしたら三回連続大吉が出たので、今週いっぱいは口内炎ができないと思います。
グラデーションの背景にtransitionを効かせる方法
それぞれのボタンにマウスオーバーしてください。
＜DEMO＞
background: linear-gradientにはtransitionプロパティが効かないため、hoverの動きがカクついてしまいます。
そこで、背景色を疑似要素+positionプロパティで重ねて置き、opacityによって色を切り替えます。
opacityにはtransitionが有効なので、綺麗に切り替わってくれます。
いかがでしたでしょうか。
地味だけどこの先絶対使わないとも言えない…という絶妙なラインの技だと思います。
気になった方はぜひ試してみてくださいね。
