【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
HTML/CSSが多くのデバイスに浸透した今、さまざまな表現がCSSでできるようになりました。CSS3から使えるようになったアニメーションをいかし、ホバーアクションやマウスの効果を追加しませんか?
画像を使うよりも手軽に、思い描いた表現ができるかもしれません。
Sassを使用して、ローディングアニメーションを実装しています。
ローディングアニメーションにGIFアニメを用いる場合が多いですが、それは画像であればブラウザ対応に誤差がないためです。
カスタマイズしやすいように書かれているので、色やサイズを変更して使ってみては?
CSSで太陽系の描画と自転・公転を表現した、大変複雑なCSSプロジェクトです。惑星は回転速度を指定した球体。背景の星もさまざまな速度で動かしており、リアリティを演出しています。
かつてWindowsOSに搭載されていたゲームである『マインスイーパ』をCSSで復刻。
オリジナルに極力近いUIがCSSで実装されている他、時間のカウントまでできるとは、CSSの力は底しれません。ただしスコアの保持機能はないので改良の余地あり!思わず何回もプレイしてしまう、中毒性のあるゲームです。
朝と夜をモチーフにしたトグル。状態が切り替わっていることが、よく伝わるUIですね。
処理はチェックボックスを介して行われ、バックエンドにデータを渡すように設計されており、見た目が良いだではなく、実用的なコードです。
CSSだけで、動く遊園地のイラストを実装しています。ベクターのアイコンやイラストは見慣れていますが、CSSとSVGコードだけでデザインされた全画面幅のイラストは珍しいものではないでしょうか?
このコードは、SVGがサポートされているブラウザでのみ正常に表示されます。計算式を用い、ここまで完成度の高いイラストを作るのは、大変技術の要ることです。
とはいえ、 SVG形式の画像は近年注目を浴びているので、数年後にはWeb上でコードのみでイラストを表示できるようになっていくのかもしれませんね。
輪廻し続けるメビウスの帯を実装しています。
3D要素とグラデーションを使った直方体の要素に繰り返しのCSSアニメーションをかけました。使い道こそ少ないものの、HTMLとCSSの表現の幅を知ることが出来たことかと思います。
3Dで描画されたキューブが、マウスホバーによって回転します。
JavaScriptを使ったようにしか思えないアプリケーションですが、全てCSSだけで表現しています。
CSSだけで、iOS7のアイコンを表現しました。SVGや、イメージファイルは使用していません。細部に至るまで正確に描画されています。CSSだけでもあらゆる描画ができるのです。
Slackのローディングアニメーションを再現しました。HTMLは<div>のみで構成されており、100行以上のCSSでロゴの色やアニメーションを表現しています。
他サービスのローディングアニメーションに応用できそうです。
また、バーのサイズはemで指定されておりフォントサイズに基づいて自然に拡大縮小します。CSSの実装はここまで柔軟性のある実装が可能なのです。
(翻訳:Yuri Tanaka)