Пример:
Обратите внимание: в примере первые 3 карточки — с контурными SVG-иконками (нарисованы линиями), а последние 3 — с заливными (сплошные фигуры). Контурным иконкам, например из сборника Feather, нужно добавлять класс stroke — в примере HTML он уже проставлен и отвечает за анимацию обводки и правильную покраску. Заливным иконкам этот класс не нужен.
HTML:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="atuinCard"> <div class="atuinCard-top"> <div class="atuinCard-icon"> <svg class="stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> </div> <div class="atuinCard-title">Заголовок карточки</div> </div> <div class="atuinCard-content"> <p>Контент карточки</p> </div> </div> |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="atuinCard-container"> <div class="atuinCard-col"> <!-- Карточка --> </div> <div class="atuinCard-col"> <!-- Карточка --> </div> <!-- ... --> <!-- Еще колонки --> </div> |
CSS:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.atuinCard { overflow: hidden; position: relative; padding: 20px; border-radius: 20px; height: 100%; background-color: #F4F4F5; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 -8px 0 0 rgba(0, 0, 0, 0.05) inset, 0 4px 0 0 rgba(255, 255, 255, 0.6) inset; } .atuinCard-top { display: flex; align-items: center; margin-bottom: 20px; } .atuinCard-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 16px; background-color: #337AB7; box-shadow: 0 -3px 0 0 #2c6a9f inset, 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 12px 10px 0 rgba(0, 0, 0, 0.1), 0 22px 18px 0 rgba(0, 0, 0, 0.05), 0 42px 34px 0 rgba(0, 0, 0, 0.05), 0 100px 80px 0 rgba(0, 0, 0, 0.05); } .atuinCard-icon svg.stroke { width: 36px; height: 36px; stroke: #fff; stroke-width: 2; fill: none; stroke-dasharray: 400; stroke-width: 2; stroke-dashoffset: 0; } .atuinCard:hover .atuinCard-icon svg.stroke { animation: stroke 0.8s reverse; } @keyframes stroke { 100% { stroke-dashoffset: 400; } } .atuinCard-icon svg:not(.stroke) { width: 36px; height: 36px; fill: #fff; } .atuinCard-title { font-size: 16px; font-weight: 600; line-height: 1.3; margin-left: 20px; display: inline-block; text-decoration: none; background: linear-gradient(90deg, #337AB7 0%, #337AB7 50%, #333 50%, #333 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 0.6s ease, color 0.4s; text-transform: uppercase; position: relative; } .atuinCard:hover .atuinCard-title { background-position: 0 0; } .atuinCard-content p { line-height: 1.4; font-size: 16px; margin-bottom: 10px; } .atuinCard-content p:last-child { margin-bottom: 0; } @media (min-width: 992px) { .atuinCard { padding: 30px; } .atuinCard-title { font-size: 20px; } .atuinCard-content p { font-size: 18px; } } |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.atuinCard-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px -10px; } .atuinCard-container *, .atuinCard-container *::before, .atuinCard-container *::after { box-sizing: border-box; } .atuinCard-col { width: 100%; padding: 10px; } @media (min-width: 576px) { .atuinCard-col { width: 100%; } } @media (min-width: 768px) { .atuinCard-col { width: 50%; } } @media (min-width: 992px) { .atuinCard-col { width: 50%; } } @media (min-width: 1200px) { .atuinCard-col { width: 33.33%; } } @media (min-width: 1400px) { .atuinCard-col { width: 33.33%; } } |
Добавить комментарий: