#e8e8e8
1/*Rainbow card*/ 2.card { 3 --background: #f5f5f5; 4 --green: #1FC11B; 5 --yellow: #FFD913; 6 --orange: #FF9C55; 7 --red: #FF5555; 8 --violet: #555BFF; 9 width: 190px; 10 height: 254px; 11 display: flex; 12 flex-direction: column; 13 gap: 1em; 14 background: var(--background); 15 padding: 1rem; 16 border: 3px solid var(--violet); 17 box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green), 18 20px -20px 0 -3px var(--background), 20px -20px var(--yellow), 19 30px -30px 0 -3px var(--background), 30px -30px var(--orange), 20 40px -40px 0 -3px var(--background), 40px -40px var(--red); 21 transition: box-shadow 1s, top 1s, left 1s; 22} 23 24 25/*Hover*/ 26.card:hover { 27 box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--green), 28 0 0 0 -3px var(--background), 0 0 0 0 var(--yellow), 29 0 0 0 -3px var(--background), 0 0 0 0 var(--orange), 30 0 0 0 -3px var(--background), 0 0 0 0 var(--red); 31}
Comments
MIT License