#212121
1.card { 2 width: 190px; 3 height: 120px; 4 padding: 0.5rem; 5 background: rgba(198, 198, 198, 0.34); 6 border-radius: 8px; 7 backdrop-filter: blur(5px); 8 border-bottom: 3px solid rgba(255, 255, 255, 0.440); 9 border-left: 2px rgba(255, 255, 255, 0.545) outset; 10 box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280); 11 transform: skewX(10deg); 12 transition: .4s; 13 overflow: hidden; 14 color: white; 15} 16 17.card:hover { 18 height: 254px; 19 transform: skew(0deg); 20} 21 22.align { 23 padding: 1rem; 24 display: flex; 25 flex-direction: row; 26 gap: 5px; 27 align-self: flex-start; 28} 29 30.red { 31 width: 10px; 32 height: 10px; 33 border-radius: 50%; 34 background-color: #ff605c; 35 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 36} 37 38.yellow { 39 width: 10px; 40 height: 10px; 41 border-radius: 50%; 42 background-color: #ffbd44; 43 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 44} 45 46.green { 47 width: 10px; 48 height: 10px; 49 border-radius: 50%; 50 background-color: #00ca4e; 51 box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280); 52} 53 54.card h1 { 55 text-align: center; 56 margin: 1.3rem; 57 color: rgb(218, 244, 237); 58 text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573); 59} 60 61
11K views
11K views
Comments
MIT License