東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

流行りの流体シェイプを作ろう

2019.03.20 Posted by

11111

こんにちは、ウェブラボ技術メモです。

今回は今年流行している、「流体シェイプ」についてご紹介します。

 

■流体シェイプの使われているWebサイト

2019年に流行するWebデザインの手法に流体シェイプがあるのはご存知ですか?

以下のWebサイトでは流体シェイプが使われているWebサイトをまとめているのでぜひ参考にして見てください。

参考Webサイト:流体シェイプを使ったWebデザインの魅力と参考になるWebサイト

 

■流体シェイプの作り方

Webサイトでは、SVGを使って動かす方法が使われていますが、難しいのでまずは

CSSとJSで作る方法をご紹介します。

参考Webサイト:【CSS】【JavaScript】流体アニメーションを作りたい

 

[HTML]

1、CSSでベースの色を決め、シェイプを作ります。

2、CSSでグラデーションをつけます。
(今回は球体なので中心が薄い色、外側に向かってだんだん濃くなるように設定します。)

3、CSSで回転させます。

4、JSでMath.round()関数を使って、角丸のサイズをランダムに変更します。

 

試しにデモを作ってみました!

デモページはこちら

新しいデザインを取り入れる際には是非試して見てくださいね!

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278