>Zina: /* Градиент с отступом */

2022-10-24T15:36:06Z

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

Нова сторінка

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

<source lang="css">
.price-old {
background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
</source>

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

<source lang="css">
ul {
list-style: none;
padding-left: 0;
}
li {
display: inline;
}
</source>

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

<source lang="css">
li:not(:first-child):before {
content: " | ";
}
</source>

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

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

CSS:

<source lang="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: "";
}
</source>

HTML:

<source lang="html5">
<div class="design">



</div>
</source>

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

<source lang="scss">
background: linear-gradient(180deg, rgba(255,255,255,100) 300px, rgba(168, 224, 71, 1) 300px, rgba(168, 224, 71, 1) 100%);
</source>

где:

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

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

<source lang="css">
.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);
}
}
</source>

[[Категория: CSS]]

CSS сниппеты - Історія редагувань

>Zina: /* Градиент с отступом */