CSSだけで作られたジグザク模様のパターン ~Gradient Zig Zag Pattern SASS Mixin~

CSSだけで作られたジグザク模様のパターン ~Gradient Zig Zag Pattern SASS Mixin~ (4)
このエントリーをはてなブックマークに追加
PR

Gradient Zig Zag Pattern SASS Mixin

http://codepen.io/jason-kinney/pen/qKGgx

SASSで書かれているので、カラーを簡単に変更する事が出来ます
Codepenのエディタで色コードを変えて、CSSに変換するととても簡単に出来ます

CSSだけで作られたジグザク模様のパターン ~Gradient Zig Zag Pattern SASS Mixin~

編集するコード部分

.box_blue { @include bg-pattern(#d6eff7); }

#d6eff7のカラーコードを好きな色に変更するればOK
Webページ全体の背景に使うのなクラス名をbodyに変えてやるといいです

 

SASSをCSSに変換

CSSだけで作られたジグザク模様のパターン ~Gradient Zig Zag Pattern SASS Mixin~ (2)

SCSSと書かれているところをクリックすると、CSSに変換されたコードにかわります

 

CSSに変換されたものを、コピーして貼り付ければ完了
編集したクラス名のものをコピーすればOKです

CSSだけで作られたジグザク模様のパターン ~Gradient Zig Zag Pattern SASS Mixin~ (3)

簡単に好きな色のパターンにする事が出来て、これはかなり便利ですね。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)