Card by roroland
#e8e8e8
1.card { 2 --cardbg: 245, 245, 245; 3 --cardBase: 235, 16, 206; 4 --cardText: 100, 100, 100; 5 --cardTextBtn: 106, 16, 88; 6 --cardsquares: 156, 113, 227; 7 display: flex; 8 flex-flow: column nowrap; 9 place-items: center; 10 text-align: center; 11 border: 1px solid #ccc; 12 box-shadow: 0 0 3em rgba(var(--cardBase), .25), 13 inset 0 -.25em 1px rgba(var(--cardBase), .125); 14 border-radius: 4px; 15 background: rgba(var(--cardbg), 1); 16 position: relative; 17 width: 220px; 18 height: 310px; 19 perspective: 1000px; 20 z-index: 0; 21 transition: all 1s ease-out; 22} 23 24.card:hover { 25 filter: grayscale(0%); 26 scale: 1.025; 27 box-shadow: 0 0 5em rgba(var(--cardBase), .5); 28} 29 30.card::after, 31.card::before { 32 content: ''; 33 width: 200px; 34 height: 50%; 35 display: block; 36 background-color: rgba(var(--cardsquares), .5); 37 filter: blur(10px); 38 position: absolute; 39 transition: all 5s ease-out; 40 opacity: .1; 41 z-index: 0; 42} 43 44.card:hover::after, 45.card:hover::before { 46 opacity: .5; 47 rotate: 60deg; 48} 49 50.card:hover::after { 51 translate: 100% 0; 52} 53 54.card:hover::before { 55 translate: -100% 0; 56} 57 58.card .card-title { 59 color: rgba(var(--cardText), .75); 60 font-size: 1.1em; 61 font-weight: 600; 62 margin: .5em; 63 position: relative; 64 transition: all .3s ease-out; 65 z-index: 100; 66 text-shadow: 0px 0px 0px rgba(var(--cardText), .25); 67} 68 69.card:hover h3 { 70 color: rgba(var(--cardText), 1); 71 text-shadow: 0px 8px 5px rgba(var(--cardText), .35); 72} 73 74.card:hover span { 75 filter: grayscale(0%); 76} 77 78/* Inner card */ 79.card-info::after { 80 left: -6rem; 81 bottom: 0; 82} 83 84.card-info::before { 85 right: -6rem; 86 top: 1rem; 87} 88 89/* Avatar container */ 90.card-info span { 91 color: rgba(var(--cardBase), 1); 92 display: flex; 93 place-items: center; 94 text-align: center; 95 border-radius: 50%; 96 overflow: hidden; 97 background-color: rgba(var(--cardBase), .5); 98 height: 80px; 99 width: 50%; 100 box-shadow: inset 0px 2px 4px rgba(var(--cardBase), .95), 101 inset 0px 2px 40px rgba(var(--cardbg), .95); 102 position: relative; 103 transition: all .3s ease-out .1s; 104 filter: grayscale(75%); 105 z-index: 0; 106} 107 108.card-info span:hover .avatar { 109 scale: 1.5; 110} 111 112.avatar { 113 transition: all .3s ease-out; 114 position: relative; 115} 116 117/* Inner card container and UI */ 118.card-info { 119 --angle: 0deg; 120 display: flex; 121 flex-flow: column nowrap; 122 place-items: center; 123 padding: 1em; 124 margin: 0 .75em; 125 color: rgba(var(--cardText), 1); 126 background-color: rgba(250, 246, 246, 1); 127 transition: all .5s ease-out; 128 animation: animateBorder 10s linear infinite reverse; 129 border: .15em solid; 130 position: relative; 131 z-index: 10; 132 border-image: linear-gradient(var(--angle), rgba(var(--cardbg), 1), rgba(var(--cardBase), .5), rgba(var(--cardbg), 1)) 1; 133} 134 135.card-info p { 136 color: rgba(var(--cardText), 1); 137 line-height: 1.25em; 138 display: -webkit-box; 139 -webkit-box-orient: vertical; 140 overflow: hidden; 141 text-overflow: ellipsis; 142 -webkit-line-clamp: 3; 143 font-size: 1em; 144 margin: 1em 0; 145 transition: all .3s ease-out .3s; 146} 147 148.card-info .btn { 149 display: block; 150 padding: 8px 16px; 151 background-color: rgba(var(--cardBase), .35); 152 color: rgba(var(--cardTextBtn), .75); 153 text-decoration: none; 154 border-radius: 4px; 155 font-size: .85em; 156 transition: all 0.3s ease-in-out; 157} 158 159.card-info .btn:hover { 160 cursor: pointer; 161 background-color: rgba(var(--cardsquares), .35); 162} 163 164.card-info .btn:active { 165 box-shadow: inset 0px -2px 3px rgba(var(--cardBase), .25); 166} 167 168/* Card links container */ 169.card-links { 170 transition: all .3s linear; 171 opacity: 0; 172 display: flex; 173 flex-flow: row wrap; 174 gap: 1em; 175 position: relative; 176 top: -2rem; 177 list-style: none; 178 color: rgba(var(--cardText), 1); 179 font-size: .75em 180} 181 182.card-links a { 183 transition: color .3s ease-out; 184} 185 186.card-links a:hover { 187 color: rgba(var(--cardBase), .75); 188} 189 190/* Card chckbox active state */ 191.card input[type="checkbox"] { 192 visibility: hidden; 193} 194 195.card:hover:has(#toggle:checked) .card-title { 196 text-shadow: 0px 2px 5px rgba(var(--cardText), .35); 197} 198 199.card:has(#toggle:checked) { 200 border-radius: 10px; 201 height: 295px; 202} 203 204.card:has(#toggle:checked) .card-info > *:not(.btn):not(span) { 205 opacity: 0; 206} 207 208.card:has(#toggle:checked) .card-info { 209 translate: 0 -20%; 210 border-width: 1px; 211 border: none; 212 box-shadow: inset 0 0 5px rgba(var(--cardBase), .5), 213 inset 0px 0px 2px rgba(var(--cardText), .25), 214 inset 0px 30px 40px rgba(var(--cardBase), .25); 215 border-radius: 10px; 216} 217 218.card:has(#toggle:checked) .card-info span { 219 translate: 0 75%; 220} 221 222.card:has(#toggle:checked) .card-info p { 223 transition: all .1s ease-out; 224} 225 226.card:has(#toggle:checked) .card-links { 227 opacity: 1; 228 top: -2rem; 229} 230 231.card #toggle { 232 visibility: hidden; 233} 234 235@keyframes animateBorder { 236 to { 237 --angle: 360deg; 238 } 239} 240 241@property --angle { 242 syntax: '<angle>'; 243 initial-value: 0deg; 244 inherits: false; 245}
1.2K views
1.2K views
MIT License