【2016年2月第4週】新米WEBデザイナーのための気になったCSS・JSエフェクトとまとめ

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エフェクトまとめでした。よかったらシェアお願いします。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。