CSS BACKGROUND

BACKGROUND

Slak

BAC KG U RO U N D

"Mastering Backguround Images in CSS:A Step-by-StepTutorial Guide"

Rainbow

グラデーションと聞くと、虹を連想する方も多いのではないのでしょうか？ 虹を見ると、なんだか良いことが起きそうな気がしてワクワクしますよね。 滅多にみることのできない虹だからこそ、見つけた時にはうれしくなるものです。

人によっては、大事な出来事の前には虹を必ず見るという人もいるのだとか。

CSS Source

@charset "UTF-8"; body { height: 200px; width: 90%; background-image: linear-gradient(90deg, rgba(255, 97, 97, 1), rgba(233, 178, 45, 1) 20%, rgba(192, 202, 75, 1) 34%, rgba(53, 179, 56, 1) 58%, rgba(86, 110, 243, 1) 79%, rgba(154, 39, 238, 1)); }

Rainbow参考サイト：https://www grabient com/

Longing

画面から浮き上がったようなストライプ、そしてカラーはティファニーブルー。　　 そんなティファニーブルーの色は小鳥の「コマドリ」の卵の色が由来だそうです。 ステータスや洗練されたイメージのストライプはまさに「憧れ」でしかありません。

CSS Source

@charset "UTF-8"; body{

background-color: #0abab4de; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); background-size: 3rem 3rem; }

Longing参考サイト：https://note.com/minimary320/n/n21ae10de37f2

Polka

「ポルカ」は二拍子の軽快な二人組の舞踏、またその舞曲。 ポーランド語での原義は「ポーランドの女性」。

この舞踏は１９世紀初めにチェコのボヘミヤ地方で始まったというそんな社交ダンスである。 「ポルカ」を上から見ている、そんなイメージのデザインなのです。

CSS Source

@charset "UTF-8"; body{ --s: 75px; /* control the size */ --c: #1a144a; --_g: conic-gradient(var(--c) 25%,#0000 0) 0 0; background:

var(--_g)/calc(2*var(--s)) calc(var(--s)/5.5), var(--_g)/calc(var(--s)/5.5) calc(2*var(--s)), repeating-conic-gradient(#0000 0 25%,var(--c) 0 50%)

var(--s) 0 /calc(2*var(--s)) calc(2*var(--s)), radial-gradient(50% 50%,#2eb044 98%,var(--c)) 0 0/var(--s) var(--s); }

Polka参考サイト：https://freefrontend com/css-background-patterns/page/2/

Deepinhistory

タータンチェックという模様はスコットランドから始まり、 イギリス国王ジョージ４世により広められ、その後英国王室ゆかりの柄として定着しました。 現在では制服やハイブランドまで幅広く愛用されている伝統的な柄といえるでしょう。

@charset "UTF-8"; body{ /* 横太線（黒）の記述↓height+width */ height:448px; width:100%; color: white; background-color:#ff0000; background-image: repeating-linear-gradient(transparent, transparent 50px, rgb(255, 238, 0,.7) 50px, rgb(255, 238, 0,.7) 52.5px, transparent 53px, transparent 63px, rgb(255, 255, 255,.7) 62.5px, rgb(255, 255, 255,.7) 68px, transparent 66px, transparent 116px, rgba(0,0,0,.7) 116px, rgba(0,0,0,.7) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.7) 169px, rgba(0,0,0,.7) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.7) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgb(255, 255, 255,.7) 50px, rgb(255, 255, 255,.7) 53px, transparent 53px, transparent 63px, rgb(255, 238, 0,.7) 63px, rgb(255, 238, 0,.7) 69px, transparent 66px, transparent 116px, rgba(0,0,0,.7) 116px, rgba(0,0,0,.7) 166px, rgba(255,255,255,.0) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.7) 169px, rgba(0,0,0,.7) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 179px, rgba(0,0,0,.7) 182px, rgba(0,0,0,.7) 232px, transparent 232px);

Deep in history参考サイト:https://projects verou me/css3patterns/#tartan

Soapbubble

「シャボン玉」は光の反射で、様々な色を表現してくれる。そして、大きなものから ごく小さなものまでつくることができ、私たちを楽しませてくれる。 そんな「シャボン玉」を表現したドットの背景です。

CSS Source

@charset "UTF-8"; body {

background-image:

radial-gradient(530px 530px , rgba(123, 222, 128, 0.6) 20%, transparent 20.8%),

radial-gradient(750px 750px , rgba(216, 222, 123, 0.6) 20%, transparent 20.5%),

radial-gradient(1000px 990px , rgba(123,222,217, 0.6) 20%, transparent 20.5%),

radial-gradient(400px 380px , rgba(146, 81, 146, 0.6) 20%, transparent 21%),

radial-gradient(200px 200px , rgba(245, 153, 176, 0.6) 20%, transparent 21.3%),

radial-gradient(300px 300px , rgba(216, 141, 50, 0.6) 20%, transparent 21.3%);

background-size:

/* 背景サイズ */

1320px 1320px, 820px 1000px, 1670px 990px, 1200px 1750px, 1220px 1250px, 3900px 2050px; background-position:

/* 背景位置 */ -10px -100px, 400px 1200px, -10px 710px, -150px -600px, -2530px -420px, -1450px -250px; }

Soap bubble参考サイト:https://qiita com/7note/items/0863d5cc90424fd06f51

Jul

北欧スェーデンでは、クリスマスのことをJul（ユール）と呼びますが、その起源はキリスト 教以前からある、太陽の蘇りを祝い翌春の豊作を祈る、冬至の祭りでした。

現在のスェーデンでは、北欧神話的民間信仰とキリスト教の習慣が合わさった形として 北欧独自のJul（ユール）となりました。

CSS Source

@charset "UTF-8"; html {

--s: 75px; /* control the size */

--_c:#0000,#fff 1deg 79deg,#0000 81deg;

--g0:conic-gradient(from 140deg at 50% 87.5% ,var(--_c));

--g1:conic-gradient(from 140deg at 50% 81.25%,var(--_c));

--g2:conic-gradient(from 140deg at 50% 75% ,var(--_c));

--g3:conic-gradient(at 10% 20%,#0000 75%,#fff 30%);

background:

var(--g0) 0 calc(var(--s)/-4),var(--g0) var(--s) calc(3*var(--s)/4), var(--g1) ,var(--g1) var(--s) var(--s), var(--g2) 0 calc(var(--s)/ 4),var(--g2) var(--s) calc(5*var(--s)/4), var(--g3) calc( var(--s)/-10) var(--s), var(--g3) calc(9*var(--s)/10) calc(2*var(--s)), repeating-conic-gradient(from 45deg,#a31e39 0 25%,#31570e 0 50%); background-size: calc(2*var(--s)) calc(2*var(--s));

Jul 参考サイト：https://freefrontend com/css-background-patterns/

Rising

サ ー フィンでいう良い波とは「うねり」といい 、気圧によ って起こされた 規則正しい波のことです 。

一 方 、「風浪」とは風により起きた波で 、海面が荒れた状態のことを言います 。 つまり波とは月の満ち欠けや 、満潮・ 干潮により大きく変化し 、 とても神秘的な現象なのです 。

CSS Source

@charset "UTF-8"; body{

background: linear-gradient(#519d90 50%, rgba(255,255,255,0) 0) 0 0, radial-gradient(circle closest-side, #519d90 53%, rgba(255,255,255,0) 53.8%) 0 0, radial-gradient(circle closest-side, #519d90 50%, rgba(255,255,255,0) 51.2%) 55px 0 #e69675;

background-size: 110px 200px; /* background-repeat: repeat-x; */ }

Rising 参考サイト：https://projects verou me/css3patterns/