プログラミング

プログラミング

CSSとJavaScriptでカフェインの世界を紹介しよう

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、8 caffeine-powered CSS and Javascript Snippets
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

479 views

読了時間 : 約3分12秒

よく、ウェブ開発者は多量のカフェイン飲料を飲みながら仕事をしているというような考えは固定概念であるということを聞きます。ソーシャルメディアをよく使う人は特に、このような習慣があるというのを耳にするでしょう。

 

 

飲み物にライトを当てて輝かせるというようなイメージ画像などもよく見かけると思います。最先端のデジタル機器を賢く使うことで、開発者は実際に飲み物を作ったり、飲み物を作ってくれる機械を作り出すことができます。

 

 

今日は、ネット上のコードで実際にカフェイン飲料を作るツアーに行って見ましょう。きっとワクワクすること間違いなしです。

さっそく自分専用のコーヒーを作ってみましょう

See the Pen
Starbucks Cup – CSS
by Ellie (@ellie_html)
on CodePen.


こちらは世界的なコーヒチェーンですね。どこの会社とは言いませんが、この象徴的なロゴや白いペーパーカップはみなさんにもお馴染みですよね。あるウェブ開発者がHTMLと CSSを使って実際に作成してくれました。

 

 

ソーダの泉?

 

 

See the Pen
Grape Soda
by Liam Egan (@shubniggurath)
on CodePen.

 

みなさん、ソーダはお好きですよね?グレープソーダの泉に飛び込みたくなることもあるのではないでしょうか。このイメージはThree.js,で作成したアニメーションです。ユーザーの好きな角度で見ることができるのも、このアニメーションの良さの一つですね。

 

 

 

スロットを揃えて 飲み物を完成させましょう

 

See the Pen
Caffeine Slot Machine
by Neal Fennimore (@nealfennimore)
on CodePen.

コードで、カジノにいるような楽しさと美味しいお茶を作ることができるという良い点を兼ね備えたゲームを作ることができます。右手のレバーを引いて、スロットを揃えましょう。

 

必ず揃うので、心配する必要はありませんよ。このゲームはJavascriptを使って作成していますが、本物のスロットをするより少し馬鹿げて見えるかもしれませんね。

 

 

お茶の時間

 

See the Pen
SVG Tea Mug
by Chris Gannon (@chrisgannon)
on CodePen.

nbsp;

美味しいお茶を飲んだ時の感覚って素晴らしいものですよね?リフレッシュできて、エネルギーチャージにもなります。このSVGアニメーションを見ると、好きな本とあったかいお茶を持って休憩したくなります。

 

 

 

エスプレッソをEと置き換えた面白い発想

See the Pen
E – Espresso
by Alex Bergin (@abergin)
on CodePen.

nbsp;

エスプレッソはよくある発想で、子供向けのテレビでエスプレッソをEというアルファベット表している。エスプレッソは子供にはよくない飲み物ということは忠告しておきますね。居眠りしないために飲むならいいかも。

 

 

 

カフェインの歴史

See the Pen
Timeline
by Amy Spielmaker (@akspiel)
on CodePen.

nbsp;

 

時系列に沿ったレイアウトは、年代学の分野でよく使用されます。実際、カフェインの歴史で例に出してあるように、こんなにもわかりやすく見易い図はありません。

 

 

 

あなたに自動販売機を

&

See the Pen
Coca Cola Vending Machine (Interactive)
by Giovanni Hobbins (@giohobbins)
on CodePen.

;

 

ここの二次元状にある飲み物はカフェインが含まれていないものですが、棚にある飲み物を自由に取ることができるだけではなく、実際に飲むことも想定されて作られたとても手のこんだ作品です。

 

 

ただいまコーヒー作ってます

See the Pen
#1 – Coffee Machine – SVG animation with CSS3
by Jonathan Silva (@jonathansilva)
on CodePen.

nbsp;

 

このコーヒーメーカーは、作る最中に可愛い笑顔を見せてくれます。SVGアニメーションを使って作っているのですが、面白い要素も同時に含んでいてとても楽しい作品です。記憶に残りやすいのもいい発想である証ですね。

 

 

 

想像的なエネルギーを作り出そう

 

 

カフェイン飲料は万人ウケする飲み物ではありません。ですが多くのウェブデザイナーに発想の活力を与えています。そして、皮肉にも私たちが今日見てきた技術や言葉はその力によって鼓舞され、出来たものもあります。

 

ですので、ネット上でカフェインに関わることしてもいいですし、ウェブサイトを作る時にでもカフェインを摂って貢献しましょう。

 

もっと知りたい人は、ぜひCodePen Collectionのサイトをのぞいて見てください。

人気記事

おすすめ新着記事

おすすめタグ