Carmen Ansio
Design Systems at Stripe
.progress {
animation: progress both linear;
animation-timeline: scroll(root);
transform-origin: 0 50%;
}
@keyframes progress {
0% {
scale: 0 1;
}
100% {
scale: 1 1; }
}Propiedad animation-timeline
table.colortable {
& td {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child,
&:first-child + td {
border: 1px solid black;
}
}
& th {
text-align: center;
background: black;
color: white;
}
}Anidamiento nativo Nesting
table.colortable {
:is(td) {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child,
&:first-child + td {
border: 1px solid black;
}
} :is(th) {
text-align: center;
background: black;
color: white;
}
}Anidamiento nativo Nesting :is
.card:has(img) {
color: var(--purple);
}
.card__feature {
padding: var(--border-radius);
}
.card:has(.card__feature) {
box-shadow: var(--shadow-high);
}
.card:not(:has(p)) :not(:has(small)) {
aspect-ratio: 3 / 4;
}Pseudoclase :is
.video {
width: 100%
aspect-ratio: 16 / 9;
}Propiedad aspect-ratio
.video {
width: 100%;
padding-top: 56.25%;
}
.img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset(25% 20% 15% 5%);
object-fit: cover;
}Propiedad object-viewbox
/*
La propiedad overflow: hidden;,
posicionando y escalando el contenido
en su interior.
*/.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}Caso de uso masonry
img {
max-width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
mix-blend-mode: color-dodge;
}@font-face {
font-family: "JobClarendon";
src: url("job-clarendon.woff2") format("woff2 supports variations"),
url("job-clarendon.woff2") format("woff2-variations");
font-weight: 100 1000;
}Formato variable fonts
:root {
--font-fallback: "Helvetica Neue", sans-sans;
}
h1, h2 {
font-family: "JobClarendon", var(--font-fallback);
}
Back to the future CSS edition
By Carmen Ansio
