2018年08月17日
光と色の三原色
◆光の三原色
◆html
<div class="hikari3"></div>
◆css
.hikari3
{
width:300px;
height:calc(300px*0.95534180126);
background-image:
radial-gradient(circle closest-side at 50% 34.891526037%,red calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(100%/3) 65.108473962%,lime calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(200%/3) 65.108473962%,blue calc(100% - 1px),transparent calc(100% - 1px));
background-blend-mode:screen;
}
◆色の三原色
◆html
<div class="iro3"></div>
◆css
.iro3
{
width:300px;
height:calc(300px*0.95534180126);
background-image:
radial-gradient(circle closest-side at 50% 34.891526037%,aqua calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(100%/3) 65.108473962%,fuchsia calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(200%/3) 65.108473962%,yellow calc(100% - 1px),transparent calc(100% - 1px));
background-blend-mode:multiply;
}
◆html
<div class="hikari3"></div>
◆css
.hikari3
{
width:300px;
height:calc(300px*0.95534180126);
background-image:
radial-gradient(circle closest-side at 50% 34.891526037%,red calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(100%/3) 65.108473962%,lime calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(200%/3) 65.108473962%,blue calc(100% - 1px),transparent calc(100% - 1px));
background-blend-mode:screen;
}
◆色の三原色
◆html
<div class="iro3"></div>
◆css
.iro3
{
width:300px;
height:calc(300px*0.95534180126);
background-image:
radial-gradient(circle closest-side at 50% 34.891526037%,aqua calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(100%/3) 65.108473962%,fuchsia calc(100% - 1px),transparent calc(100% - 1px)),
radial-gradient(circle closest-side at calc(200%/3) 65.108473962%,yellow calc(100% - 1px),transparent calc(100% - 1px));
background-blend-mode:multiply;
}
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/8001280
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
