キリウ君が読まないノート CSSだけで作れる見出しのデザイン
暗い背景色向けの、単一のHTML要素とCSSだけでできる見出しの装飾です。(29個)
[2024-02-04 追記] 全体的に書き直していくつか追加しました。また、「背景色と同じ色で塗りつぶし」してる箇所をできるだけ減らしました。
- 全面的にCSSのネストと変数 (カスタムプロパティ) を使用しています。対応していないブラウザで使う場合、修正が必要です。
- 一部、背景色と同じ色で塗り潰している箇所があるので、背景画像があると表示が不自然になる場合があります。
- 表示の確認はPCのChromeにて行いました。
↓こういうふうに、見出しタグに class を設定して使います。
<h1 class="header-ribbon-1">リボン風の見出し</h1>リボン風の見出し
body なり親要素に overflow: hidden が設定されてないと、画面幅が狭いときに左右スクロールが発生します。
.header-ribbon-1 {
--bg-color: rgb(132, 0, 0);
--bg-color-shadow: rgb(98, 0, 0);
--over-right: 10px;
--over-left: 20px;
--over-bottom: 14px;
--padding-x: 16px;
--padding-y: 12px;
position: relative;
margin: 52px -10px 27px -20px;
padding: var(--padding-y) calc(var(--over-right) + var(--padding-x)) var(--padding-y) calc(var(--over-left) + var(--padding-x));
line-height: 1.3;
background-color: var(--bg-color);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
left: 0;
bottom: calc(-1 * var(--over-bottom));
border-width: calc(var(--over-bottom) * 0.5) calc(var(--over-left) * 0.5);
border-color: var(--bg-color-shadow) var(--bg-color-shadow) transparent transparent;
border-style: solid;
}
&::after {
right: 0;
bottom: calc(-1 * var(--over-bottom));
border-width: calc(var(--over-bottom) * 0.5) calc(var(--over-right) * 0.5);
border-color: var(--bg-color-shadow) transparent transparent var(--bg-color-shadow);
border-style: solid;
}
}リボン風の見出し (はみ出さない)
画面幅をはみ出さないように端を折ってみました。
.header-ribbon-2 {
--bg-color: rgb(132, 0, 0);
--bg-color-shadow-1: rgb(98, 0, 0);
--bg-color-shadow-2: rgb(71, 0, 0);
--double-width: 20px;
--over-bottom: 22px;
position: relative;
margin: 52px 12px 38px;
padding: 12px 16px;
line-height: 1.3;
background-color: var(--bg-color);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
left: calc(var(--double-width) * 2 / 3);
bottom: calc(-1 * var(--over-bottom));
width: calc(var(--double-width) * 4 / 3);
height: var(--over-bottom);
background-color: var(--bg-color-shadow-2);
}
&::after {
left: 0;
bottom: calc(-1 * var(--over-bottom));
border-width: calc(var(--over-bottom) * 0.5) var(--double-width);
border-color: var(--bg-color-shadow-1) var(--bg-color-shadow-1) transparent transparent;
border-style: solid;
}
}フキダシの見出し
ブン殴りたいくらいよく見かけます。
.header-balloon-1 {
--bg-color: rgb(132, 0, 0);
--arrow-left: 40px;
--arrow-width: 26px;
--arrow-height: 14px;
position: relative;
margin: 52px 12px 27px;
padding: 14px 16px;
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 2px;
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before {
content: '';
position: absolute;
display: block;
left: var(--arrow-left);
bottom: calc(-2 * var(--arrow-height));
border-width: calc(var(--arrow-height)) calc(var(--arrow-width) * 0.5);
border-color: var(--bg-color) transparent transparent transparent;
border-style: solid;
}
}フキダシの見出し (元気)
少し元気になりました。
.header-balloon-2 {
--bg-color: rgb(132, 0, 0);
--arrow-left: 40px;
--arrow-width: 36px;
--arrow-height: 16px;
position: relative;
margin: 52px 12px 33px;
padding: 14px 16px;
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 6px;
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before {
content: '';
position: absolute;
display: block;
left: var(--arrow-left);
bottom: calc(-1 * var(--arrow-height));
width: var(--arrow-width);
height: var(--arrow-height);
border-radius: 0 0 0 var(--arrow-width);
background-color: transparent;
box-shadow: calc(var(--arrow-width) * 0.5) 0 var(--bg-color) inset;
}
}フキダシの見出し (思ってる)
自信が無いときに使えます。
.header-balloon-3 {
--bg-color: rgb(132, 0, 0);
--arrow-left: 40px;
--arrow-size-1: 26px;
--arrow-size-2: 12px;
position: relative;
margin: 52px 12px 38px;
padding: 14px 16px;
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 20px; /* テキストが一行の時に端っこが完全に丸くなる程度に設定 */
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: var(--bg-color);
}
&::before {
left: var(--arrow-left);
top: calc(100% - var(--arrow-size-1) * 0.25);
width: var(--arrow-size-1);
height: calc(var(--arrow-size-1) * 0.66);
}
&::after {
left: calc(var(--arrow-left) + var(--arrow-size-1) * 0.8);
top: calc(100% + (var(--arrow-size-1) * 0.4));
width: var(--arrow-size-2);
height: var(--arrow-size-2);
}
}何かのラベル風の見出し
カセットテープやCDのラベルのイメージです。
.header-label {
--bg-color: rgb(132, 0, 0);
--mark-size: 24px;
position: relative;
margin: 52px 12px 27px;
padding: 14px 8px 8px calc(var(--mark-size) + 16px);
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 0 0 5px 5px;
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
position: absolute;
}
&::before {
content: '♪';
display: flex;
align-items: center;
justify-content: center;
top: 13px;
left: 7px;
width: var(--mark-size);
height: var(--mark-size);
background-color: rgb(0, 0, 0);
border-radius: 2px;
font-size: calc(var(--mark-size) * 0.66);
color: rgba(255, 255, 255, 0.85);
}
&::after {
content: '';
display: block;
top: 5px;
left: 0;
width: 100%;
border-top: 1px dotted rgb(0, 0, 0);
}
}ネジで留めた見出し
『＋』が文字なのでフォントに左右されます。
.header-screw-1 {
--bg-color: rgb(132, 0, 0);
--bg-color-highlight: rgb(204, 102, 102);
--thickness: 3px;
--mark-size: 24px;
--mark-color: rgb(44, 44, 44);
position: relative;
margin: 52px 12px 27px;
padding: 11px 8px calc(11px + var(--thickness)) 40px;
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 5px;
box-shadow: -1px calc(-1 * var(--thickness)) 0 0 rgba(0, 0, 0, 0.3) inset;
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '+';
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
top: calc(50% - var(--mark-size) * 0.5 - 1px);
width: var(--mark-size);
height: var(--mark-size);
border-radius: 50%;
background-color: var(--mark-color);
box-shadow:
-2px -6px 0 0 rgba(0, 0, 0, 0.4) inset,
-1px 2px 0 0 rgba(255, 255, 255, 0.3) inset; /* ネジ全体の影とハイライト */
text-shadow:
-1px 0 0 var(--bg-color-highlight),
0 -1px 0 var(--bg-color-highlight),
1px 0 0 rgba(255, 255, 255, 0.65),
0 1px 0 rgba(255, 255, 255, 0.65); /* 十字穴の影とハイライト */
font-size: calc(var(--mark-size) * 0.85);
color: var(--bg-color);
}
&::before {
left: 8px;
}
&::after {
right: 8px;
}
}ネジで留めた見出し (フォントに依存しない)
文字の代わりにボーダーを使うことで、フォントに左右されないネジを手に入れました。代償に、プラスのネジは無理でした。疑似クラスを before after とも使ってしまうので、左右を同時にとめることもできません。
.header-screw-2 {
--bg-color: rgb(132, 0, 0);
--bg-color-highlight: rgb(204, 102, 102);
--thickness: 3px;
--mark-size: 24px;
--mark-color: rgb(44, 44, 44);
position: relative;
margin: 52px 12px 27px;
padding: 11px 8px calc(11px + var(--thickness)) 40px;
line-height: 1.3;
background-color: var(--bg-color);
border-radius: 5px;
box-shadow: -1px calc(-1 * var(--thickness)) 0 0 rgba(0, 0, 0, 0.3) inset;
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
top: calc(50% - var(--mark-size) * 0.5 - 1px);
left: 8px;
width: var(--mark-size);
height: var(--mark-size);
border-radius: 50%;
background-color: var(--mark-color);
box-shadow:
-2px -6px 0 0 rgba(0, 0, 0, 0.4) inset,
-1px 2px 0 0 rgba(255, 255, 255, 0.3) inset;
}
&::after {
box-sizing: content-box;
top: calc(50% - 2px);
left: calc(8px + (var(--mark-size) - var(--mark-size) * 0.55) * 0.5 - 1px);
width: calc(var(--mark-size) * 0.55);
height: 1px;
box-shadow:
-2px -6px 0 0 rgba(0, 0, 0, 0.4) inset,
-1px 2px 0 0 rgba(255, 255, 255, 0.3) inset;
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-color: var(--bg-color-highlight) rgba(255, 255, 255, 0.65) rgba(255, 255, 255, 0.65) var(--bg-color-highlight);
background-color: var(--bg-color);
}
}セロテープで貼った見出し
黄ばみがポイントです。
.header-sellotape {
--page-bg-color: rgb(32, 32, 32); /* ページの背景色と同じ色 */
--header-bg-color: rgb(204, 204, 204);
--tape-color-rgb: 120, 110, 70;
--tape-width: 40px;
--tape-height: 27px;
position: relative;
margin: 52px calc(12px + var(--tape-width) * 0.5) 27px;
padding: 13px calc(10px + var(--tape-width) * 0.5);
line-height: 1.3;
background-color: var(--header-bg-color);
font-size: 18px;
font-weight: normal;
color: rgb(20, 20, 20);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
box-sizing: border-box;
content: '';
position: absolute;
display: block;
top: calc(50% - var(--tape-height) * 0.5);
width: var(--tape-width);
height: var(--tape-height);
background-color: rgba(var(--tape-color-rgb), 0.4);
}
&::before {
left: calc(-1 * var(--tape-width) * 0.5);
border-left: 2px dotted var(--page-bg-color);
border-right: 2px dotted var(--header-bg-color);
}
&::after {
right: calc(-1 * var(--tape-width) * 0.5);
border-right: 2px dotted var(--page-bg-color);
border-left: 2px dotted var(--header-bg-color);
}
}セロテープで貼った見出し (傾いている)
剥がれにくくしました。
.header-sellotape-tilt {
--margin-x: 6px;
--page-bg-color: rgb(32, 32, 32); /* ページの背景色と同じ色 */
--header-bg-color: rgb(204, 204, 204);
--tape-color: rgba(120, 110, 70, 0.4);
--tape-width-left: 100px;
--tape-width-right: 80px;
--tape-height: 27px;
position: relative;
margin: 60px calc(var(--margin-x) + var(--tape-width-right) * 0.5) 27px calc(var(--margin-x) + var(--tape-width-left) * 0.35);
padding: 13px calc(10px + var(--tape-width-right) * 0.5) 13px calc(10px + var(--tape-width-left) * 0.4);
line-height: 1.3;
background-color: var(--header-bg-color);
font-size: 18px;
font-weight: normal;
color: rgb(20, 20, 20);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
box-sizing: border-box;
content: '';
position: absolute;
display: block;
height: var(--tape-height);
background-color: var(--tape-color);
}
&::before {
top: -5px;
left: calc(-1 * var(--tape-width-left) * 0.32);
width: var(--tape-width-left);
border-left: 2px dotted var(--page-bg-color);
border-right: 2px dotted var(--page-bg-color);
transform: rotate(-33deg);
}
&::after {
top: calc(50% - var(--tape-height) * 0.5 + 2px);
right: calc(-1 * var(--tape-width-right) * 0.4);
width: var(--tape-width-right);
border-right: 2px dotted var(--page-bg-color);
border-left: 2px dotted var(--header-bg-color);
transform: rotate(10deg);
}
}マスキングテープで貼った見出し
変数でズルしてます。セロテープの色と透明度を上書きしただけです。
.header-masking-tape {
--tape-color: rgba(180, 30, 30, 0.85) !important;
}切り取り線の見出し
ハサミは文字なので、フォントに左右されます。
.header-cut-here-1 {
--mark-size: 28px;
--shadow-height: 40px;
position: relative;
margin: calc(var(--shadow-height) + 22px) 0 27px;
padding: 20px 10px 12px 34px;
line-height: 1.3;
background: linear-gradient(rgba(255, 255, 255, 0.05), transparent);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
position: absolute;
display: block;
}
&::before {
box-sizing: content-box;
content: '';
top: calc(-1 * var(--shadow-height));
left: 0;
width: 100%;
height: var(--shadow-height);
border-bottom: 2px dashed rgba(255, 255, 255, 0.7);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
}
&::after {
content: '✂';
top: calc(-1 * var(--mark-size) * 0.5 - 1px);
left: 16px;
font-size: var(--mark-size);
text-shadow:
1px 0 0 var(--page-bg-color),
0 1px 0 var(--page-bg-color),
-1px 0 0 var(--page-bg-color),
0 -1px 0 var(--page-bg-color);
}
}矢印の見出し
ぴゅー
.header-arrow-1 {
--arrow-color-rgb: 255, 255, 255;
--arrow-width: 14px;
--arrow-height: 7px;
position: relative;
margin: 52px 12px 27px;
padding: 12px 16px;
line-height: 1.3;
border-bottom: 1px solid rgb(var(--arrow-color-rgb));
border-left: 1px solid rgba(var(--arrow-color-rgb), 0.75);
font-size: 18px;
font-weight: normal;
color: rgb(var(--arrow-color-rgb));
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
right: calc(-1 * var(--arrow-width));
bottom: calc(-1 * var(--arrow-height));
border-width: var(--arrow-height) var(--arrow-width);
border-color: transparent transparent transparent rgb(var(--arrow-color-rgb));
border-style: solid;
}
&::after {
top: 0;
left: 0;
width: 8%;
border-top: 1px solid rgba(var(--arrow-color-rgb), 0.5);
}
}矢印の見出し (上半分)
矢印が上半分だけのバージョンです。
.header-arrow-2 {
--arrow-color-rgb: 255, 255, 255;
--arrow-width: 9px;
--arrow-height: 6px;
position: relative;
margin: 52px 12px 27px;
padding: 12px 16px;
line-height: 1.3;
border-bottom: 1px solid rgb(var(--arrow-color-rgb));
border-left: 1px solid rgba(var(--arrow-color-rgb), 0.75);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&&::after {
content: '';
position: absolute;
display: block;
}
&::before {
right: 0;
bottom: 0;
border-width: var(--arrow-height) var(--arrow-width);
border-color: transparent transparent rgb(var(--arrow-color-rgb)) rgb(var(--arrow-color-rgb));
border-style: solid;
}
&::after {
top: 0;
left: 0;
width: 8%;
border-top: 1px solid rgba(var(--arrow-color-rgb), 0.5);
}
}階段のぼる見出し
箱を積んで階段を作りました。
.header-upstairs {
--margin-x: 12px;
--border-color-rgb: 255, 255, 255;
--stair-width: 16px;
--stair-height: 14px;
box-sizing: border-box;
position: relative;
margin: 52px var(--margin-x) 27px;
padding: 10px 10px 10px 16px;
width: calc(100% - calc(var(--stair-width) * 2 + var(--margin-x) * 2));
line-height: 1.3;
border-left: 1px solid rgba(var(--border-color-rgb), 0.7);
border-bottom: 1px solid rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
box-sizing: content-box;
content: '';
position: absolute;
display: block;
width: var(--stair-width);
height: var(--stair-height);
border-style: solid;
border-color: rgba(var(--border-color-rgb), 0.7);
border-width: 1px 0 0 1px;
}
&::before {
right: calc(-1 * var(--stair-width));
bottom: 0;
}
&::after {
right: calc(-1 * var(--stair-width) * 2);
bottom: calc(var(--stair-height) + 1px);
}
}階段おりる見出し
おりてみました。
.header-downstairs {
--margin-x: 12px;
--border-color-rgb: 255, 255, 255;
--stair-width: 16px;
--stair-height: 14px;
box-sizing: border-box;
position: relative;
margin: 52px var(--margin-x) 27px;
padding: 10px 10px 10px 16px;
width: calc(100% - calc(var(--stair-width) * 2 + var(--margin-x) * 2));
line-height: 1.3;
border-left: 1px solid rgba(var(--border-color-rgb), 0.7);
border-top: 1px solid rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
box-sizing: content-box;
content: '';
position: absolute;
display: block;
width: var(--stair-width);
height: var(--stair-height);
border-style: solid;
border-color: rgba(var(--border-color-rgb), 0.7);
border-width: 0 0 1px 1px;
}
&::before {
right: calc(-1 * var(--stair-width) - 1px);
top: -1px;
}
&::after {
right: calc(-1 * var(--stair-width) * 2 - 1px);
top: calc(var(--stair-height));
}
}リボンマークの見出し
素朴なリボンマークです。
.header-ribbon-mark {
--mark-margin: 8px;
--ribbon-color: rgb(153, 0, 0);
--ribbon-width: 38px;
--ribbon-height: 26px;
--knot-size: calc(var(--ribbon-width) * 0.25);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px calc(10px + var(--mark-margin) + var(--ribbon-width));
line-height: 1.3;
border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before {
box-sizing: content-box;
content: '';
position: absolute;
display: block;
left: var(--mark-margin);
top: var(--mark-margin);
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--ribbon-height) * 0.5) calc(var(--ribbon-width) * 0.5);
border-color: transparent var(--ribbon-color);
}
&::after {
content: '';
display: block;
position: absolute;
left: calc(var(--mark-margin) + var(--ribbon-width) * 0.5 - var(--knot-size) * 0.5);
top: calc(var(--mark-margin) + var(--ribbon-height) * 0.5 - var(--knot-size) * 0.5);
width: var(--knot-size);
height: var(--knot-size);
background-color: var(--ribbon-color);
border-radius: 40%;
}
}みかんマークの見出し
みかんマークです。
.header-mikan-mark {
--mark-margin: 8px;
--mikan-width: 30px;
--leaf-size: calc(var(--mikan-width) * 0.4);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px calc(10px + var(--mark-margin) + var(--mikan-width));
line-height: 1.3;
border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
box-sizing: content-box;
content: '';
position: absolute;
display: block;
}
&::before {
left: var(--mark-margin);
top: calc(var(--mark-margin) + var(--mikan-width) * 0.1);
width: var(--mikan-width);
height: calc(var(--mikan-width) * 0.83);
background-color: rgb(238, 136, 34);
border-radius: 50%;
box-shadow: 0 -3px 2px 1px rgba(128, 0, 0, 0.4) inset;
}
&::after {
left: calc(var(--mark-margin) + var(--mikan-width) * 0.5 - var(--leaf-size) * 0.25);
top: calc(var(--mark-margin) - var(--leaf-size) * 0.15);
width: var(--leaf-size);
height: var(--leaf-size);
background-color: rgb(0, 119, 0);
border-radius: 100% 0 100% 0;
box-shadow: -2px -2px rgba(255, 255, 0, 0.2) inset;
}
}月マークの見出し
月を見るたび思い出します。
.header-moon-mark {
--moon-width: 31px;
--moon-height: 29px;
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 48px;
line-height: 1.3;
border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
left: 8px;
top: 6px;
width: var(--moon-width);
height: var(--moon-height);
border-radius: 50%;
}
&::before {
background-color: transparent;
box-shadow:
3px 2px 1px 0px rgb(255, 255, 255) inset,
3px -2px 1px 0px rgb(255, 255, 255) inset,
5px 0 1px rgb(255, 255, 255) inset;
}
&::after {
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3) inset;
}
}死んだ目の見出し
死んでます。
.header-eye-1 {
--border-color-rgb: 255, 255, 255;
--mark-margin: 8px;
--eye-size: 26px;
--iris-size: calc(var(--eye-size) * 0.62);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 50px;
line-height: 1.3;
border-bottom: 1px dotted rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
left: calc(var(--mark-margin) * 1.41);
top: var(--mark-margin);
width: var(--eye-size);
height: var(--eye-size);
background-color: rgb(221, 221, 221);
border-radius: 100% 0 100% 0;
transform: rotate(45deg);
}
&::after {
left: calc(var(--mark-margin) * 1.41 + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
top: calc(var(--mark-margin) + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
width: var(--iris-size);
height: var(--iris-size);
background-color: rgb(0, 0, 0);
border-radius: 50%;
}
}死んだ目の見出し (半眼)
そんな目で見ないで～。
.header-eye-2 {
--border-color-rgb: 255, 255, 255;
--mark-margin: 8px;
--eye-width: 32px;
--eye-height: calc(var(--eye-width) * 0.5);
--iris-width: calc(var(--eye-width) * 0.5);
--iris-height: calc(var(--iris-width) * 0.7);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 50px;
line-height: 1.3;
border-bottom: 1px dotted rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
top: calc(var(--mark-margin) + 5px);
}
&::before {
left: var(--mark-margin);
width: var(--eye-width);
height: var(--eye-height);
background-color: rgb(221, 221, 221);
border-radius: 0 0 var(--eye-height) var(--eye-height);
}
&::after {
left: calc(var(--mark-margin) + var(--eye-width) * 0.5 - var(--iris-width) * 0.5);
width: var(--iris-width);
height: var(--iris-height);
background-color: rgb(0, 0, 0);
border-radius: 0 0 var(--iris-height) var(--iris-height);
}
}死んでない目の見出し
死んでません。
.header-eye-3 {
--border-color-rgb: 255, 255, 255;
--mark-margin: 8px;
--eye-size: 26px;
--iris-size: calc(var(--eye-size) * 0.62);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 50px;
line-height: 1.3;
border-bottom: 1px dotted rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
left: calc(var(--mark-margin) * 1.41);
top: var(--mark-margin);
width: var(--eye-size);
height: var(--eye-size);
background-color: rgb(221, 221, 221);
border-radius: 100% 0 100% 0;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2) inset;
transform: rotate(45deg);
}
&::after {
box-sizing: border-box;
left: calc(var(--mark-margin) * 1.41 + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
top: calc(var(--mark-margin) + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
width: var(--iris-size);
height: var(--iris-size);
background-color: rgb(221, 221, 221);
border: 6px solid rgb(153, 0, 0);
border-radius: 50%;
}
}充血した目の見出し
プールで病気をうつされました。
.header-eye-4 {
--border-color-rgb: 255, 255, 255;
--mark-margin: 8px;
--eye-size: 26px;
--iris-size: calc(var(--eye-size) * 0.62);
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 50px;
line-height: 1.3;
border-bottom: 1px dotted rgba(var(--border-color-rgb), 0.7);
font-size: 18px;
font-weight: normal;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
display: block;
}
&::before {
left: calc(var(--mark-margin) * 1.41);
top: var(--mark-margin);
width: var(--eye-size);
height: var(--eye-size);
background-color: rgb(221, 221, 221);
border-radius: 100% 0 100% 0;
box-shadow:
3px 3px rgba(0, 0, 0, 0.2) inset,
0 0 4px 4px rgba(192, 0, 0, 0.25) inset;
transform: rotate(45deg);
}
&::after {
box-sizing: border-box;
left: calc(var(--mark-margin) * 1.41 + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
top: calc(var(--mark-margin) + var(--eye-size) * 0.5 - var(--iris-size) * 0.5);
width: var(--iris-size);
height: var(--iris-size);
background-color: rgb(238, 204, 204);
border-width: 6px;
border-style: solid;
border-color: rgb(119, 0, 0) rgb(153, 0, 0) rgb(187, 0, 0) rgb(153, 0, 0);
border-radius: 50%;
box-shadow: 0 0 2px 2px rgba(160, 0, 0, 0.4);
}
}血がにじむ見出し
みにくくないですか？
.header-blood {
margin: 52px 12px 27px;
padding: 10px 14px;
line-height: 1.3;
font-size: 18px;
font-weight: bold;
color: rgb(146, 0, 0);
text-shadow:
0 2px 3px rgb(102, 0, 0),
-1px 4px 3px rgb(102, 0, 0),
0 6px 3px rgb(102, 0, 0),
2px 0 5px rgb(153, 17, 17),
-3px 1px 6px rgb(153, 0, 0);
word-break: break-all;
word-wrap: break-word;
}殺人現場の見出し
死体の周りに線が引いてあるやつのイメージです。
.header-claimscene {
position: relative;
margin: 52px 12px 27px;
padding: 8px 14px;
line-height: 1.3;
font-size: 18px;
font-weight: bold;
color: rgb(0, 0, 0);
text-shadow:
1px 0 0 rgb(204, 204, 204),
0 1px 0 rgb(204, 204, 204),
-1px 0 0 rgb(204, 204, 204),
0 -1px 0 rgb(204, 204, 204);
&::before,
&::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
}
&::before {
left: 30px;
top: 5px;
width: 40px;
height: 33px;
background-color: rgba(255, 0, 0, 0.3);
box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.3);
}
&::after {
left: 63px;
top: 24px;
width: 14px;
height: 14px;
background-color: rgba(255, 0, 0, 0.2);
box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.2);
}
}殺人現場の立札の見出し
立ててみました。
.header-sign {
position: relative;
margin: 52px 12px 27px;
padding: 10px 10px 10px 58px;
line-height: 1.3;
font-size: 18px;
font-weight: bold;
color: rgb(255, 255, 255);
text-shadow: 0 3px rgba(0, 0, 0, 0.3);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
content: '';
position: absolute;
left: 10px;
top: 5px;
width: 28px;
height: 32px;
border-radius: 2px;
}
&::before {
display: block;
background-color: rgb(17, 17, 17);
box-shadow:
1px 0 rgba(255, 255, 255, 0.5),
0 1px rgba(255, 255, 255, 0.5);
transform: matrix(1, 0, 0.15, 0.75, 5.5, 0); /* 水平傾き0.15, 垂直拡大率0.75, 水平移動5.5 */
}
&::after {
content: '3';
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(47, 47, 47);
box-shadow:
-1px 1px rgb(85, 85, 85) inset,
-1px 0 rgba(255, 255, 255, 0.5),
0 1px rgba(255, 255, 255, 0.5),
0 -1px rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 18px;
font-weight: bold;
color: rgb(255, 255, 255);
transform: matrix(1, 0, -0.15, 0.9, 0, 0); /* 水平傾き-0.15, 垂直拡大率0.9 */
}
}KEEP OUTの見出し
さっきから人が死んでるような……。
.header-keepout {
position: relative;
margin: 52px 0 27px;
padding: 7px 10px;
line-height: 1.3;
background-color: rgb(255, 238, 0);
font-size: 18px;
font-weight: bold;
color: rgb(0, 0, 0);
word-break: break-all;
word-wrap: break-word;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
&::before,
&::after {
box-sizing: content-box;
content: '';
position: absolute;
display: block;
left: 0;
width: 100%;
height: 0;
border-top: 2px solid rgb(0, 0, 0);
}
&::before {
top: 3px;
}
&::after {
bottom: 3px;
}
}幻聴がする見出し
少し物騒ですが、CSSなのでSEO的には問題無いはずです。
.header-hallucination-1 {
--padding: 16px;
overflow: hidden;
position: relative;
margin: 52px 12px 27px;
padding: var(--padding);
line-height: 1.3;
font-size: 18px;
color: rgb(255, 255, 255);
word-break: break-all;
word-wrap: break-word;
&::before,
&::after {
position: absolute;
display: block;
left: calc(-1 * var(--padding) * 0.5);
top: calc(-1 * var(--padding) * 0.5);
width: 105%;
font-weight: normal;
color: rgba(255, 255, 255, 0.15);
mix-blend-mode: screen;
}
&::before {
/* 本体の要素が大きくなりすぎると文字が足りなくなるので、多めに設定 */
content: '死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね';
line-height: 1;
}
&::after {
content: 'ゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズ';
line-height: 0.9;
}
}幻覚手前の見出し
疲れ目のせいで時々ぼやけて見えます。
.header-hallucination-2 {
--padding: 16px;
--color-1-rgb: 255, 0, 0;
--color-2-rgb: 0, 255, 255;
overflow: hidden;
position: relative;
margin: 52px 12px 27px;
padding: var(--padding);
line-height: 1.3;
font-size: 18px;
color: rgb(255, 255, 255);
text-shadow:
2px 0 1px rgb(var(--color-1-rgb)),
-2px 0 1px rgb(var(--color-2-rgb));
word-break: break-all;
word-wrap: break-word;
animation: hallucination-2-animation 6s linear infinite;
&::before,
&::after {
position: absolute;
display: block;
left: calc(-1 * var(--padding) * 0.5);
top: calc(-1 * var(--padding) * 0.5);
width: 105%;
font-weight: normal;
text-shadow: none;
mix-blend-mode: screen;
}
&::before {
content: '死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね';
line-height: 1;
color: rgba(var(--color-1-rgb), 0.4);
text-shadow: 2px 0 rgba(var(--color-2-rgb), 0.2);
}
&::after {
content: 'ゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズ';
line-height: 0.9;
color: rgba(var(--color-2-rgb), 0.2);
text-shadow: 2px 0 rgba(var(--color-1-rgb), 0.4);
}
}
@keyframes hallucination-2-animation {
0%,
100% {
filter: blur(0px);
}
50% {
filter: blur(1px);
}
}以上
(↑これは本物です。)
人間は、あえて使いにくいものを作ろうと思って作るわけではありません。できあがったものが使いにくいというだけ……………………。