Componente Filtri Glassmorphism
Un componente di filtri in stile Glassmorphism semplice e reattivo per un portafoglio, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, colori complementari e supporto per la modalità scura.
Codice HTML
<div class="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 p-4 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
<div class="w-full max-w-sm mx-auto p-4 md:p-6 lg:p-8 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 shadow-lg dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center dark:text-white drop-shadow-sm">Filter Projects</h2>
<div class="flex flex-wrap gap-3 justify-center mb-6">
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-blue-500 bg-opacity-40 border border-blue-400 text-white shadow-md hover:scale-105 hover:bg-blue-600 hover:bg-opacity-50 dark:bg-blue-700 dark:bg-opacity-40 dark:border-blue-600 dark:hover:bg-blue-800 dark:hover:bg-opacity-50">
All
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Web Design
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
UI/UX
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Branding
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Mobile App
</button>
</div>
<div class="flex items-center gap-3">
<label for="sort-by" class="sr-only">Sort By</label>
<select id="sort-by" class="flex-grow appearance-none px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:focus:ring-blue-600">
<option value="recent">Sort by: Recent</option>
<option value="popularity">Sort by: Popularity</option>
<option value="alphabetical">Sort by: Alphabetical</option>
</select>
<button aria-label="Apply Filters" class="p-3 rounded-full transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-gradient-to-r from-blue-500 to-indigo-500 bg-opacity-60 border border-opacity-40 border-blue-400 text-white shadow-md hover:scale-110 hover:from-blue-600 hover:to-indigo-600 dark:from-blue-700 dark:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>Componenti correlati
Componente Filtri
Un componente di filtri minimalista e reattivo per l'e-commerce, con supporto per il tema scuro. Include categorie, fascia di prezzo e un filtro colore.
Memphis_Job_Filters
Un componente di filtro di lavoro reattivo con uno stile di design Memphis giocoso, una combinazione di colori triadica e il supporto della modalità scura, adatto per bacheche di lavoro e piattaforme di carriera.
RetroMedicalFiltersComponent
Un componente di filtri reattivo in stile retrò/vintage per applicazioni sanitarie, con colori autunnali e supporto per la modalità scura. Include opzioni di filtro interattive per categorie, intervallo di date e stato.