{"html":"

Preview

\n \n

10:19

The Backwards Brain Bicycle - Smarter Every Day 133\" by Destin Sandlin

SmarterEveryDay

519.7K Views

3 months ago

","css":"/* In this section you start by assigning a shape to the letter and an assigned size. */\n.card {\n --rounded: 20px;\n --size: 270px;\n width: var(--size);\n height: calc(var(--size) - 10px);\n border-radius: var(--rounded);\n background: #fff;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n/* With the before property assigns the gradient that will be used as background for the chart. */\n.card::before {\n --size: 100%;\n --blur: 20px;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n filter: blur(var(--blur));\n background-color: #faff99;\n background-image: radial-gradient(at 33% 82%, hsla(254,71%,69%,1) 0px, transparent 50%),\n radial-gradient(at 28% 4%, hsla(289,96%,63%,1) 0px, transparent 50%),\n radial-gradient(at 69% 49%, hsla(309,91%,71%,1) 0px, transparent 50%),\n radial-gradient(at 94% 14%, hsla(232,66%,62%,1) 0px, transparent 50%),\n radial-gradient(at 19% 93%, hsla(51,98%,74%,1) 0px, transparent 50%),\n radial-gradient(at 15% 80%, hsla(194,87%,63%,1) 0px, transparent 50%),\n radial-gradient(at 56% 52%, hsla(109,71%,61%,1) 0px, transparent 50%);\n}\n\n/* Cover the chart with a light white tone, this helps the gradient colors to be less aggressive. */\n.card::after {\n --size: 100%;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n background: rgba(255, 255, 255, 0.5);\n}\n\n/* \nIn this section you define where the video cover will be displayed.\nModify the background-image with the address of the cover to use. */\n.card__view {\n position: absolute;\n height: 55%;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n z-index: 1;\n background-image: linear-gradient(to right bottom, #fff, #e2e2e2);\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n/* When hovering over the element you can see the video preview. */\n/* Place in the HTML an \"iframe\" tag with the address of the youtube video to show as preview. \n The iframe tag must be a child of the div with the class \"card__view\".\n Also place a class with name \"preview__video\". */\n.card:hover .preview__video {\n opacity: 100;\n}\n\n.preview__video {\n transition: opacity 300ms;\n opacity: 0;\n}\n\n\n/* In this section you define the size and position of the section that will contain the video content. */\n.card__content {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 40%;\n left: 0;\n right: 0;\n bottom: 0;\n padding-left: 9px;\n padding-right: 9px;\n color: #000;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.channel__video__name {\n font-size: 0.8em;\n margin-bottom: 10px;\n max-height: 50%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: bold;\n color: #000;\n}\n\n.channel__data {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n/* 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. */\n.channel__img {\n --size-channel: 35px;\n --rounded: 50%;\n --duration: 300ms;\n min-width: var(--size-channel);\n min-height: var(--size-channel);\n border-radius: var(--rounded);\n transition: transform var(--duration);\n background-repeat: no-repeat;\n background-size: cover;\n background-color: #99cfff;\n background-image: radial-gradient(at 6% 14%, hsla(234,90%,72%,1) 0px, transparent 50%),\n radial-gradient(at 9% 73%, hsla(298,79%,64%,1) 0px, transparent 50%),\n radial-gradient(at 50% 38%, hsla(196,72%,75%,1) 0px, transparent 50%),\n radial-gradient(at 61% 82%, hsla(288,92%,79%,1) 0px, transparent 50%),\n radial-gradient(at 91% 67%, hsla(170,86%,66%,1) 0px, transparent 50%),\n radial-gradient(at 83% 29%, hsla(289,73%,63%,1) 0px, transparent 50%),\n radial-gradient(at 93% 34%, hsla(191,88%,75%,1) 0px, transparent 50%);\n}\n\n.channel__img:hover {\n transform: scale(1.08);\n}\n\n.channel__data__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n}\n\n.channel__subdata {\n display: flex;\n gap: 10px;\n}\n\n.channel__name {\n font-size: 0.8em;\n transition: color 400ms;\n}\n\n.channel__views, .channel__date {\n font-size: 0.6em;\n}\n\n.card__view__data {\n position: absolute;\n bottom: 0;\n width: 100%;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding: 8px;\n box-sizing: border-box;\n pointer-events: none;\n}\n\n.card__lenght, .card__play__icon, .card__view__preview {\n background: rgba(0, 0, 0, 0.5);\n padding: 5px;\n border-radius: 6px;\n font-size: 0.6em;\n font-weight: bold;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.card__play__icon {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 30px;\n}\n\n.card__view__preview {\n opacity: 0;\n transform: translateY(-10px);\n transition: opacity 900ms, transform 900ms;\n}\n\n.card:hover .card__view__preview {\n opacity: 100;\n transform: translateY(0px);\n}\n\n/* List of other colors you can use */\n.card:nth-child(2n)::before {\n background-color: #ffd399;\n background-image: radial-gradient(at 15% 65%, hsla(249,84%,60%,1) 0px, transparent 50%),\n radial-gradient(at 38% 24%, hsla(197,80%,66%,1) 0px, transparent 50%),\n radial-gradient(at 65% 93%, hsla(228,83%,60%,1) 0px, transparent 50%),\n radial-gradient(at 16% 58%, hsla(314,83%,72%,1) 0px, transparent 50%),\n radial-gradient(at 77% 57%, hsla(298,90%,78%,1) 0px, transparent 50%),\n radial-gradient(at 76% 95%, hsla(178,64%,76%,1) 0px, transparent 50%),\n radial-gradient(at 15% 61%, hsla(248,75%,64%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(3n)::before {\n background-color: #99b3ff;\n background-image: radial-gradient(at 93% 72%, hsla(293,71%,70%,1) 0px, transparent 50%),\n radial-gradient(at 28% 37%, hsla(252,81%,71%,1) 0px, transparent 50%),\n radial-gradient(at 25% 59%, hsla(158,67%,62%,1) 0px, transparent 50%),\n radial-gradient(at 48% 16%, hsla(197,69%,63%,1) 0px, transparent 50%),\n radial-gradient(at 70% 56%, hsla(171,69%,70%,1) 0px, transparent 50%),\n radial-gradient(at 7% 33%, hsla(65,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 89% 22%, hsla(286,64%,72%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(4n)::before {\n background-color: #e2ff99;\n background-image: radial-gradient(at 22% 80%, hsla(265,77%,67%,1) 0px, transparent 50%),\n radial-gradient(at 91% 77%, hsla(292,60%,78%,1) 0px, transparent 50%),\n radial-gradient(at 66% 7%, hsla(46,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 16% 32%, hsla(275,90%,75%,1) 0px, transparent 50%),\n radial-gradient(at 26% 23%, hsla(283,60%,69%,1) 0px, transparent 50%),\n radial-gradient(at 2% 64%, hsla(208,62%,62%,1) 0px, transparent 50%),\n radial-gradient(at 62% 77%, hsla(112,88%,75%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(5n)::before {\n background-color: #99d1ff;\n background-image: radial-gradient(at 21% 94%, hsla(270,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 56% 5%, hsla(252,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 67% 94%, hsla(194,81%,67%,1) 0px, transparent 50%),\n radial-gradient(at 15% 72%, hsla(304,97%,77%,1) 0px, transparent 50%),\n radial-gradient(at 63% 56%, hsla(38,98%,63%,1) 0px, transparent 50%),\n radial-gradient(at 41% 67%, hsla(321,61%,77%,1) 0px, transparent 50%),\n radial-gradient(at 68% 68%, hsla(263,67%,69%,1) 0px, transparent 50%);\n}"}

stale-mule-90

👁 实时预览

📝 源代码