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
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.
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 PER OGNI BOX | ||
RICORDATI DI CAMBIARE IL PUNTAMENTO ALLA TUA PAGINA PER OGNI BOX ▼ <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> |
COMMENTA ▼
Non sono presenti ancora recensioni.