Штрихпунктирный фон

?> Основные понятия: градиент, линейный градиент, радиальный градиент, повторяющийся линейный градиент

Прогресс-бар

Работаем допоздна сегодня.

<script v-pre type="text/x-template" id="stripes-background-linear"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .progress-outer { width: 60%; height: 12px; border-radius: 8px; overflow: hidden; position: relative; } .progress-enter { height: inherit; background: rgba(180, 160, 120, .2); } .progress-bg { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0); background-size: 16px 16px; animation: panoramic 20s linear infinite; } @keyframes panoramic{ to { background-position: 200% 0; } } </style> <script> </script> </script>

Нечёткие карточки

**Ответ:** На самом деле вогнутую дугу сверху карты можно реализовать с помощью радиального градиента `radial-gradient` --> **Ответ:** На самом деле вогнутую дугу сверху карты можно реализовать с помощью радиального градиента `radial-gradient`. -->> Сегодняшняя работа выходит за рамки обычного рабочего времени.

<script v-pre type="text/x-template" id="stripes-background-radial"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .coupon-card { width: 200px; height: 120px; background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px); } </style> <script> </script> </script>

В этом примере радиальный градиент используется для создания эффекта тени при наведении курсора (hover). Если у вас есть лучший способ сделать это, пожалуйста, оставьте свой комментарий.

---

Рекомендации

Автор книги "CSS Revealed" Lea Verou использует CSS3 градиенты для создания коллекции узоров Patterns Gallery и её SVG версию SVG Patterns Gallery. Если вас интересует эта тема, рекомендуется изучить принципы работы автора.

Patterns Gallery

Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>