2020.04.13 コーディング
地味に覚えておくと便利！HTMLの小技
こんにちは。Webクリエイターの矢口です。
本日は個人的な備忘録も兼ねて、地味にへ～となったコーディングの小技みたいなものを2例ほど紹介したいと思います。
HTMLをランダムで表示させる方法
ボタンをクリックすると今日の運勢が表示されます。
＜DEMO＞
グラデーションの背景にtransitionを効かせる方法
それぞれのボタンにマウスオーバーしてください。
＜DEMO＞
See the Pen
JjYPJgL by Nako (@mr_nako)
on CodePen.
background: linear-gradientにはtransitionプロパティが効かないため、hoverの動きがカクついてしまいます。
そこで、背景色を疑似要素+positionプロパティで重ねて置き、opacityによって色を切り替えます。
opacityにはtransitionが有効なので、綺麗に切り替わってくれます。
個人的に勉強になったので嬉しかったのですが、これを実装した後「でもグラデーションのボタンはそうそう使わないかな！」と言われました。
いかがでしたでしょうか。
地味だけどこの先絶対使わないとも言えない…という絶妙なラインの技だと思います。
気になった方はぜひ試してみてくださいね。
それでは口内炎が痛いのでこのへんで。
