Satoこんにちは!佐藤です。最近に大分涼しくなってきましたね。おかげで自転車通勤しやすい気温ですが最近朝早めになかなか起きれず車通勤ばかりしてます。がんばらねば!皆さんCodePenって知ってますか?僕は最近になってやっとこのCodePen使い始めました笑コーディングとかやってれば知らなくても見たことある人はいるんじゃないでしょうか?こんなのです。簡単にCodePenの説明をするとHTMLやCSS、javaScriptなどのコードをweb上で入力して簡単に試せたり、保存しておいたり、人に見せて仕事や就職に役立てるサービスです。今日はそのCodePenで公開されてる作品で個人的に気になった投稿を紹介します。・KALEIDOSCOPEカーソルを上に乗せると文字や絵が動きます。ちなみにこちらは画像が一切使われていません。cssで色や三角形も作ってます。この作品それ以上に文字の動きにびっくりしました。これflexのorderにtransitionで表現してあります。それだけの命令なのでとても短くシンプルで簡単です。orderは順番を指定するプロパティでtransitionは対象の変化に時間などを設定するものなんですが、まさかorderにも有効だとは、、、すごく盲点でした。Laughsにゃんこクリックで絵が動きます。単純な動きに見えますがこれsvgとjavaScriptで動いてます。svgは画像のファイル形式の一種なんですが、他の画像と違って内容をコードで書くファイル形式です。文字を書くとそれが絵になる感じです。それをうまく使った内容です。Spin名前の通り動きもコードもとてもシンプルです。色の写り替わりがちょっと変わってますよね?この表現はcssのmix-blend-modeというプロパティで表現しています。mix-blend-modeとは上と下の重なった部分の色の見せ方を設定するプロパティです。Photoshopで言う乗算やディザ合成などをやってくれるプロパティです。一つ欠点がInternetexplorerに対応していないのでブラウザーによってはただ絵が回っているようにしか、、、早く対応してくれるのを祈りましょう!ちなみに似たプロパティでbackground-blend-modeもあります。Effectとにかくかっこいいテキストの動きをするコードです。日本語もおっけーです。・Hurricaneこれもおしゃれ。これはhtmlのcanvasというタグを使っています。すごい変わったタグで、javascriptから絵が描けるようになるタグです。canvasを使ったものを見る機会がないのでとても新鮮でした。canvas使うとこんな表現ができるんですね。いかがだったでしょうか?CodePenのサイトに行けばもっとたくさんの様々な作品を見ることができます。一回見始めると時間を忘れてみちゃいそうになります。フロントエンドエンジニア。