PROVA
BACKGROUND 2 FREE
VISIBILE SU PC
Come funziona? Semplicissimo!
PRO
Su una tua pagina test del tuo sito inserisci un oggetto HTML 
Fai doppio click sull'oggetto HTML e su CODICE inserisci il listato che segue. Alla fine salva tutto.
PRO
Codice semplice da inserire su un oggetto HTML con copia-incolla
Il pulsante viene nascosto a partire dalla risoluzione 960px a scendere
Possibilità di cambiare lo sfondo in un Black puro nella parte del listato "Modalità Scura" attualmente in #333
Tempo di modifica su pagine già create meno di un minuto
CONTRO
Funziona solo su sfondi di pagina totalmente bianchi/trasparenti
Il codice va inserito su ogni pagina di interesse o che si vuole che si applichi l'effetto
INSERISCI IN CODICE | ||
<style> /* swapbackground ver.2 - Stile iniziale della pagina by MAX */ body { background-color: white; color: black; font-family: Arial, sans-serif; transition: background-color 0.3s ease, color 0.3s ease; } /* Animazione di entrata */ @keyframes slideInLeft { from { left: -80px; /* Parte fuori dallo schermo */ opacity: 0; } to { left: 5px; /* Posizione finale */ opacity: 1; } } /* Stile del pulsante */ .toggle-button { position: fixed !important; left: 5px !important; /* Assicura che questa sia la proprietà dominante */ top: 80% !important; /* Assicura che questa sia la proprietà dominante */ transform: translateY(-50%) rotate(-90deg); padding: 12px 20px; background: linear-gradient(45deg, #ff416c, #ff4b2b); color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(255, 65, 108, 0.5); transition: background 0.3s ease, transform 0.2s ease; white-space: nowrap; animation: slideInLeft 0.8s ease-out; /*Sovrapponi su tutto */ z-index: 999999999 !important; /* Valore massimo assoluto */ pointer-events: auto !important; /* Garantisce la cliccabilità */ mix-blend-mode: normal; } /* Modalità scura */ body.dark-mode { background-color: #333; color: white; } /* Assicura che tutti i testi siano visibili in dark mode */ body.dark-mode, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode p, body.dark-mode span, body.dark-mode a, body.dark-mode li, body.dark-mode div { color: white; } /* Cambia colore per i link in modalità scura */ body.dark-mode a { color: lightblue; } /* Nascondi il pulsante su schermi di larghezza 960px o inferiore */ @media (max-width: 960px) { .toggle-button { display: none; /* Nasconde il pulsante */ } } </style> <script> // Crea dinamicamente il pulsante sopra a tutto window.onload = function() { let btn = document.createElement("button"); btn.innerHTML = "Dark Mode"; btn.className = "toggle-button"; btn.onclick = toggleDarkMode; document.body.appendChild(btn); }; function toggleDarkMode() { document.body.classList.toggle('dark-mode'); } </script> |