BOX CLICCABILI - LO SMANETTONE

Esempi e Codice
Vai ai contenuti

BOX CLICCABILI CON EFFETTO OVER E CAMBIO COLORE
Personalizzabili
Responsive
Progetto FREE

Crediti all'idea by ► GIUSEPPE GUIDA. Utente HelpCenter esperto in grafica pubblicitaria e realizzazione siti web con Incomedia e wordpress. IL SUO SITO WEB
Questa funzione è stata postata sull'Help center Incomedia a QUESTO INDIRIZZO.
E' un'ottima base di partenza per avere 4 box in linea responsive come richiesto proprio dall'utente che cercava questa situazione.
Quindi sostanzialmente questo esempio riprende in origine la funzione postata con le seguenti modifiche:
  • Dimensioni fisse per schermi larghi:
    Il box viene impostato a 300×300 px, garantendo un aspetto consistente sui desktop.
  • Media Query per dispositivi piccoli:
    Su schermi con larghezza massima di 768px sino ai 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 ha un mini effetto light box, cambia il colore del box , inverte il colore dei testi e del divisorio e mantiene un'ombra sugli angoli arrotondati.

Così facendo, sui desktop il box mantiene le dimensioni originali, mentre su dispositivi piccoli viene ridimensionato per adattarsi senza apparire "rimpicciolito" in modo indesiderato.
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 scelte a caso. ATTENZIONE!! ogni blocco box di questo primo tutorial è indipendente l'uno dall'altro per cui l'operatore deve avere cura di cambiare le classi sul codice..... esempio: facciamo il primo box che conterrà le classi "container" e "cliccabile-box" nel secondo box dovremmo cambiare in "container1" e "cliccabile-box1" e via discorrendo per ogni box idem per il CSS.

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
  • I file con estensione PHP SARANNO VISIBILI SOLO SULLA RETE
Esempio per creare due-tre box cliccabili.


ESEMPIO
Box Cliccabili di norma utilizzati per una pagina di servizi
NOTA: 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 dopo ► "fa fa-ICONA DA VOI SCELTA"

INSERISCI IN CODICE HTML PER OGNI BOX
Ricordati di cambiare le 2 classi come spiegato sopra esempio:
► nel secondo box inserire "container1 e "cliccable-box1" per gli altri cambia 1 in 2 ecc......
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<div class="container">
   <a href="#" class="cliccable-box">
       <i class= "fa fa-house"></i>
       <h2>IL TUO TITOLO</h2>
       <div class="line"></div> <!-- Divider tra il titolo e la descrizione -->
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. Aenean lectus enim, volutpat sit amet rutrum non, cursus non eros.</p>
       <span class="spazio"></span>
   </a>
   
</div>
INSERISCI IN ESPERTO PER OGNI BOX
ricordati di cambiare anche qui le classi (in neretto) ponendo un numero sequenziale per box esempio:  container1 , .cliccablebox1 , .a.cliccable-box2: ecc...
/* Contenitore principale */
.container {
   display: flex;
   flex-wrap: wrap; /* Permette ai box di andare a capo se necessario */
   justify-content: center; /* Centra i box orizzontalmente */
   gap: 20px; /* Spaziatura tra i box */
    
}

.cliccable-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 300px; /* Imposta una larghezza fissa più piccola */
   padding: 20px;
   background-color: #f8f9fa; /* Grigio chiarissimo */
   border: 1px solid #ccc;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
   color: black;
   transition: transform 0.3s ease-in-out, background-color 0.4s ease-in-out, color 0.3s ease-in-out;
   border-radius: 5px; /* Angoli arrotondati di 5px */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1); /* Ombra leggera */
  

}
a.cliccable-box:hover {
 transform: scale(1.02);
 color: #333;
 border-radius: 5px; /* Angoli arrotondati di 5px anche sull'ombra */
 box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* Ombra uniforme più pronunciata al passaggio del mouse */
}
a.cliccable-box h2 {
 margin-top: 20px;
 font-size: 1.5rem; /* Dimensione del carattere del titolo aumentata */
 text-transform: uppercase;
 position: relative;
 z-index: 1;
}

a.cliccable-box p {
 margin-top: 10px;
 font-size: 0.95rem; /* Mantiene la dimensione originale della descrizione */
 line-height: 1.4;
 position: relative;
 z-index: 1;
}
.spazio {
 display: block;
 margin-bottom: 25px; /* Aggiunge 20px di spazio sotto la descrizione */
}

/* Effetto hover con un colore moderno sfumato */
.cliccable-box:hover {
   transform: scale(1.01);
   background: linear-gradient(135deg, #ff8a00, #da1b60); /* Gradiente arancione-rosso */
   color: white;
}

/* Cambia colore al testo e alla linea per contrasto */
.cliccable-box:hover h2,
.cliccable-box:hover p {
   color: #fff; /* Testo bianco */
}

.cliccable-box:hover .line {
   background-color: #ffe600; /* Giallo acceso per evidenziare */
}

.line {
   margin: 20px 0; /* Aumenta lo spazio sopra e sotto la linea */
   width: 80px; /* Leggermente più larga */
   height: 4px; /* Più sottile e delicata */
   background-color: #ff8a00; /* Colore arancione acceso */
   border-radius: 2px; /* Angoli arrotondati per un effetto più moderno */
}

/* Margine inferiore per il titolo */
.cliccable-box h2 {
   margin-bottom: 10px; /* Aggiungi margine inferiore per distanziare dal divisore */
}

/* Media queries per schermi più piccoli */
@media (max-width: 768px) {
   .cliccable-box {
       width: 90%; /* Adatta la larghezza al 90% del contenitore */
       padding: 15px; /* Riduci il padding se necessario */
   }
}

@media (max-width: 480px) {
   .cliccable-box {
       width: 100%; /* Adatta la larghezza al 100% del contenitore */
       padding: 10px; /* Riduci ulteriormente il padding se necessario */
   }
}



UNIFICHIAMO IN UN OGGETTO HTML UNICO PER 4 BOX (senza le icone)
qui è tutto su unico oggetto html con le stesse caratteristiche e funzioni del primo esempio che si differenzia dal fatto che in quel caso posso o meno cambiare colori ad uno più box senza influenzare gli altri. Il secondo esempio è invece più semplice da approntare e meno impegnativo ma per ora c'è meno controllo per ciò che riguarda lo spostamento degli oggetti.A presto il codice sarà aggiornato.
Si cambiano le descrizioni e i titoli sul codice assegnando il percorso della pagina per ogni box. Allo stato sono funzionanti i box con puntamenti a caso di questo sito web.
I file con estensione PHP SARANNO VISIBILI SOLO SULLA RETE. Non ci sono classi da cambiare basta fare un copia e incolla del listato.

INSERISCI IN CODICE HTML
<!-- Credit by Giuseppe Guida 2025 -->
<div class="container">
 <a href="index.html" class="cliccable-box">
   <h2>IL TUO TITOLO</h2>
   <div class="divider"></div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex.</p>
   <span class="spazio"></span>
 </a>
 <a href="sliderservice.html" class="cliccable-box">
   <h2>IL TUO TITOLO</h2>
   <div class="divider"></div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
   <span class="spazio"></span>
 </a>
 <a href="https://www.losmanettone.it/onda.php" class="cliccable-box">
   <h2>IL TUO TITOLO</h2>
   <div class="divider"></div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
   <span class="spazio"></span>
 </a>
 <a href="tabella-elastica.php" class="cliccable-box">
   <h2>IL TUO TITOLO</h2>
   <div class="divider"></div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a congue magna, ac consequat ex. </p>
   <span class="spazio"></span>
 </a>
</div>

INSERISCI IL CODICE IN ESPERTO
/* Contenitore principale by max 2025*/
.container {
   display: flex;
   flex-wrap: wrap; /* Permette ai box di andare a capo se necessario */
   justify-content: center; /* Centra i box orizzontalmente */
   gap: 20px; /* Spaziatura tra i box */
    
}

.cliccable-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 300px; /* Imposta una larghezza fissa più piccola */
   padding: 20px;
   background-color: #f8f9fa; /* Grigio chiarissimo */
   border: 1px solid #ccc;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
   color: black;
   transition: transform 0.3s ease-in-out, background-color 0.4s ease-in-out, color 0.3s ease-in-out;
   border-radius: 5px; /* Angoli arrotondati di 5px */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1); /* Ombra leggera */
  

}
a.cliccable-box .divider {
   width: 80px;
   height: 5px;
   background-color: orange; /* Colore del divisorio */
   margin: 10px auto 20px;
   position: relative;
   z-index: 1;
   transition: background-color 0.3s ease;
 }
 a.cliccable-box:hover .divider {
   background-color: yellow; /* Colore del divisorio al passaggio del mouse */
 }
a.cliccable-box:hover {
 transform: scale(1.02);
 color: #333;
 border-radius: 5px; /* Angoli arrotondati di 5px anche sull'ombra */
 box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* Ombra uniforme più pronunciata al passaggio del mouse */
}
a.cliccable-box h2 {
 margin-top: 20px;
 font-size: 1.5rem; /* Dimensione del carattere del titolo aumentata */
 text-transform: uppercase;
 position: relative;
 z-index: 1;
}

a.cliccable-box p {
 margin-top: 10px;
 font-size: 0.95rem; /* Mantiene la dimensione originale della descrizione */
 line-height: 1.4;
 position: relative;
 z-index: 1;
}
.spazio {
 display: block;
 margin-bottom: 25px; /* Aggiunge 20px di spazio sotto la descrizione */
}

/* Effetto hover con un colore moderno sfumato */
.cliccable-box:hover {
   transform: scale(1.01);
   background: linear-gradient(135deg, #ff8a00, #da1b60); /* Gradiente arancione-rosso */
   color: white;
}

/* Cambia colore al testo e alla linea per contrasto */
.cliccable-box:hover h2,
.cliccable-box:hover p {
   color: #fff; /* Testo bianco */
}

.cliccable-box:hover .line {
   background-color: #ffe600; /* Giallo acceso per evidenziare */
}

.line {
   margin: 20px 0; /* Aumenta lo spazio sopra e sotto la linea */
   width: 80px; /* Leggermente più larga */
   height: 4px; /* Più sottile e delicata */
   background-color: #ff8a00; /* Colore arancione acceso */
   border-radius: 2px; /* Angoli arrotondati per un effetto più moderno */
}

/* Margine inferiore per il titolo */
.cliccable-box h2 {
   margin-bottom: 10px; /* Aggiungi margine inferiore per distanziare dal divisore */
}

/* Media queries per schermi più piccoli */
@media (max-width: 768px) {
   .cliccable-box {
       width: 90%; /* Adatta la larghezza al 90% del contenitore */
       padding: 15px; /* Riduci il padding se necessario */
   }
}

@media (max-width: 480px) {
   .cliccable-box {
       width: 100%; /* Adatta la larghezza al 100% del contenitore */
       padding: 10px; /* Riduci ulteriormente il padding se necessario */
   }
}
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