カテゴリー別アーカイブ: CSS

背景パターンいろいろ

http://www.nxworld.net/tips/css-gradient-pattern.html
のコピペ

とりあえず、こぴぺっとく。

垂直ストライプ
垂直ストライプ
垂直のストライプをCSSで実装する方法で、CSSは下記のように記述します。
配色を変えたい場合はカラーコード部分を、太さをや間隔を変更したい場合はサンプルソースで10pxや20pxとなっている箇所を変更します。
CSS
pattern {
background: repeating-linear-gradient(90deg, #444, #444 10px, #888 0, #888 20px);
}

水平ストライプ
水平ストライプ
こちらは水平のストライプで、先ほどのものから回転させる記述を省けば実装できます。
CSSは下記のように記述し、同じくカラーや太さなど変更したい場合はカラーコード部分やpxの値を変更します。
CSS
pattern {
background: repeating-linear-gradient(#444, #444 10px, #888 0, #888 20px);
}
斜めストライプ #1
斜めストライプ #1
こちらはストライプを斜めにしたもので、CSSは下記のように記述します。
ここでは回転を45degにしていますが、30degとか60degにすることで傾き具合を簡単に変更できます。
CSS
pattern {
background: repeating-linear-gradient(45deg, #444, #444 10px, #888 0, #888 20px);
}
斜めストライプ #2
斜めストライプ #2
同じくストライプを斜めにしたもので、下記のように回転の記述箇所に「-（マイナス）」指定することで方向を逆にすることができます。
CSS
pattern {
background: repeating-linear-gradient(-45deg, #444, #444 10px, #888 0, #888 20px);
}
ドット
ドット
CSSを下記のように記述することでドットパターンを表現することもできます。
background-positionやbackground-sizeの値を変更することで、大きさや間隔などを変更することができます。
CSS
pattern {
background: #888;
background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
チェック #1
チェック #1
四角が並んだチェック柄のようなものを表現したもので、同じくbackground-positionやbackground-sizeの値を変更することで大きさなど変更できます。
CSS
pattern {
background-color: #888;
background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
}
斜めチェック #1
斜めチェック #1
こちらはひし形（ダイヤ）を並べた感じのパターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #888;
background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
background-size: 25px 25px;
}
チェック #2
チェック #2
少し透過させたものを重ねることで上とか少し違うチェック柄を表現したものです。
CSSは下記のように記述します。
CSS
pattern {
background-color: #fff;
background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%);
background-size: 50px 50px;
}
斜めチェック #2
斜めチェック #2
こちらは先ほどのものを斜めにしたもので、CSSは下記のように記述します。
CSS
pattern {
background-color: #fff;
background-image: linear-gradient(-45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%);
background-size: 52px 52px;
}
以下はこれまで紹介してきたものに比べると利用する機会は少ないと思いますが、CSSだけでこんな背景パターンもできるよということでユニークな感じのものを幾つかご紹介します。
ユニーク #1
ユニーク #1
マークのようなものを作成・繰り返した背景パターンです。
CSS
pattern {
background-color: #888;
background-image: radial-gradient(closest-side, transparent 98%, #444 100%), radial-gradient(closest-side, transparent 98%, #444 100%);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
ユニーク #2
ユニーク #2
立体的なボックスが並んでいるような背景パターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #555;
background-image: linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;
}
ユニーク #3
ユニーク #3
こちらは三角を敷き詰めたような背景パターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #444;
background-image: linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%), linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%);
background-position: 0 0, 0 0, 10px -20px, 10px -20px;
background-size: 20px 40px;
}

背景指定

コメントをどうぞ

下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。

垂直方向の位置タグ
左側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : left;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : center;
右側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : right;
水平方向の位置タグ
上側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : top;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : center;
下側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : bottom;

画像の配置タグ
左・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left top;
もしくは
background-position: 0 0;

左・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left center;
もしくは
background-position: 0 50%;

左・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left bottom;
もしくは
background-position: 0 100%;

中央・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center top;
もしくは
background-position: 50% 0;

中央・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
もしくは
background-position: 50% 50%;

中央・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center bottom;
もしくは
background-position: 50% 100%;

右・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right top;
もしくは
background-position: 100% 0;

右・中央 background-image: url(画像のパス);
background-repea : no-repeat;
background-position: right center;
もしくは
background-position: 100% 50%;

右・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right bottom;
もしくは
background-position: 100% 100%;

キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます

スクロールさせない
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}

CSSまとめ

コメントをどうぞ

[CSS]dl要素を美しくデザインするスタイルシートのまとめ
http://coliss.com/articles/build-websites/operation/css/showcase-css-definition-list-styles.html

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくる
http://coliss.com/articles/build-websites/operation/css/css-jagged-border-by-somestuffer.html

[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
http://chick.tikidesign.jp/wp-admin/post.php?post=117&action=edit&message=6

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコード
http://coliss.com/articles/build-websites/operation/css/sweet-css-framework-beemuse.html

[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/css-parent-child-vertical-list-menu.html

[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト
http://coliss.com/articles/build-websites/operation/css/css-milky-effect-by-juanbrujo.html

[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms
http://coliss.com/articles/build-websites/operation/css/framework-grid-forms.html

[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
http://coliss.com/articles/build-websites/operation/css/css3-gradient-borders-by-murphyrandle.html

[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
http://coliss.com/articles/build-websites/operation/css/css-single-element-pure-css3-double-fold-ribbon.html

CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
http://coliss.com/articles/build-websites/operation/css/more-css-techniques.html

すぐに使えてデザインも素敵、CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets
http://coliss.com/articles/build-websites/operation/css/open-source-ui-components-coded-with-html-and-css-and-sass.html

CSS3を使った実用的なスタイルシートのテクニックのまとめ
http://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-the-first-half-of-2012.html

[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/centering-percentage-widthheight-elements-by-css-tricks.html

画像の回り込み解除　CSS

コメントをどうぞ

WordPress の標準テーマである default, twentyten には
回り込みに関するスタイルが書いてあります。

/* 画像の回り込みとか */
.aligncenter {
    display: block;
    clear: both;
    margin: 0.25em auto 1.5em;
    }
.alignleft {
    float: left;
    clear: both;
    margin: 0.25em 1.5em 1.5em 0;
    }
.alignright {
    float: right;
    clear: both;
    margin: 0.25em 0 1.5em 1.5em;
    }
h2, hr {
    clear: both;
    }

配置：左が連続すると、回り込みがおかしくなってしまうので、
画像タグの後に

<div style="clear:both;"></div>

を挟むか、見出しか水平線を書けば回り込みを解除できます。

ニワトリの備忘録

3歩あるいたら忘れちゃうんですもの、メモっとかないと！

カテゴリー別アーカイブ: CSS

背景パターンいろいろ

背景指定

CSSまとめ

画像の回り込み解除　CSS