Random CSS snippets

css-snippets.md

Subtle box shadows

These work best with light (~#fff) elements (eg a code snippet or ‘card’ component) on light backgrounds.

Standard

box-shadow: 0 1px 15px rgba(27, 31, 35, .15);

Bigger

box-shadow: 0 0.6px 3px -42px rgba(0, 0, 0, 0.105),
	0 1.8px 8.4px -42px rgba(0, 0, 0, 0.15),
	0 4.2px 20.2px -42px rgba(0, 0, 0, 0.195),
	0 14px 67px -42px rgba(0, 0, 0, 0.3);

Alternative

box-shadow: 0 0.6px 3px -42px rgba(0, 0, 0, 0.105),
	0 1.8px 8.4px -42px rgba(0, 0, 0, 0.15),
	0 4.2px 20.2px -42px rgba(0, 0, 0, 0.195),
	0 14px 67px -42px rgba(0, 0, 0, 0.3);

Control opacity of background image behind foreground content

.img {
    background: #fff url(pictur.jpg) center center;
    opacity: 0.23;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.foreground-content {
    position: relative;
    z-index: 2;
}

HTML:

<div>
    <div class="img"></div>
    <div class="foreground-content">In the first, it is statute and ordanit that the fredomes of halie kirk and liberteis thairof, with all immuniteis and privilegeis and of all spirituall persounis, be observit and keipit in honour and worschip for the tyme of our soverane lord that now is, lyke as it hes bene in tymes of his maist nobill progenitouris of gude mynde of befoir.</div>
</div>

Rainbow background gradient

Credit: Product Hunt.

background: linear-gradient(90deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%)

Add a horizontal animation

.bg-rainbow {
  background: linear-gradient(90deg, #f9ddf1 0%, #e5e1ff 14%, #daedff 28%, #e2f4e3 42%, #ebf5d8 56%, #faf2da 70%, #fbe5d8 84%, #f9ddf1 100%);

  &.animate {
    background-size: 200% 100%;
    animation: moveGradient 8s linear infinite;
  }
}

@keyframes moveGradient {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

Adjust space above headings which are anchor linked

Source: GitLab, eg this anchor link. Useful where you have a sticky navbar.

h2[id]::before, h3[id]::before, h4[id]::before, h5[id]::before, h6[id]::before {
  display: block;
  content: ' ';
  margin-top: -4.688rem;
  height: 4.688rem;
  visibility: hidden;
  position: relative;
  z-index: 0;
}

CSS pulse animation

.pulse {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}