Пример:
HTML:
Карточка:
|
1 2 3 4 5 6 7 8 9 |
<div class="atuinCard"> <div class="atuinCard-top"> <div class="atuinCard-title">Заголовок карточки</div> <div class="atuinCard-icon">📶</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 |
.atuinCard { height: 100%; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; backdrop-filter: blur(2px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; will-change: transform; } .atuinCard:hover { box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.35); transform: scale(1.05); background: #337AB7; } .atuinCard-top { display: flex; justify-content: space-between; min-height: 52px; margin-bottom: 10px; } .atuinCard-icon { font-size: 42px; flex: 0 0 52px; width: 52px; line-height: 1; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } .atuinCard:hover .atuinCard-icon { transform: translate(-50%, -50%) scale(6) rotate(360deg); width: auto; opacity: 0.15; position: absolute; top: 50%; left: 50%; z-index: -1; } .atuinCard-title { font-size: 18px; line-height: 1.2; color: #337AB7; font-weight: bold; text-transform: uppercase; will-change: transform; padding-right: 8px; } .atuinCard-content p { font-size: 15px; line-height: 1.2; margin-bottom: 10px; will-change: transform; } .atuinCard-content p:last-child { margin-bottom: 0; } .atuinCard:hover .atuinCard-title, .atuinCard:hover .atuinCard-content { color: #fff; } .atuinCard:hover .atuinCard-title { padding-right: 50px; } @media (min-width: 768px) { .atuinCard-content p { font-size: 18px; } .atuinCard-title { font-size: 20px; } } |
Сетка:
|
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 |
.atuinCard-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px -10px; counter-reset: count; } .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: 25%; } } |
Добавить комментарий: