<section>
<header>
<h2>选项 #1: Rebeccapurple</h2>
<p>这个颜色对CSS来说有着<a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/">重要的历史意义</a>，在CSS中可以直接使用关键字 <code>rebeccapurple</code>，并且与亮色字母形成良好的对比度。</p>
</header>
<div>
<web-logo>
<div class="box css purple">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light outlined">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark outlined">
<p>CSS</p>
</div>
</web-logo>
</div>
<div class="sm">
<web-logo>
<div class="box css purple">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light outlined">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark outlined">
<p>CSS</p>
</div>
</web-logo>
</div>
</section>
<section>
<h2>搭配其他语言</h2>
<div>
<web-logo>
<div class="box css purple">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box js">
<p>JS</p>
</div>
</web-logo>
<web-logo>
<div class="box ts">
<p>TS</p>
</div>
</web-logo>
<web-logo>
<div class="box wa">
<p>WA</p>
</div>
</web-logo>
<web-logo>
<div class="box html">
<p>HTML</p>
</div>
</web-logo>
</div>
</section>
<hr>
<section>
<header>
<h2>选项 #2: 蓝色</h2>
<p>CSS原始标志、W3C标志和CSS3盾牌都使用了蓝色或其色调/阴影。这是一个可识别的、传统的颜色，并具有良好的对比度。</p>
<p>然而，有多种蓝色可供选择。规范标准链接蓝、W3C标志中的蓝色，以及CSS3盾牌中的蓝色（盾牌中的浅蓝色对比度不够）。</p>
<br>
<label>
选择蓝色：
<select id="blues">
<option value="#005a9c">W3C蓝</option>
<option value="#0000EE">链接蓝</option>
<option value="#0339f8">CSS3盾牌蓝</option>
<option value="blue">标准蓝</option>
</select>
</label>
</header>
<div>
<web-logo>
<div class="box css blue">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light outlined">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark outlined">
<p>CSS</p>
</div>
</web-logo>
</div>
<div class="sm">
<web-logo>
<div class="box css blue">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css light outlined">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css dark outlined">
<p>CSS</p>
</div>
</web-logo>
</div>
</section>
<section>
<h2>搭配其他语言</h2>
<div>
<web-logo>
<div class="box css blue">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box js">
<p>JS</p>
</div>
</web-logo>
<web-logo>
<div class="box ts">
<p>TS</p>
</div>
</web-logo>
<web-logo>
<div class="box wa">
<p>WA</p>
</div>
</web-logo>
<web-logo>
<div class="box html">
<p>HTML</p>
</div>
</web-logo>
</div>
</section>
<hr>
<article>
<web-logo>
<div class="box css purple">
<p>CSS</p>
</div>
</web-logo>
<web-logo>
<div class="box css blue">
<p>CSS</p>
</div>
</web-logo>
</article>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
/*
注意事项:
- light/pink 使用 text-stroke 以匹配深色 logo 的粗体效果
- 深色 logo 不需要描边，因为它本身在视觉上已经足够粗
- div 是嵌套的以便能适应容器
- p 是嵌套的以便 <sup> 可以与语言共享盒子内边距
*/
web-logo {
container-type: inline-size;
overflow: hidden;
/* 仅用于测试 */
/* resize: inline; */
aspect-ratio: 1;
.box {
--_text: #2b2729;
--_surface: gray;
font-variation-settings: "wdth" 75, "slnt" 0, "wght" 900;
color: var(--_text);
background: var(--_surface);
aspect-ratio: 1;
height: 100%;
/* for safari */
padding: 7.5cqi;
font-size: 35cqi;
display: grid;
place-items: end;
&.css {
border-radius: 0 15cqi 15cqi;
--_text: white;
&.blue {
--_surface: #0339f8;
/* shield blue */
--_surface: #0000EE;
/* spec link blue */
--_surface: blue;
/* keyword blue */
--_surface: #005a9c;
/* w3c blue */
/* --_surface: LinkText; */
/* --_surface: color(display-p3 0% 0% 100%); */
}
&.purple {
--_surface: rebeccapurple;
/* --_surface: oklch(67% 0.5 292); */
}
&.light {
--_surface: white;
--_text: black;
&.outlined {
box-shadow: inset 0 0 0 2cqw black;
}
}
&.dark {
--_surface: black;
--_text: white;
&.outlined {
box-shadow: inset 0 0 0 2cqw white;
}
}
}
&.ts {
--_surface: #5286C6;
--_text: white;
}
&.js {
--_surface: #EFDE72;
}
&.wa {
--_surface: #5F51DF;
--_text: white;
font-size: 55cqi;
mask: radial-gradient(circle at center top, #0000, 20%, #000 0);
letter-spacing: -0.125em;
padding-inline-end: calc(7.5cqi + 0.125em);
}
&.html {
--_surface: #dc6e3c;
--_text: white;
font-size: 40cqi;
}
>* {
grid-area: 1/1;
line-height: 1;
}
&:is(.js, .ts, .wa)>p {
margin-block-end: -.5ex;
margin-inline-end: 0;
}
>p {
/* 此行代码需要 Canary 或启用了该功能标志的 Safari TP */
/* text-box: trim-both cap alphabetic; */
/* 不支持 text-box: trim-both cap alphabetic 时的备用方案 */
/* @supports not (text-box: trim-both cap alphabetic) {
margin-block-end: -.5ex;
} */
}
}
}
@layer support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
background-color: light-dark(#fff, #111);
background-image:
radial-gradient(circle at center, #0000, light-dark(#fff, #111)),
radial-gradient(circle at 1px 1px,
light-dark(#0007, #fff4) 1px,
#0000 0);
background-size: 200px 200px, 40px 40px;
background-repeat: round, space;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
gap: 10vmin;
padding-block: 10vmin;
}
section {
display: grid;
gap: 1rem;
>header {
display: grid;
gap: .5ch;
margin-block-end: 3rem;
}
>div {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 15vw;
gap: 1rem;
&.sm {
grid-auto-columns: 24px;
}
@media (width < 480px) or (orientation: portrait) {
grid-auto-flow: row;
grid-auto-columns: 50vw;
}
}
}
p {
max-inline-size: 50ch;
text-wrap: pretty;
}
article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5vmin;
}
}
JS
格式化
let blueVariants = document.querySelectorAll('.blue')
blues.oninput = event => {
blueVariants.forEach(variant => {
variant.style.setProperty('--_surface', event.target.value)
})
}