Card by tofe812
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 display: flex; 3 flex-direction: column; 4 padding: 20px; 5 border: 1px solid a2a2a2; 6 color: black; 7 border-radius: 20px; 8 background-color: rgba(255, 255, 255, 0.5); 9 backdrop-filter: blur(10px); 10 box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75), 11 0px 0px 10px 0px rgba(255, 255, 255, 0.75), 12 0px 0px 20px 0px rgba(156, 156, 156, 0.75); 13 transform: rotateX(-25deg) rotateY(45deg) rotateZ(0deg) translateX(-40px) translateY(-40px); 14 transition: all 0.3s ease-in-out; 15 -webkit-user-select: none; 16 /* Safari */ 17 user-select: none; 18 /* Standard syntax */ 19} 20 21.card:hover { 22 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75), 23 0px 0px 20px 0px rgba(255, 255, 255, 0.75), 24 0px 0px 50px 0px rgba(156, 156, 156, 0.75); 25 transform: scale(1.1); 26} 27 28.heading { 29 font-size: 18px; 30 margin-bottom: 10px; 31 text-align: center; 32} 33 34.heading span { 35 margin: 0; 36 font-size: 38px; 37 font-weight: bold; 38 color: transparent; 39 text-transform: uppercase; 40 background-image: linear-gradient(to left, #2ecc71, #3498db, #9b59b6, #f39c12, #2ecc71, #3498db); 41 background-clip: text; 42 animation: spanAnimate 5s linear infinite; 43 background-size: 500%; 44} 45 46.heading span::before { 47 content: "\a"; 48 white-space: pre; 49} 50 51.item { 52 display: flex; 53 padding-block: 5px; 54 padding-left: 10px; 55} 56 57.item--create { 58 color: rgb(255, 165, 0); 59 filter: drop-shadow(0 0 5px rgb(255 165 0 / 0.6)); 60} 61 62.item--post { 63 color: rgb(220, 20, 60); 64 filter: drop-shadow(0 0 5px rgb(220 20 60 / 0.6)); 65} 66 67.item--inspire { 68 color: rgb(20, 213, 220); 69 filter: drop-shadow(0 0 5px rgb(20 213 220 / 0.6)); 70} 71 72.item svg { 73 margin: 5px; 74} 75 76.item span { 77 align-self: center; 78} 79 80button { 81 margin: 5px; 82 padding: 10px; 83 background-color: rgb(100, 149, 237); 84 /* color: white; */ 85 border: 1px solid cornflowerblue; 86 border-radius: 10px; 87 box-shadow: 0px 0px 20px 0px rgba(100, 149, 237, 0.75); 88 transition: all 0.3s ease-in-out; 89 cursor: pointer; 90} 91 92button:hover { 93 box-shadow: 0px 0px 5px 0px rgba(100, 149, 237, 0.75), 94 0px 0px 20px 0px rgba(100, 149, 237, 0.75), 95 0px 0px 50px 0px rgba(100, 149, 237, 0.75); 96 transform: scale(1.1); 97} 98 99@keyframes spanAnimate { 100 0% { 101 background-position: 0 100%; 102 } 103 104 100% { 105 background-position: 100% 0; 106 } 107} 108 109@media (prefers-color-scheme: dark) { 110 .card { 111 color: white; 112 } 113 114 button { 115 color: white; 116 } 117}
459 views
459 views
MIT License