Input by mRcOol7
#e8e8e8
1.search-container { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 align-items: center; 6 background: linear-gradient(to right, #5c5c5c, #f5f5f5); 7 padding: 30px; 8 border-radius: 15px; 9 transition: background 0.3s ease; 10 perspective: 1000px; 11} 12 13.label { 14 position: absolute; 15 top: 50%; 16 left: 20px; 17 transform: translateY(-50%); 18 color: #999; 19 pointer-events: none; 20 transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease, 21 text-shadow 0.3s ease; 22} 23 24.search-input { 25 position: relative; 26 width: 230px; 27 height: 40px; 28 padding: 12px; 29 border: 2px solid #ccc; 30 border-radius: 8px; 31 background: linear-gradient(to right, #d9d9d9, #f8f8f8); 32 font-size: 16px; 33 color: #555; 34 outline: none; 35 transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, 36 border-color 0.3s ease, transform 0.3s ease; 37 transform-style: preserve-3d; 38 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow for a realistic feel */ 39} 40 41.search-input:focus, 42.search-input:not(:placeholder-shown) { 43 border-color: #4caf50; 44 background: linear-gradient(to right, #c2f0c2, #f0f0f0); 45 transform: rotateX(20deg); 46 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on focus */ 47} 48 49.search-input:focus + .label, 50.search-input:not(:placeholder-shown) + .label { 51 transform: translateY(-120%) scale(0.8); 52 font-size: 12px; 53 color: #4caf50; 54 text-shadow: 0 0 5px rgba(76, 175, 80, 0.6); 55} 56 57.search-input:hover { 58 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on hover */ 59 background: linear-gradient(to right, #e6e6e6, #f9f9f9); 60 border-color: #999; 61} 62 63.clear-button { 64 position: absolute; 65 top: 50%; 66 right: 20px; 67 transform: translateY(-50%); 68 color: #999; 69 cursor: pointer; 70 opacity: 0; 71 transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; 72} 73 74.clear-button:hover { 75 color: #4caf50; 76 transform: scale(1.1); 77} 78 79.search-input:not(:focus):not(:placeholder-shown) + .clear-button { 80 opacity: 1; 81} 82 83.shine { 84 position: absolute; 85 top: 0; 86 left: 0; 87 width: 100%; 88 height: 100%; 89 background: linear-gradient( 90 to bottom right, 91 rgba(255, 255, 255, 0.6), 92 transparent 93 ); 94 border-radius: 8px; 95 pointer-events: none; 96 opacity: 0; 97 transition: opacity 0.3s ease; 98} 99 100.search-input:focus + .shine { 101 opacity: 1; 102} 103 104.search-icon { 105 position: absolute; 106 top: 50%; 107 right: 20px; 108 transform: translateY(-50%); 109 color: #999; 110 cursor: pointer; 111 transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease; 112 border-radius: 50%; 113} 114 115.search-input:focus + .search-icon { 116 color: #4caf50; 117 transform: translateY(-50%) scale(1.1); 118 filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.6)); 119} 120 121@keyframes inputPulse { 122 0%, 123 100% { 124 transform: scale(1); 125 } 126 50% { 127 transform: scale(1.05); 128 } 129} 130 131.search-input:focus { 132 animation: inputPulse 0.5s ease; 133} 134
558 views
558 views
MIT License