{"html":"

Profile Card

\n \n \n \n

Bio description with some interesting data about yourself...

\n \n Social networks\n \n \n

\n LinkedIn\n
\n Twitter\n
\n Facebook\n

","css":".card {\n --cardbg: 245, 245, 245;\n --cardBase: 235, 16, 206;\n --cardText: 100, 100, 100;\n --cardTextBtn: 106, 16, 88;\n --cardsquares: 156, 113, 227;\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n text-align: center;\n border: 1px solid #ccc;\n box-shadow: 0 0 3em rgba(var(--cardBase), .25),\n inset 0 -.25em 1px rgba(var(--cardBase), .125);\n border-radius: 4px;\n background: rgba(var(--cardbg), 1);\n position: relative;\n width: 220px;\n height: 310px;\n perspective: 1000px;\n z-index: 0;\n transition: all 1s ease-out;\n}\n\n.card:hover {\n filter: grayscale(0%);\n scale: 1.025;\n box-shadow: 0 0 5em rgba(var(--cardBase), .5);\n}\n\n.card::after,\n.card::before {\n content: '';\n width: 200px;\n height: 50%;\n display: block;\n background-color: rgba(var(--cardsquares), .5);\n filter: blur(10px);\n position: absolute;\n transition: all 5s ease-out;\n opacity: .1;\n z-index: 0;\n}\n\n.card:hover::after,\n.card:hover::before {\n opacity: .5;\n rotate: 60deg;\n}\n\n.card:hover::after {\n translate: 100% 0;\n}\n\n.card:hover::before {\n translate: -100% 0;\n}\n\n.card .card-title {\n color: rgba(var(--cardText), .75);\n font-size: 1.1em;\n font-weight: 600;\n margin: .5em;\n position: relative;\n transition: all .3s ease-out;\n z-index: 100;\n text-shadow: 0px 0px 0px rgba(var(--cardText), .25);\n}\n\n.card:hover h3 {\n color: rgba(var(--cardText), 1);\n text-shadow: 0px 8px 5px rgba(var(--cardText), .35);\n}\n\n.card:hover span {\n filter: grayscale(0%);\n}\n\n/* Inner card */\n.card-info::after {\n left: -6rem;\n bottom: 0;\n}\n\n.card-info::before {\n right: -6rem;\n top: 1rem;\n}\n\n/* Avatar container */\n.card-info span {\n color: rgba(var(--cardBase), 1);\n display: flex;\n place-items: center;\n text-align: center;\n border-radius: 50%;\n overflow: hidden;\n background-color: rgba(var(--cardBase), .5);\n height: 80px;\n width: 50%;\n box-shadow: inset 0px 2px 4px rgba(var(--cardBase), .95),\n inset 0px 2px 40px rgba(var(--cardbg), .95);\n position: relative;\n transition: all .3s ease-out .1s;\n filter: grayscale(75%);\n z-index: 0;\n}\n\n.card-info span:hover .avatar {\n scale: 1.5;\n}\n\n.avatar {\n transition: all .3s ease-out;\n position: relative;\n}\n\n/* Inner card container and UI */\n.card-info {\n --angle: 0deg;\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n padding: 1em;\n margin: 0 .75em;\n color: rgba(var(--cardText), 1);\n background-color: rgba(250, 246, 246, 1);\n transition: all .5s ease-out;\n animation: animateBorder 10s linear infinite reverse;\n border: .15em solid;\n position: relative;\n z-index: 10;\n border-image: linear-gradient(var(--angle), rgba(var(--cardbg), 1), rgba(var(--cardBase), .5), rgba(var(--cardbg), 1)) 1;\n}\n\n.card-info p {\n color: rgba(var(--cardText), 1);\n line-height: 1.25em;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 3;\n font-size: 1em;\n margin: 1em 0;\n transition: all .3s ease-out .3s;\n}\n\n.card-info .btn {\n display: block;\n padding: 8px 16px;\n background-color: rgba(var(--cardBase), .35);\n color: rgba(var(--cardTextBtn), .75);\n text-decoration: none;\n border-radius: 4px;\n font-size: .85em;\n transition: all 0.3s ease-in-out;\n}\n\n.card-info .btn:hover {\n cursor: pointer;\n background-color: rgba(var(--cardsquares), .35);\n}\n\n.card-info .btn:active {\n box-shadow: inset 0px -2px 3px rgba(var(--cardBase), .25);\n}\n\n/* Card links container */\n.card-links {\n transition: all .3s linear;\n opacity: 0;\n display: flex;\n flex-flow: row wrap;\n gap: 1em;\n position: relative;\n top: -2rem;\n list-style: none;\n color: rgba(var(--cardText), 1);\n font-size: .75em\n}\n\n.card-links a {\n transition: color .3s ease-out;\n}\n\n.card-links a:hover {\n color: rgba(var(--cardBase), .75);\n}\n\n/* Card chckbox active state */\n.card input[type=\"checkbox\"] {\n visibility: hidden;\n}\n\n.card:hover:has(#toggle:checked) .card-title {\n text-shadow: 0px 2px 5px rgba(var(--cardText), .35);\n}\n\n.card:has(#toggle:checked) {\n border-radius: 10px;\n height: 295px;\n}\n\n.card:has(#toggle:checked) .card-info > *:not(.btn):not(span) {\n opacity: 0;\n}\n\n.card:has(#toggle:checked) .card-info {\n translate: 0 -20%;\n border-width: 1px;\n border: none;\n box-shadow: inset 0 0 5px rgba(var(--cardBase), .5),\n inset 0px 0px 2px rgba(var(--cardText), .25),\n inset 0px 30px 40px rgba(var(--cardBase), .25);\n border-radius: 10px;\n}\n\n.card:has(#toggle:checked) .card-info span {\n translate: 0 75%;\n}\n\n.card:has(#toggle:checked) .card-info p {\n transition: all .1s ease-out;\n}\n\n.card:has(#toggle:checked) .card-links {\n opacity: 1;\n top: -2rem;\n}\n\n.card #toggle {\n visibility: hidden;\n}\n\n@keyframes animateBorder {\n to {\n --angle: 360deg;\n }\n}\n\n@property --angle {\n syntax: '';\n initial-value: 0deg;\n inherits: false;\n}"}

heavy-horse-27

👁 实时预览

📝 源代码