站立式卡片UI设计，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<h1>站立式卡片</h1>
<ol>
    <li style="--accent-color:#0D6EFD">
        <div class="icon"><i class="fa-brands fa-codepen"></i></div>
        <div class="title">Bi.cool</div>
        <div class="descr">一个能够在线编辑/实时预览你的HTML/CSS/JS代码的网站</div>
    </li>
    <li style="--accent-color:#6710F5">
        <div class="icon"><i class="fa-brands fa-html5"></i></div>
        <div class="title">HTML 5</div>
        <div class="descr">超文本标记语言（HTML）的第五个也是最新的重要版本</div>
    </li>
    <li style="--accent-color:#6F42C1">
        <div class="icon"><i class="fa-brands fa-css3"></i></div>
        <div class="title">CSS 3</div>
        <div class="descr">CSS3是层叠样式表技术的升级版，它通过新增的特性如动画、变换、过渡以及更强大的选择器和布局模型。</div>
    </li>
    <li style="--accent-color:#D63384">
        <div class="icon"><i class="fa-brands fa-js"></i></div>
        <div class="title">Javascript</div>
        <div class="descr">JavaScript 是一种广泛用于网页开发的轻量级、解释型或即时编译型的编程语言</div>
    </li>
    <li style="--accent-color:#DC3545">
        <div class="icon"><i class="fa-brands fa-github"></i></div>
        <div class="title">Github</div>
        <div class="descr">GitHub是一个广受欢迎的开源代码托管平台，它让开发者能够轻松共享、协作和版本控制他们的项目</div>
    </li>
</ol>

</body>

CSS

格式化

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --color: rgba(30, 30, 30);
  --bgColor: rgb(215, 215, 215);
  min-height: 100vh;

  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 0;

  font-family: "Oxygen", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}

h1 {
  text-align: center;
}

ol {
  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;
  gap: 2rem;

  list-style: none;
  counter-reset: cardnr;
  justify-content: center;
}

li {
  --frontColor: white;
  --width: 10em;
  --inlineP: 0.5rem;
  --borderR: 4rem;
  --arrowW: 2rem;
  --arrowH: 1.5rem;

  counter-increment: cardnr;
  width: calc(var(--width) - var(--inlineP) * 2);
  display: grid;
  grid-template:
    "icon" var(--borderR)
    "title"
    "descr" 1fr;
  margin-inline: var(--inlineP);
  margin-bottom: calc(var(--borderR));
  position: relative;
}
li .icon,
li .title,
li .descr {
  background: var(--frontColor);
  padding-inline: 1rem;
  padding-bottom: 1rem;
}
li .icon,
li .title {
  color: var(--accent-color);
  text-align: center;
  padding-bottom: 0.5rem;
}

li .title,
li .descr {
  filter: drop-shadow(0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25));
}
li .icon {
  grid-area: icon;
  font-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--borderR) 0 0 0;
  position: relative;
}

li .title {
  grid-area: title;
  font-size: 1.1rem;
  font-weight: bold;
}

li .descr {
  grid-area: descr;
  font-size: 0.85rem;
  text-align: center;
}
li .descr::before {
  content: "";
  width: var(--arrowW);
  height: var(--arrowH);
  position: absolute;
  right: 1.5rem;
  top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

li::after {
  content: counter(cardnr, decimal-leading-zero);
  position: absolute;
  z-index: -1;

  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);
  top: var(--borderR);
  bottom: calc(var(--borderR) * -1);

  display: flex;
  align-items: flex-end;
  background: var(--accent-color);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.25),
    transparent 25% 75%,
    rgba(0, 0, 0, 0.25)
  );
  border-radius: 0 0 var(--borderR) 0;

  --pad: 1rem;
  padding: var(--pad);
  font-size: calc(var(--borderR) - var(--pad) * 2);
  color: white;
}
li::before {
  content: "";
  position: absolute;
  height: var(--borderR);
  top: calc(100% + var(--borderR) - 2px);
  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);
  border-radius: 0 var(--borderR) 0 0;

  background-image: linear-gradient(var(--accent-color), transparent 60%);
  opacity: 0.5;
  filter: blur(2px);
}

.credits {
  margin-top: 2rem;
  text-align: right;
}
.credits a {
  color: var(--color);
}

格式化

预览

控制台