Card by SelfMadeSystem
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 position: relative; 3 transform-style: preserve-3d; 4 font-size: 0.75rem; 5 width: 15em; 6 height: 20em; 7 border-radius: 20px; 8 /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); */ 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 flex-direction: column; 13} 14 15.card::before { 16 content: ''; 17 position: absolute; 18 width: 1em; 19 height: 100em; 20 background: #fff; 21} 22 23.card::after { 24 content: ''; 25 position: absolute; 26 background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZwogIHdpZHRoPSIzMmVtIgogIGhlaWdodD0iMzJlbSIKICB2ZXJzaW9uPSIxLjEiCiAgdmlld0JveD0iMCAwIDEyOCAxMjgiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxjaXJjbGUKICAgICAgY3g9IjY0IgogICAgICBjeT0iNjQiCiAgICAgIHI9IjYwIgogICAgICBmaWxsPSIjNzMwMGZmIgogICAgICBmaWxsLW9wYWNpdHk9Ii4yNSIKICAgICAgc3Ryb2tlLXdpZHRoPSI3LjUiCiAgICAvPgogICAgPGNpcmNsZQogICAgICBjeD0iNjQiCiAgICAgIGN5PSI2NCIKICAgICAgcj0iMzguNjM0IgogICAgICBmaWxsPSIjZDEzZDkxIgogICAgICBmaWxsLW9wYWNpdHk9Ii41IgogICAgICBzdHJva2Utd2lkdGg9IjQuODI5MyIKICAgIC8+CiAgICA8Y2lyY2xlCiAgICAgIGN4PSI2NCIKICAgICAgY3k9IjY0IgogICAgICByPSIyNi45OTkiCiAgICAgIGZpbGw9IiNmZjVlNWUiCiAgICAgIGZpbGwtb3BhY2l0eT0iLjc1IgogICAgICBzdHJva2Utd2lkdGg9IjMuMzc0OSIKICAgIC8+CiAgICA8Y2lyY2xlIGN4PSI2NCIgY3k9IjY0IiByPSIyMS4xNDMiIGZpbGw9IiNmZjhkNGYiIHN0cm9rZS13aWR0aD0iMi42NDI5IiAvPgogICAgPGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iMTAuMjMxIiBmaWxsPSIjZmZkNjVjIiBzdHJva2Utd2lkdGg9IjEuMjc4OSIgLz4KICAgIDxnIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMyI+CiAgICAgIDxjaXJjbGUKICAgICAgICBjeD0iNjQiCiAgICAgICAgY3k9IjY0IgogICAgICAgIHI9IjYwIgogICAgICAgIHN0cm9rZT0iIzQzMjViYSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI3OCwgMTIsIDE4IgogICAgICA+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgIGZyb209IjAgNjQgNjQiCiAgICAgICAgICB0bz0iMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIyMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iNDguMzE3IgogICAgICAgIHN0cm9rZT0iIzIzNThkZSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI1NCwxMiwxMiw2LDMsNjAiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSIzNjAgNjQgNjQiCiAgICAgICAgICBkdXI9IjEwcyIKICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIgogICAgICAgIC8+CiAgICAgIDwvY2lyY2xlPgogICAgICA8Y2lyY2xlCiAgICAgICAgY3g9IjY0IgogICAgICAgIGN5PSI2NCIKICAgICAgICByPSIzOC42MzQiCiAgICAgICAgc3Ryb2tlPSIjZDEzZDkxIgogICAgICAgIHN0cm9rZS1kYXNoYXJyYXk9IjM2LDEyLDYsMjQiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSItMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxNnMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iMjYuOTk5IgogICAgICAgIHN0cm9rZT0iI2ZmNWU1ZSIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSIxOCwgNiwgOSwgMjQiCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSIzNjAgNjQgNjQiCiAgICAgICAgICBkdXI9IjEzcyIKICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIgogICAgICAgIC8+CiAgICAgIDwvY2lyY2xlPgogICAgICA8Y2lyY2xlCiAgICAgICAgY3g9IjY0IgogICAgICAgIGN5PSI2NCIKICAgICAgICByPSIyMS4xNDMiCiAgICAgICAgc3Ryb2tlPSIjZmY1ZTVlIgogICAgICAgIHN0cm9rZS1kYXNoYXJyYXk9IjYsIDYsIDQyLCA2LCA5LCA2LCAzLCAyOTciCiAgICAgID4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgZnJvbT0iMCA2NCA2NCIKICAgICAgICAgIHRvPSItMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgICAgPGNpcmNsZQogICAgICAgIGN4PSI2NCIKICAgICAgICBjeT0iNjQiCiAgICAgICAgcj0iMTQuNjU2IgogICAgICAgIHN0cm9rZT0iI2ZmZDY1YyIKICAgICAgICBzdHJva2UtZGFzaGFycmF5PSI5LDksMjQsMjk3IgogICAgICA+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgIGZyb209IjAgNjQgNjQiCiAgICAgICAgICB0bz0iMzYwIDY0IDY0IgogICAgICAgICAgZHVyPSIxMHMiCiAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAvPgogICAgICA8L2NpcmNsZT4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="); 27 background-size: 22rem; 28 width: 22rem; 29 height: 22rem; 30 --rx: 60deg; 31 transform: rotateX(var(--rx)) rotateZ(0deg); 32 pointer-events: none; 33} 34 35@keyframes weee { 36 to { 37 transform: rotateX(var(--rx)) rotateZ(360deg); 38 } 39} 40 41.card .heading { 42 font-size: 1rem; 43 font-weight: 600; 44 text-align: center; 45 padding: 1em; 46 background-image: linear-gradient(90deg, rgba(255,0,111, 0.4) 0%, rgba(128,40,183,1) 50%, rgba(0,80,255, 0.4) 100%); 47 border-radius: 15px; 48 transform: translateZ(1px) translateY(-5em) 49} 50 51.card .heading span { 52 font-weight: 700; 53 background: linear-gradient(90deg, rgba(123,173,255,1) 0%, rgba(209,131,255,1) 50%, rgba(123,173,255,1) 100%); 54 -webkit-background-clip: text; 55 -webkit-text-fill-color: transparent; 56 background-clip: text; 57 background-size: 50% 100%; 58 animation: animatedBackground 1s linear infinite; 59} 60 61.card .heading span::after { 62 content: "!"; 63} 64 65.card .content { 66 border-radius: 5px; 67 border-top-left-radius: 0px; 68 border-top-right-radius: 0px; 69 padding-bottom: 1rem; 70 z-index: 999; 71 transform: translateZ(100px) translateY(-6em); 72} 73 74.card .content .item { 75 font-size: small; 76} 77 78.card .content .item svg { 79 color: #000; 80 background: #fff; 81 padding: 0.3em; 82 width: 2.5em; 83 height: 2.5em; 84 border-radius: 8px; 85} 86 87.card .content .item span { 88 position: absolute; 89 background-color: #0009; 90 backdrop-filter: blur(9px); 91 padding: 4px; 92 border-radius: 0px 8px 8px 0px; 93 transform: translateY(0.25em); 94} 95 96.card button { 97 position: absolute; 98 font-size: 1rem; 99 font-weight: 600; 100 ; 101 color: #fff; 102 background: linear-gradient(90deg, rgb(166, 0, 216) 0%, rgba(0,80,255) 50%, rgb(166, 0, 216) 100%); 103 background-size: 200% 100%; 104 border: none; 105 padding: 1em; 106 border-radius: 1em; 107 transform: translateY(6rem); 108 cursor: pointer; 109 transition: transform 0.15s; 110 animation: animatedBackground2 2s linear infinite; 111} 112 113.card button:hover { 114 transform: translateY(6rem) scale(1.05); 115} 116 117.card button:active { 118 transform: translateY(6rem) scale(0.9); 119} 120 121@keyframes animatedBackground { 122 from { 123 background-position: 0 0; 124 } 125 126 to { 127 background-position: 100% 0; 128 } 129} 130 131@keyframes animatedBackground2 { 132 from { 133 background-position: 0 0; 134 } 135 136 to { 137 background-position: 200% 0; 138 } 139} 140
1.2K views
1.2K views
MIT License