CSS сниппеты

Перечеркнутая старая цена наискосок

.price-old {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}

Список в строку

ul {
  list-style: none;
  padding-left: 0;
}
li {
  display: inline;
}

Разделитель между пунктами меню

li:not(:first-child):before {
  content: " | ";
}

Фоновая картинка дизайна

Вставка макета дизайна /design.jpg фоном по центру страницы с полупрозрачностью.

CSS:

.design::after {
  background: url(/design.jpg) center top no-repeat;
  height: 1000px; /* высота картинки design.jpg */
  width: 100%;
  opacity: 0.5;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: -1;
  content: "";
}

HTML:

<div class="design">

  <!-- Здесь  ваш HTML код поверх макета дизайна -->

</div>

Градиент с отступом

background: linear-gradient(180deg, rgba(255,255,255,100) 300px, rgba(168, 224, 71, 1) 300px, rgba(168, 224, 71, 1) 100%);

где:

• 180deg — сверху вниз
• rgba(255,255,255,100) 300px — прозрачный белый фон до 300 пкс сверху;
• rgba(168, 224, 71, 1) 300px — непрозрачный цвет, начинается с 300 пкс сверху;
• rgba(168, 224, 71, 1) 100% — тот же цвет, заканчивается в конце блока.

animated-label — всплывающие подсказки

.animated-label {
  @apply relative mb-16 mx-10;
  input {
    @apply text-blue-dark text-[26px] border-b border-b-blue-dark w-full h-14 pl-1;
  }
  input:focus {
    @apply outline-none;
  }
  label {
    @apply absolute bottom-3.5 left-1 pointer-events-none;
    transition: transform .2s;
  }
  input:hover + label,
  input:focus + label,
  input[placeholder]:not(:placeholder-shown) + label {
    @apply text-lg text-[#9A9A9A];
    overflow: hidden;
    transform: translateY(-40px);
  }
}