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 ► GIANCARLO WEB e GIUSEPPE GUIDA
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 400×400 px, garantendo un aspetto consistente sui desktop.
  • Media Query per dispositivi piccoli:
    Su schermi con larghezza massima di 420px, 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 che scivola dall'alto, lo zoom e il cambio di colore rimangono invariati, così come gli angoli arrotondati e l'ombra.

Così facendo, sui desktop il box mantiene le dimensioni originali, mentre su dispositivi piccoli viene ridimensionato per adattarsi senza apparire "rimpicciolito" in modo indesiderato. Bisogna comunque ricordarsi di applicare lo spostamento degli oggetti nella struttura agendo sull'icona responsive.

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
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.


ESEMPIO
Box Cliccabili di norma utilizzati per una pagina di servizi

VAI ALLA HOME

La tua descrizione Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare sapien et nisi ornare, in ultricies augue varius. Donec feugiat, sapien non consequat euismod, diam justo tristique arcu, non tincidunt mi urna sed lorem.

SLIDE SERVICES

La tua descrizione Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare sapien et nisi ornare, in ultricies augue varius. Donec feugiat, sapien non consequat euismod, diam justo tristique arcu, non tincidunt mi urna sed lorem.

SEZIONE VIDEO

La tua descrizione Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare sapien et nisi ornare, in ultricies augue varius. Donec feugiat, sapien non consequat euismod, diam justo tristique arcu, non tincidunt mi urna sed lorem.

INSERISCI IN "CODICE HTML" PER OGNI BOX CHE HAI CREATO CON L'OGGETTO HTML
Ricordati di cambiare i puntamenti per le tue pagine (in neretto)
<style>
/* semplici box cliccabili con effetto hover by max*/
   a.box {
     position: relative;
     overflow: hidden;
     display: block;
     width: 90%;
     max-width: 400px;
     aspect-ratio: 1; /* Mantiene il rapporto 1:1 (modern browsers) */
     height: 400px;
     background-color: #f8f8f8;
     text-align: center;
     margin: 20px;
     padding: 20px;
     box-sizing: border-box;
     color: #000;
     text-decoration: none; /* Rimuove la sottolineatura dal link */
     cursor: pointer;
     transition: transform 0.3s ease, color 0.3s ease;
     border-radius: 15px; /* Angoli arrotondati */
     box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.05); /* Leggera ombra multiforme */
   }

   /* Forza nessuna sottolineatura per tutti gli elementi interni */
   a.box * {
     text-decoration: none;
   }

   /* Overlay pseudo-elemento per l'effetto slide down */
   a.box::before {
     content: "";
     position: absolute;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #c00;
     z-index: 0;
   }

   /* All'entrata del mouse, l'overlay scivola dall'alto */
   a.box:hover::before {
     animation: slideDown 0.3s forwards;
   }

   /* Effetto zoom e cambio colore del testo */
   a.box:hover {
     transform: scale(1.05);
     color: #fff;
   }

   a.box h2 {
     margin-top: 20px;
     font-size: 1.2rem;
     text-transform: uppercase;
     position: relative;
     z-index: 1;
   }

   a.box .divider {
     width: 30px;
     height: 5px;
     background-color: #000;
     margin: 10px auto;
     position: relative;
     z-index: 1;
     transition: background-color 0.3s ease;
   }

   a.box:hover .divider {
     background-color: #fff;
   }

   a.box p {
     margin-top: 20px;
     font-size: 0.95rem;
     line-height: 1.4;
     position: relative;
     z-index: 1;
   }

   @keyframes slideDown {
     from { top: -100%; }
     to { top: 0; }
   }
    /* Media query per schermi piccoli */
   @media (max-width: 420px) {
     .box {
       width: 90%;
       height: auto; /* L'altezza si adatta in base al contenuto */
       padding: 20px;
     }
   }
 </style>

<a href="index.html" class="box">
 <h2>IL TUO TITOLO</h2>
 <div class="divider"></div>
 <p>
   La tua descrizione
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Pellentesque ornare sapien et nisi ornare, in ultricies augue varius.
   Donec feugiat, sapien non consequat euismod, diam justo tristique arcu,
   non tincidunt mi urna sed lorem.
 </p>
</a>
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