こんにちは!!

エレクアライズ 制作技術局 ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回は背景パターンといえばの王道、ストライプやボーダーをCSSで作成します。
ってかそもそもそれってできるの?できます

CSSを使えば。

CSSって何?って方はこちら

例えばこんな感じ(ストライプ)

ストライプのCSSプロパティはこんな感じ。

background: repeating-linear-gradient(90deg, #920783, #920783 10px, #EB6100 0, #EB6100 20px);
赤字の箇所が背景の色で、青字の箇所がの色です。

続いてボーダー編

例えばこんな感じ(ボーダー)

ボーダーのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(#920783, #920783 10px, #231815 0, #231815 20px);
赤字の箇所が背景の色で、青字の箇所がの色です。

続いて斜め右ストライプ編

例えばこんな感じ(斜め右ストライプ)

斜め右ストライプのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(45deg, #DB5425, #DB5425 10px, #E5A83F 0, #E5A83F 20px);
赤字の箇所が背景の色で、青字の箇所がの色です。

続いて斜め左ストライプ編

例えばこんな感じ(斜め左ストライプ)

斜め左ストライプのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(-45deg, #955629, #955629 10px, #E60012 0, #E60012 20px);
赤字の箇所が背景の色で、青字の箇所がの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。


背景色

線色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.7へ
→ ツナガルチップス No.9へ

###########################################
Android開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
4色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
4色シーバリプレミアム for Y.Y Magic

吉永 祐太

###########################################