WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1591
codex
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
13 June 2025
illusione di profondità
19 March 2025
Animazione delle ombre del testo
HTML
Copy
<div class="group"> <svg viewBox="0 0 24 24" aria-hidden="true" class="search-icon"> <g> <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z" ></path> </g> </svg> <input id="query" class="input" type="search" placeholder="Search..." name="searchbar" /> </div>
CSS
Copy
.group { display: flex; line-height: 28px; align-items: center; position: relative; max-width: 190px; } .input { font-family: "Montserrat", sans-serif; width: 100%; height: 45px; padding-left: 2.5rem; box-shadow: 0 0 0 1.5px #2b2c37, 0 0 25px -17px #000; border: 0; border-radius: 12px; background-color: #16171d; outline: none; color: #bdbecb; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); cursor: text; z-index: 0; } body{ display:flex; justify-content:center; align-items:center; height:100vh; } .input::placeholder { color: #bdbecb; } .input:hover { box-shadow: 0 0 0 2.5px #2f303d, 0px 0px 25px -15px #000; } .input:active { transform: scale(0.95); } .input:focus { box-shadow: 0 0 0 2.5px #2f303d; } .search-icon { position: absolute; left: 1rem; fill: #bdbecb; width: 1rem; height: 1rem; pointer-events: none; z-index: 1; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
