画像では無い CSSで作られたストライプ柄の背景パターン Gnome Backgrouud

画像では無い CSSで作られたストライプ柄の背景パターン Gnome Backgrou
このエントリーをはてなブックマークに追加
PR

Gnome Background
By Dennis

http://codepen.io/gevera/pen/Cghfw

コード全体はリンク先で御覧ください

 

CSSだけで作られた背景パターンです
HTMLで<div class=”example”></div>がありますが、これは画面端の影を表現しています
これが不要な場合はこのタグは不要ですし該当のCSS部分も不要です

 

背景だけのCSSにすると次のようになります

html, body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #1b8bd2;
 background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
 linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
 linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
 linear-gradient(90deg, transparent 50%, rgba(255,255,255,.29) 50%);
 background-size: 43px, 59px, 67px, 83px;
 }

これだけのCSSでストライプ柄の背景パターンが出来てしまいます

PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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