18 CSS Divider Collections 09 / 18
Fashion Dividers
Three editorial runway breaks — a slamming black look-number bar, a letter-spaced caption between rules, and a burn-in collection tag.
The code
<div class="div-fashion-surface">
<p class="div-fashion-text">The collection arrives in silence. No music, no commentary — just footsteps on polished concrete and the soft percussion of fabric.</p>
<div class="div-fashion-v1" role="separator"><span>— 14 —</span></div>
<p class="div-fashion-text">She believes silhouette is the only truth a garment can tell. Everything else — colour, texture — is opinion.</p>
<div class="div-fashion-v2" role="separator">
<span class="div-fashion-u"></span>
<span class="div-fashion-cap">FEATURE</span>
<span class="div-fashion-d"></span>
</div>
<p class="div-fashion-text">The atelier occupies four floors of a building that has stood on this street since 1891. The lift still requires an operator.</p>
<div class="div-fashion-v3" role="separator">COLLECTION · AUTUMN · 2025</div>
<p class="div-fashion-text">Fit is the argument. A jacket that fits correctly doesn't announce itself — it becomes invisible.</p>
</div> <div class="div-fashion-surface">
<p class="div-fashion-text">The collection arrives in silence. No music, no commentary — just footsteps on polished concrete and the soft percussion of fabric.</p>
<div class="div-fashion-v1" role="separator"><span>— 14 —</span></div>
<p class="div-fashion-text">She believes silhouette is the only truth a garment can tell. Everything else — colour, texture — is opinion.</p>
<div class="div-fashion-v2" role="separator">
<span class="div-fashion-u"></span>
<span class="div-fashion-cap">FEATURE</span>
<span class="div-fashion-d"></span>
</div>
<p class="div-fashion-text">The atelier occupies four floors of a building that has stood on this street since 1891. The lift still requires an operator.</p>
<div class="div-fashion-v3" role="separator">COLLECTION · AUTUMN · 2025</div>
<p class="div-fashion-text">Fit is the argument. A jacket that fits correctly doesn't announce itself — it becomes invisible.</p>
</div>@keyframes div-fa-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-fa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fa-spread { from { letter-spacing: -0.2em; opacity: 0; } to { letter-spacing: 0.35em; opacity: 1; } }
@keyframes div-fa-burn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.div-fashion-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-fashion-text {
font-family: system-ui, -apple-system, Arial, sans-serif;
font-size: 14px;
line-height: 1.72;
letter-spacing: 0.01em;
color: #000000;
margin: 0;
}
/* v1 — slamming look-number bar */
.div-fashion-v1 {
margin: 32px 0;
overflow: hidden;
}
.div-fashion-v1 span {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
padding-right: 16px;
background: #000000;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.3em;
color: #ffffff;
animation: div-fa-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
/* v2 — letter-spaced caption between rules */
.div-fashion-v2 { margin: 32px 0; }
.div-fashion-u {
display: block;
height: 2px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) both;
}
.div-fashion-d {
display: block;
height: 1px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) 0.35s both;
}
.div-fashion-cap {
display: flex;
justify-content: center;
margin: 7px 0;
overflow: hidden;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.35em;
color: #000000;
animation: div-fa-spread 0.6s cubic-bezier(.16,1,.3,1) 0.18s both;
}
/* v3 — burn-in collection tag */
.div-fashion-v3 {
margin: 32px 0;
padding: 7px 0;
border-top: 1.5px solid #000000;
border-bottom: 1.5px solid #000000;
font-family: system-ui, sans-serif;
font-size: 8.5px;
letter-spacing: 0.38em;
text-align: center;
color: #777777;
animation: div-fa-burn 0.55s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fashion-v1 span, .div-fashion-u, .div-fashion-d,
.div-fashion-cap, .div-fashion-v3 { animation: none; }
} @keyframes div-fa-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-fa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fa-spread { from { letter-spacing: -0.2em; opacity: 0; } to { letter-spacing: 0.35em; opacity: 1; } }
@keyframes div-fa-burn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.div-fashion-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-fashion-text {
font-family: system-ui, -apple-system, Arial, sans-serif;
font-size: 14px;
line-height: 1.72;
letter-spacing: 0.01em;
color: #000000;
margin: 0;
}
/* v1 — slamming look-number bar */
.div-fashion-v1 {
margin: 32px 0;
overflow: hidden;
}
.div-fashion-v1 span {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
padding-right: 16px;
background: #000000;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.3em;
color: #ffffff;
animation: div-fa-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
/* v2 — letter-spaced caption between rules */
.div-fashion-v2 { margin: 32px 0; }
.div-fashion-u {
display: block;
height: 2px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) both;
}
.div-fashion-d {
display: block;
height: 1px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) 0.35s both;
}
.div-fashion-cap {
display: flex;
justify-content: center;
margin: 7px 0;
overflow: hidden;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.35em;
color: #000000;
animation: div-fa-spread 0.6s cubic-bezier(.16,1,.3,1) 0.18s both;
}
/* v3 — burn-in collection tag */
.div-fashion-v3 {
margin: 32px 0;
padding: 7px 0;
border-top: 1.5px solid #000000;
border-bottom: 1.5px solid #000000;
font-family: system-ui, sans-serif;
font-size: 8.5px;
letter-spacing: 0.38em;
text-align: center;
color: #777777;
animation: div-fa-burn 0.55s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fashion-v1 span, .div-fashion-u, .div-fashion-d,
.div-fashion-cap, .div-fashion-v3 { animation: none; }
}