14 views
CSSAdd prefixes
1/*The eye icon on the password can be stylize with any tool you want 2to use (the only way i know to do this correctly is using JS) 3this is meant to be wide supported and it really depends on you browsers 4if i realize any way to stylize the eye it could be added in the future 5in other input type*/ 6 7.container { 8 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 9 font-style: italic; 10 font-weight: bold; 11 display: flex; 12 margin: auto; 13 aspect-ratio: 16/9; 14 align-items: center; 15 justify-items: center; 16 justify-content: center; 17 flex-wrap: wrap; 18 flex-direction: column; 19 gap: 1em; 20} 21 22.input-container { 23 filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9); 24 animation: blinkShadowsFilter 8s ease-in infinite; 25} 26 27.input-content { 28 display: grid; 29 align-content: center; 30 justify-items: center; 31 align-items: center; 32 text-align: center; 33 padding-inline: 1em; 34} 35 36.input-content::before { 37 content: ""; 38 position: absolute; 39 width: 100%; 40 height: 100%; 41 filter: blur(40px); 42 -webkit-clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); 43 clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); 44 background: rgba(122, 251, 255, 0.5568627451); 45 transition: all 1s ease-in-out; 46} 47 48.input-content::after { 49 content: ""; 50 position: absolute; 51 width: 98%; 52 height: 98%; 53 box-shadow: inset 0px 0px 20px 20px #212121; 54 background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, hsl(295, 60%, 12%) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%); 55 -webkit-clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); 56 clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); 57 animation: backglitch 50ms linear infinite; 58} 59 60.input-dist { 61 z-index: 80; 62 display: grid; 63 align-items: center; 64 text-align: center; 65 width: 100%; 66 padding-inline: 1em; 67 padding-block: 1.2em; 68 grid-template-columns: 1fr; 69} 70 71.input-type { 72 display: flex; 73 flex-wrap: wrap; 74 flex-direction: column; 75 gap: 1em; 76 font-size: 1.1rem; 77 background-color: transparent; 78 width: 100%; 79 border: none; 80} 81 82.input-is { 83 color: #fff; 84 font-size: 0.9rem; 85 background-color: transparent; 86 width: 100%; 87 box-sizing: border-box; 88 padding-inline: 0.5em; 89 padding-block: 0.7em; 90 border: none; 91 transition: all 1s ease-in-out; 92 border-bottom: 1px solid hsl(221, 26%, 43%); 93} 94 95.input-is:hover { 96 transition: all 1s ease-in-out; 97 background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%); 98} 99 100.input-content:focus-within::before { 101 transition: all 1s ease-in-out; 102 background: hsla(0, 0%, 100%, 0.814); 103} 104 105.input-is:focus { 106 outline: none; 107 border-bottom: 1px solid hsl(192, 100%, 100%); 108 color: hsl(192, 100%, 88%); 109 background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%); 110} 111 112.input-is::-moz-placeholder { 113 color: hsla(192, 100%, 88%, 0.806); 114} 115 116.input-is::placeholder { 117 color: hsla(192, 100%, 88%, 0.806); 118} 119 120@keyframes backglitch { 121 0% { 122 box-shadow: inset 0px 20px 20px 30px #212121; 123 } 124 125 50% { 126 box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%); 127 } 128 129 to { 130 box-shadow: inset 0px 20px 20px 30px #212121; 131 } 132} 133 134@keyframes rotate { 135 0% { 136 transform: rotate(0deg) translate(-50%, 20%); 137 } 138 139 50% { 140 transform: rotate(180deg) translate(40%, 10%); 141 } 142 143 to { 144 transform: rotate(360deg) translate(-50%, 20%); 145 } 146} 147 148@keyframes blinkShadowsFilter { 149 0% { 150 filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9); 151 } 152 153 25% { 154 filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9); 155 } 156 157 50% { 158 filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471)); 159 } 160 161 75% { 162 filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471)); 163 } 164 165 to { 166 filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9); 167 } 168}
HTML
1<form action="" class="container"> 2 <div class="input-container"> 3 <div class="input-content"> 4 <div class="input-dist"> 5 <div class="input-type"> 6 <input placeholder="User" required="" type="text" class="input-is"> 7 <input placeholder="Password" required="" type="password" class="input-is"> 8 </div> 9 </div> 10 </div> 11 </div> 12</form>