コーディング

【便利】オシャレなセクションの区切りを簡単実装!

  • このエントリーをはてなブックマークに追加
【便利】オシャレなセクションの区切りを簡単実装!

こんにちは!ワタナベです。

今回は「SVG Shape Dividers Generator Tool」のご紹介。

セクション間の区切り等で使える、SVGのカスタムシェイプを簡単に作ることができます。

たまにアニメーションで波打ってるのとか見ますよね。ああいう感じのが簡単に作れてしまいます!

SVG Shape Dividers Generator Tool

使い方

英語サイトですが直感的に使用できます。画面右側にマウスカーソルを持っていくとリストが表示され、様々な種類のシェイプを選ぶことができます。(一部有料)
「Top」~「Left」でシェイプの向きが選択できます。
アニメーションにチェックを入れるとアニメーションが有効になり、アニメーションの細かい設定も可能です。

レスポンシブをチェックすると、一番上にデバイスの選択が出てくるのでそれぞれ設定します。
各々設定しないと初期設定が反映されてしまうので、レスポンシブにチェックを入れた場合は必ず各デバイス設定しましょう。

設定し終えたら、「COPY CODE」ボタンを押すとCSSをコピーできます。

SAMPLE

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

↑は自分が作ってみたものです。こんな感じで作れます。簡単(*‘ω‘ *)

 

ページに一ひねり加えたい時に使ってみるのはいかがでしょうか?(*‘ω‘ *)

それではまた次回、ご閲覧ありがとうございました♪

 

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ