新規記事の投稿を行うことで、非表示にすることが可能です。
2018年08月19日
display:flex;
s側の線・・・開始線/start e側の線・・・終了線/end
続きを読む...
row | row-reverse | column | column-reverse | |
nowrap | s 主軸→ ┏━━━ 交┃@AB┃ 差 ━━━┛ 軸 e ↓ | ←主軸 s ━━━┓ ┃BA@┃交 ┗━━━ 差 e 軸 ↓ | s 交差軸→ ┏━ 主┃@┃ 軸┃A┃ ↓┃B┃ ━┛ e | e ━┓ ↑┃B┃ 主┃A┃ 軸┃@┃ ┗━ s 交差軸→ |
wrap | s 主軸→ ┏━━━ 交┃@AB┃ 差┃CDE┃ 軸┃FGH┃ ↓ ━━━┛ e | ←主軸 s ━━━┓ ┃BA@┃交 ┃EDC┃差 ┃HGF┃軸 ┗━━━ ↓ e | s 交差軸→ ┏━━━ 主┃@CF┃ 軸┃ADG┃ ↓┃BEH┃ ━━━┛ e | e ━━━┓ ↑┃BEH┃ 主┃ADG┃ 軸┃@CF┃ ┗━━━ s 交差軸→ |
wrap-reverse | e ↑ ━━━┓ 交┃FGH┃ 差┃CDE┃ 軸┃@AB┃ ┗━━━ s 主軸→ | e ┏━━━ ↑ ┃HGF┃交 ┃EDC┃差 ┃BA@┃軸 ━━━┛ ←主軸 s | ←交差軸 s ━━━┓ ┃FC@┃主 ┃GDA┃軸 ┃HEB┃↓ ┗━━━ e | e ┏━━━ ┃HEB┃↑ ┃GDA┃主 ┃FC@┃軸 ━━━┛ ←交差軸 s |
続きを読む...
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;
}