Input by JaydipPrajapati1910
#e8e8e8
1.input { 2 max-width: 190px; 3 border: none; 4 outline: none; 5 background: none; 6 font-size: 18px; 7 color: #fff; 8 padding: 15px 5px 10px 20px; 9 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), 10 linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 11 background-position: bottom right, bottom right; 12 background-size: 100% 100%, 100% 100%; 13 background-repeat: no-repeat; 14 box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4), 15 inset -4px -8px 0px rgba(0, 0, 0, 0.3), 16 0px 2px 1px rgba(0, 0, 0, 0.3), 17 0px 2px 1px rgba(255, 255, 255, 0.1); 18 transform: perspective(70px) rotateX(5deg) rotateY(0deg); 19 border-radius: 10px; 20} 21 22.input::before { 23 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), 24 linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 25 background-position: bottom right, bottom right; 26 background-size: 100% 100%, 100% 100%; 27 background-repeat: no-repeat; 28 z-index: -1; 29 border-radius: 15px; 30 transition: all .1s ease-in-out 0s; 31} 32 33.input:focus { 34 border: 2px solid #c3c6ce; 35} 36 37.input::placeholder { 38 color: #fff; 39 transition: all 0.3s ease; 40} 41 42.input:focus::placeholder { 43 color: #999; 44} 45 46 47
898 views
898 views
MIT License