Card by SouravBandyopadhyay
#212121
1.notification { 2 display: flex; 3 flex-direction: column; 4 isolation: isolate; 5 position: relative; 6 width: 18rem; 7 height: 8rem; 8 background: #29292c; 9 border-radius: 1rem; 10 overflow: hidden; 11 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 12 font-size: 16px; 13 --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff); 14 --color: #32a6ff 15} 16 17.notification:before { 18 position: absolute; 19 content: ""; 20 inset: 0.0625rem; 21 border-radius: 0.9375rem; 22 background: #18181b; 23 z-index: 2 24} 25 26.notification:after { 27 position: absolute; 28 content: ""; 29 width: 0.25rem; 30 inset: 0.65rem auto 0.65rem 0.5rem; 31 border-radius: 0.125rem; 32 background: var(--gradient); 33 transition: transform 300ms ease; 34 z-index: 4; 35} 36 37.notification:hover:after { 38 transform: translateX(0.15rem) 39} 40 41.notititle { 42 color: var(--color); 43 padding: 0.65rem 0.25rem 0.4rem 1.25rem; 44 font-weight: 500; 45 font-size: 1.1rem; 46 transition: transform 300ms ease; 47 z-index: 5; 48} 49 50.notification:hover .notititle { 51 transform: translateX(0.15rem) 52} 53 54.notibody { 55 color: #99999d; 56 padding: 0 1.25rem; 57 transition: transform 300ms ease; 58 z-index: 5; 59} 60 61.notification:hover .notibody { 62 transform: translateX(0.25rem) 63} 64 65.notiglow, 66.notiborderglow { 67 position: absolute; 68 width: 20rem; 69 height: 20rem; 70 transform: translate(-50%, -50%); 71 background: radial-gradient(circle closest-side at center, white, transparent); 72 opacity: 0; 73 transition: opacity 300ms ease; 74} 75 76.notiglow { 77 z-index: 3; 78} 79 80.notiborderglow { 81 z-index: 1; 82} 83 84.notification:hover .notiglow { 85 opacity: 0.1 86} 87 88.notification:hover .notiborderglow { 89 opacity: 0.1 90} 91 92.note { 93 color: var(--color); 94 position: fixed; 95 top: 80%; 96 left: 50%; 97 transform: translateX(-50%); 98 text-align: center; 99 font-size: 0.9rem; 100 width: 75%; 101}
5K views
5K views
MIT License