- elements = ["html","base","head","link","meta","script","style","title","body","address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","main","nav","section","blockquote","cite","dd","dt","dl","div","figcaption","figure","hr","li","ol","ul","menu","p","pre","a","abbr","b","bdi","bdo","br","code","data","dfn","em","i","kbd","mark","q","rp","ruby","rt","s","samp","small","span","strong","sub","sup","time","u","var","wbr","area","audio","img","map","track","video","embed","iframe","object","picture","source","portal","svg","canvas","noscript","del","ins","caption","col","colgroup","table","tbody","tr","td","tfoot","th","thead","button","datalist","option","fieldset","label","form","input","legend","meter","optgroup","select","output","progress","textarea","details","summary","dialog","slot","template","acronym","applet","bgsound","big","blink","center","dir","font","frame","frameset","image","keygen","marquee","menuitem","nobr","noembed","noframes","param","plaintext","rb","rtc","spacer","strike","tt","xmp"]
.cards
each element in elements
.card= `<${element}>`
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.light.min.css" layer(demo.support);
@keyframes slide-fade-in {
from {
opacity: 0;
box-shadow: none;
transform: scale(.8) translateY(15vh);
}
}
@layer demo {
.card {
@media (prefers-reduced-motion: no-preference) {
view-timeline-name: --item-timeline;
animation: slide-fade-in both;
animation-timeline: --item-timeline;
animation-range: contain 0% contain 50%;
}
}
}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
background: var(--surface-3);
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
padding-block: 30dvh;
}
.cards {
display: grid;
gap: var(--size-3);
grid-auto-flow: dense;
grid-template-columns: repeat(3, var(--size-content-1));
& > .card {
background: linear-gradient(#fff, #fff), var(--gradient-10);
background-origin: border-box;
background-clip: content-box, border-box;
border-radius: var(--radius-3);
box-shadow: var(--shadow-3);
line-height: 3;
padding-top: var(--size-1);
font-size: var(--font-size-4);
font-weight: var(--font-weight-6);
font-family: var(--font-mono);
display: grid;
place-content: center;
&:nth-of-type(4n) {
grid-row: span 2;
background-image: linear-gradient(#fff, #fff), var(--gradient-3);
}
&:nth-of-type(7n) {
grid-row: span 3;
background-image: linear-gradient(#fff, #fff), var(--gradient-5);
}
&:nth-of-type(5n) {
grid-column: span 2;
background-image: linear-gradient(#fff, #fff), var(--gradient-18);
}
}
}
}