BOX CLICCABILI - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
BOX RADIANTI
esempi e codice

BOX CLICCABILI CON EFFETTO OVER SU TESTO
Personalizzabile
Responsive
Progetto FREE
Questo esempio consente di avere uno più box distinti e separati:
  • Media Query per dispositivi piccoli:
    Su schermi con larghezza massima di 480px, il box si adatta al 90% della larghezza dello schermo e l'altezza diventa automatica per contenere il testo. In questo modo, su dispositivi mobile il box non resta troppo piccolo.
  • Effetti e stile:
    L'overlay viene applicato sul testo
PRO
  • Il codice si inserisce direttamente in un oggetto HTML
  • Possibilità di manipolare i colori del BOX attraverso lo style del codice
  • Possibilità di cambiare la grandezza e la larghezza del box
  • Cambiare la frase DEL TITOLO  e dei TESTI LOREM di esempio con i vostri
  • Cambiare l'indirizzo della pagina a cui ogni box deve fare riferimento.
  • Utilizzo di risorse minime
CONTRO
  • Nessuna controindicazione ma è preferibile per l'utente che vuole smanettare copiare il codice direttamente da PC per evitare che i browser possano interpretare male i rientri del codice che si verificano al restringimento a risoluzioni più basse
  • Incomedia interpreterà questo codice come errore solitamente riconducibile al tag <a> all'interno di un div ma funzionerà ugualmente.
Esempio per creare due-tre box cliccabili. Il contenuto del codice e dei relativi testi vanno inseriti in un normale oggetto html In questo esempio la funzione è operativa con un puntamento alla home page di questo sito e ad altre pagine del sito scelte a caso.


ESEMPIO
Box Cliccabili di norma utilizzati per una pagina di servizi

INSERISCI IN CODICE HTML IL LISTATO
RICORDATI DI CAMBIARE IL PUNTAMENTO ALLA TUA PAGINA PER OGNI BOX ▼
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<div id="custom-html-container">
 <style>
/* Box effect by Max 2025 */
   @property --gradient-angle {
     syntax: "<angle>";
     initial-value: 0turn;
     inherits: false;
   }

   #custom-html-container .card {
     animation: 2s gradient-angle infinite linear;
     border: 4px solid transparent;
     background-image: linear-gradient(#FFD700, #DAA520),
       conic-gradient(
         from var(--gradient-angle),
         #FFA500 0%,
         #FFD700 37%,
         #FFEC8B 30%,
         #FFD700 33%,
         #FFA500 40%,
         #FFA500 50%,
         #FFD700 77%,
         #FFEC8B 80%,
         #FFD700 83%,
         #FFA500 90%
       );
     background-clip: padding-box, border-box;
     background-origin: padding-box, border-box;
     transition: color 0.3s ease-in-out;
   }

   #custom-html-container .card:hover {
     color: white;
   }

   @keyframes gradient-angle {
     to {
       --gradient-angle: 1turn;
     }
   }

   #custom-html-container .container {
     display: flex;
     justify-content: center;
     margin-inline: auto;
   }

   #custom-html-container .card {
     display: grid;
     max-width: 250px;
     padding: 25px;
     text-decoration: none;
     color: currentColor;
     border-radius: 25px;
     place-content: center;
     place-items: center;
     aspect-ratio: 1/1;
     row-gap: 16px;
   }

   #custom-html-container .card h2 {
     font-family: "Comfortaa", sans-serif;
     font-size: 18px;
     font-weight: 700;
     font-style: normal;
     font-optical-sizing: auto;
   }

   #custom-html-container .card p {
     font-size: 12px;
   }
@media (max-width: 480px) {
 .box {
   width: 90%;
   height: auto; /* L'altezza si adatta in base al contenuto */
   padding: 20px;
 }
}

 <div class="container">
   <a class="card" href="index.html">
     <h2>Owl</h2>
     <p>
       A nocturnal bird that flies silently. Known for its large eyes,
       sharp claws, and as a symbol of wisdom.
     </p>
   </a>
 </div>
</div>

INSERISCI IN CODICE HTML(CSS) IN "ESPERTO"
h1 {
   font-size: 25px;
   text-align: left;
   text-transform: capitalize;
}

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
}

.service-box {
   position: relative;
   overflow: hidden;
   width: 250px; /* Adattato per Incomedia */
   height: 220px;
   perspective: 1000px;
}

.service-link {
   display: block;
   text-decoration: none;
}

.service-icon {
   width: 100%;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.5s ease;
   transform-origin: center;
   background: #333;
   position: absolute;
   top: 0;
   left: 0;
   backface-visibility: hidden;
}

.service-content {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #474747;
   transform: rotateX(-90deg);
   transform-origin: center;
   opacity: 0;
   transition: all 0.5s ease;

   /* Centrare il contenuto */
   display: flex; /* Flexbox attivato */
   flex-direction: column; /* Disporre gli elementi in colonna */
   align-items: center; /* Centrare orizzontalmente */
   justify-content: center; /* Centrare verticalmente */
   text-align: center; /* Allineare il testo */
}


/* Allineamento del contenuto nell'hover */
.content-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   text-align: center;
}


.service-box .service-icon .front-content {
   text-align: center;
}

.service-box .service-icon .front-content i {
   font-size: 30px;
   color: #fff;
}

.service-box .service-icon .front-content h3 {
   font-size: 16px;
   color: #fff;
   margin-top: 10px;
   text-transform: uppercase;
}

.service-box .service-content h3 {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
}

.service-box .service-content p {
   font-size: 14px;
   color: #b1b1b1;
   margin: 0;
}

/* Barra divisoria */
.line {
   margin: 10px auto;
   width: 50px;
   height: 3px;
   background-color: #ffa500;
   border-radius: 2px;
}

.service-box:hover .service-content {
   opacity: 1;
   transform: rotateX(0);
}
.service-box .service-icon .front-content {
   text-align: center;
}

/* Colorazione delle icone */
.yellow {
   background-color: #ffc000;
}

.orange {
   background-color: #fc7f0c;
}

.red {
   background-color: #e84b3a;
}

.grey {
   background-color: #474747;
}
Per scegliere l'icona giusta in FontAwesome all'interno del tuo box, devi usare la classe corrispondente all'icona che desideri. Ecco come fare:
Passaggi:
  1. Vai su FontAwesome Icons → https://fontawesome.com/icons
  2. Cerca l'icona che vuoi usare (es. "camera", "user", "shopping cart", ecc.)
  3. Copia la classe dell'icona, ad esempio:
    • 🔧 Impostazioni → <i class="fa fa-cog"></i>
    • 📷 Fotocamera → <i class="fa fa-camera"></i>
    • 🛒 Carrello → <i class="fa fa-shopping-cart"></i>
  4. Sostituisci l'icona nei tuoi box.
COMMENTA ▼
Non sono presenti ancora recensioni.
5 
0
4 
0
3 
0
2 
0
1 
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti