Пример:
HTML:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="atuinCard"> <div class="atuinCard-bg"> <div class="atuinCard-photo"><img src="photo.jpg" alt="photo"></div> <div class="atuinCard-content"> <div class="atuinCard-title">Заголовок карточки</div> <div class="atuinCard-text"> <p>Контент карточки</p> <p>Контент карточки</p> </div> </div> </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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/* Сетка */ .atuinCard-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px -15px; } .atuinCard-container *, .atuinCard-container *::before, .atuinCard-container *::after { box-sizing: border-box; } .atuinCard-col { width: 100%; padding: 15px; } @media (min-width: 576px) { .atuinCard-col { width: 50%; } } @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%; } } @media (min-width: 1535px){ .atuinCard-col { width: 25%; } } /* Карточка */ .atuinCard { height: 100%; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25)); transition: filter 0.3s; font-size: 14px; } .atuinCard:hover { filter:drop-shadow(0 0 6px rgba(0, 0, 0, 0.45)); } .atuinCard-bg { height: 100%; border-radius: 6px; overflow: hidden; padding-left: 30px; background: repeating-linear-gradient(#0000 0 calc(1.4em - 1px), #66afe1 0 1.4em) right bottom /100% 100%, linear-gradient(red 0 0) 30px 0/2px 100% #fff; background-repeat: no-repeat; -webkit-mask:radial-gradient(circle .9em at 2px 50%,#0000 98%,#000)0 0/100% 2.8em; } .atuinCard-photo { height: calc(6 * 1.4em); margin: 1.4em 1.4em 0; position: relative; } .atuinCard-photo:before, .atuinCard-photo:after { content: ""; position: absolute; width: 20px; left: 60%; top: -20px; height: 45px; background: #e6e6e6b8; transform: rotate(45deg); } .atuinCard-photo:after { transform: rotate(-45deg); top: auto; bottom: -20px; left: 40%; } .atuinCard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .atuinCard-content { padding: 1.37em 1.4em 0; } .atuinCard-title { font-size: 1em; line-height: 1.4em; font-weight: bold; color: #337AB7; margin: 0 0 1.4em; } .atuinCard-text p { font-size: 1em; margin: 0 0 1.4em; line-height: 1.4em; } @media (min-width: 768px) { .atuinCard { font-size: 16px; } } @media (min-width: 992px) { .atuinCard { font-size: 18px; } } |
Найдено на codepen.io у пользователя Temani Afif
Смотрите также:
Добавить комментарий:
Ваш комментарий отправлен!
Хотя и получилось как обычно, зато. Только написал и сразу решение нашел...
Уж не знаю, понятно контент добывать труд, но для адаптации конечно сложноваты карты аля тетрадки. Шрифт мучаюсь не могу увеличить чтобы не разъезжалось все.