Exercise 1: Backgrounds and Borders

I experimented with these techniques from Chapter 2

Translucent borders

.translucent-borders {
padding: 1rem;
border: 1rem solid rgba(221, 22, 58, .1);
background-clip: padding-box;
}

Marching ants border

.marching-ants {
border: 2px solid transparent;
background: linear-gradient(rgba(76, 83, 96, 1), rgba(76, 83, 96, 1)) padding-box,
repeating-linear-gradient(-45deg, rgba(76, 83, 96, 1) 0, rgba(76, 83, 96, 1) 25%, transparent 0, transparent 50%) 0 / 1em 1em;
animation: ants 12s linear infinite;
}

Image border

.image-border { border: 1em solid transparent; background: linear-gradient(rgba(76, 83, 96, 1), rgba(76, 83, 96, 1)) padding-box, url('/images/37.png') border-box 0 / cover; }