This post is saved as a draft.
#e8e8e8
1/* In this section you start by assigning a shape to the letter and an assigned size. */ 2.card { 3 --rounded: 20px; 4 --size: 270px; 5 width: var(--size); 6 height: calc(var(--size) - 10px); 7 border-radius: var(--rounded); 8 background: #fff; 9 position: relative; 10 overflow: hidden; 11 cursor: pointer; 12} 13 14/* With the before property assigns the gradient that will be used as background for the chart. */ 15.card::before { 16 --size: 100%; 17 --blur: 20px; 18 content: ""; 19 position: absolute; 20 width: var(--size); 21 height: var(--size); 22 filter: blur(var(--blur)); 23 background-color: #faff99; 24 background-image: radial-gradient(at 33% 82%, hsla(254,71%,69%,1) 0px, transparent 50%), 25 radial-gradient(at 28% 4%, hsla(289,96%,63%,1) 0px, transparent 50%), 26 radial-gradient(at 69% 49%, hsla(309,91%,71%,1) 0px, transparent 50%), 27 radial-gradient(at 94% 14%, hsla(232,66%,62%,1) 0px, transparent 50%), 28 radial-gradient(at 19% 93%, hsla(51,98%,74%,1) 0px, transparent 50%), 29 radial-gradient(at 15% 80%, hsla(194,87%,63%,1) 0px, transparent 50%), 30 radial-gradient(at 56% 52%, hsla(109,71%,61%,1) 0px, transparent 50%); 31} 32 33/* Cover the chart with a light white tone, this helps the gradient colors to be less aggressive. */ 34.card::after { 35 --size: 100%; 36 content: ""; 37 position: absolute; 38 width: var(--size); 39 height: var(--size); 40 background: rgba(255, 255, 255, 0.5); 41} 42 43/* 44In this section you define where the video cover will be displayed. 45Modify the background-image with the address of the cover to use. */ 46.card__view { 47 position: absolute; 48 height: 55%; 49 left: 0; 50 top: 0; 51 right: 0; 52 margin: auto; 53 z-index: 1; 54 background-image: linear-gradient(to right bottom, #fff, #e2e2e2); 55 background-repeat: no-repeat; 56 background-size: cover; 57} 58 59/* When hovering over the element you can see the video preview. */ 60/* Place in the HTML an "iframe" tag with the address of the youtube video to show as preview. 61 The iframe tag must be a child of the div with the class "card__view". 62 Also place a class with name "preview__video". */ 63.card:hover .preview__video { 64 opacity: 100; 65} 66 67.preview__video { 68 transition: opacity 300ms; 69 opacity: 0; 70} 71 72 73/* In this section you define the size and position of the section that will contain the video content. */ 74.card__content { 75 position: absolute; 76 z-index: 2; 77 width: 100%; 78 height: 40%; 79 left: 0; 80 right: 0; 81 bottom: 0; 82 padding-left: 9px; 83 padding-right: 9px; 84 color: #000; 85 display: flex; 86 flex-direction: column; 87 justify-content: space-between; 88} 89 90.channel__video__name { 91 font-size: 0.8em; 92 margin-bottom: 10px; 93 max-height: 50%; 94 overflow: hidden; 95 text-overflow: ellipsis; 96 font-weight: bold; 97 color: #000; 98} 99 100.channel__data { 101 display: flex; 102 align-items: center; 103 width: 100%; 104 gap: 10px; 105 margin-bottom: 8px; 106} 107 108/* In this section you assign the image of the channel that owns the video, modify the parameter "background-image" by the address of the channel cover. */ 109.channel__img { 110 --size-channel: 35px; 111 --rounded: 50%; 112 --duration: 300ms; 113 min-width: var(--size-channel); 114 min-height: var(--size-channel); 115 border-radius: var(--rounded); 116 transition: transform var(--duration); 117 background-repeat: no-repeat; 118 background-size: cover; 119 background-color: #99cfff; 120 background-image: radial-gradient(at 6% 14%, hsla(234,90%,72%,1) 0px, transparent 50%), 121 radial-gradient(at 9% 73%, hsla(298,79%,64%,1) 0px, transparent 50%), 122 radial-gradient(at 50% 38%, hsla(196,72%,75%,1) 0px, transparent 50%), 123 radial-gradient(at 61% 82%, hsla(288,92%,79%,1) 0px, transparent 50%), 124 radial-gradient(at 91% 67%, hsla(170,86%,66%,1) 0px, transparent 50%), 125 radial-gradient(at 83% 29%, hsla(289,73%,63%,1) 0px, transparent 50%), 126 radial-gradient(at 93% 34%, hsla(191,88%,75%,1) 0px, transparent 50%); 127} 128 129.channel__img:hover { 130 transform: scale(1.08); 131} 132 133.channel__data__text { 134 display: flex; 135 flex-direction: column; 136 gap: 5px; 137 width: 100%; 138} 139 140.channel__subdata { 141 display: flex; 142 gap: 10px; 143} 144 145.channel__name { 146 font-size: 0.8em; 147 transition: color 400ms; 148} 149 150.channel__views, .channel__date { 151 font-size: 0.6em; 152} 153 154.card__view__data { 155 position: absolute; 156 bottom: 0; 157 width: 100%; 158 display: flex; 159 justify-content: flex-end; 160 gap: 10px; 161 padding: 8px; 162 box-sizing: border-box; 163 pointer-events: none; 164} 165 166.card__lenght, .card__play__icon, .card__view__preview { 167 background: rgba(0, 0, 0, 0.5); 168 padding: 5px; 169 border-radius: 6px; 170 font-size: 0.6em; 171 font-weight: bold; 172 color: rgba(255, 255, 255, 0.7); 173} 174 175.card__play__icon { 176 display: flex; 177 justify-content: center; 178 align-items: center; 179 min-width: 30px; 180} 181 182.card__view__preview { 183 opacity: 0; 184 transform: translateY(-10px); 185 transition: opacity 900ms, transform 900ms; 186} 187 188.card:hover .card__view__preview { 189 opacity: 100; 190 transform: translateY(0px); 191} 192 193/* List of other colors you can use */ 194.card:nth-child(2n)::before { 195 background-color: #ffd399; 196 background-image: radial-gradient(at 15% 65%, hsla(249,84%,60%,1) 0px, transparent 50%), 197 radial-gradient(at 38% 24%, hsla(197,80%,66%,1) 0px, transparent 50%), 198 radial-gradient(at 65% 93%, hsla(228,83%,60%,1) 0px, transparent 50%), 199 radial-gradient(at 16% 58%, hsla(314,83%,72%,1) 0px, transparent 50%), 200 radial-gradient(at 77% 57%, hsla(298,90%,78%,1) 0px, transparent 50%), 201 radial-gradient(at 76% 95%, hsla(178,64%,76%,1) 0px, transparent 50%), 202 radial-gradient(at 15% 61%, hsla(248,75%,64%,1) 0px, transparent 50%); 203} 204 205.card:nth-child(3n)::before { 206 background-color: #99b3ff; 207 background-image: radial-gradient(at 93% 72%, hsla(293,71%,70%,1) 0px, transparent 50%), 208 radial-gradient(at 28% 37%, hsla(252,81%,71%,1) 0px, transparent 50%), 209 radial-gradient(at 25% 59%, hsla(158,67%,62%,1) 0px, transparent 50%), 210 radial-gradient(at 48% 16%, hsla(197,69%,63%,1) 0px, transparent 50%), 211 radial-gradient(at 70% 56%, hsla(171,69%,70%,1) 0px, transparent 50%), 212 radial-gradient(at 7% 33%, hsla(65,65%,79%,1) 0px, transparent 50%), 213 radial-gradient(at 89% 22%, hsla(286,64%,72%,1) 0px, transparent 50%); 214} 215 216.card:nth-child(4n)::before { 217 background-color: #e2ff99; 218 background-image: radial-gradient(at 22% 80%, hsla(265,77%,67%,1) 0px, transparent 50%), 219 radial-gradient(at 91% 77%, hsla(292,60%,78%,1) 0px, transparent 50%), 220 radial-gradient(at 66% 7%, hsla(46,95%,76%,1) 0px, transparent 50%), 221 radial-gradient(at 16% 32%, hsla(275,90%,75%,1) 0px, transparent 50%), 222 radial-gradient(at 26% 23%, hsla(283,60%,69%,1) 0px, transparent 50%), 223 radial-gradient(at 2% 64%, hsla(208,62%,62%,1) 0px, transparent 50%), 224 radial-gradient(at 62% 77%, hsla(112,88%,75%,1) 0px, transparent 50%); 225} 226 227.card:nth-child(5n)::before { 228 background-color: #99d1ff; 229 background-image: radial-gradient(at 21% 94%, hsla(270,95%,76%,1) 0px, transparent 50%), 230 radial-gradient(at 56% 5%, hsla(252,65%,79%,1) 0px, transparent 50%), 231 radial-gradient(at 67% 94%, hsla(194,81%,67%,1) 0px, transparent 50%), 232 radial-gradient(at 15% 72%, hsla(304,97%,77%,1) 0px, transparent 50%), 233 radial-gradient(at 63% 56%, hsla(38,98%,63%,1) 0px, transparent 50%), 234 radial-gradient(at 41% 67%, hsla(321,61%,77%,1) 0px, transparent 50%), 235 radial-gradient(at 68% 68%, hsla(263,67%,69%,1) 0px, transparent 50%); 236}
Variation of acard
Variation of acard