CSS Calculator
See the Pen CSS Calculator by Jake Albaugh (@jakealbaugh) on CodePen.
CSSで実装された計算機です。CSSでここまで出来る様になってきましたねー、WEBデザインの勉強を始めた頃、JSで計算機を実装ってのはよくありましたがこれからは両方で実装できてしまいますね。
CSS Only Accordion
See the Pen CSS Only Accordion by Grant Vinson (@vinsongrant) on CodePen.
CSSのみで実装されているアコーディオンメニューになります。Q&Aとかに使えそうですね。っていうか先ほど紹介した計算機同様、CSSで実装できる範囲がかなり広がってきているので色々勉強しないといけないですね。じゃないとすぐに取り残されそうです。
Material Buttons.css
See the Pen Material Buttons.css by Ariana Lynn (@arianalynn) on CodePen.
マテリアルデザインに合うボタンのデザイン集です。ホバーエフェクトも色々な種類があるのでこれがあれば一通りマテリアルデザインのボタンには困らないのではと思います。
Happy 50 + Followers! – Neon Sign
See the Pen Happy 50 + Followers! – Neon Sign by Kyle Lavery (@koenigsegg1) on CodePen.
CSSのみで実装されたチカチカ光るネオンのサインになります。CSSだけでもこんなに完成度高いネオンができるのならパフォーマンスのことも考えてものすごい凝るのでなければなるべくCSSで実装した方が良さそうですね。
Step Frame Sequence
See the Pen Step Frame Sequence by Dennis Gaebel (@dennisgaebel) on CodePen.
スクロールするとおじさんがコーヒー飲みます。はい、それだけです。ただアイディアが面白いなと思ったので紹介しました。パララックスに飽きたという方はぜひ取り入れてみてください。
以上今週の僕が気になったCSS・JSエフェクトまとめでした。よかったらシェアお願いします。
