Astuce CSS : effet néon derrière une image

Astuce CSS : effet néon derrière une image

Et vive le dark mode !

La preuve que la lune est habitée c'est qu'il y a de la lumièreFrancis Blanche

Avez-vous vu le splendide dark mode de ce blog ? Si non, cliquez sur 🌗 en haut à doite...
Et tout à coup, un néon sauvage apparaît.

Pour réaliser ça, un peu de CSS, un peu de magie, et le tour est joué !

body[data-scheme=dark] .site-logo {
    filter: drop-shadow(0 0 15px #1d81c0);
    animation: flicker 1s ease-in-out infinite alternate;
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        filter: drop-shadow(0 0 15px #1d81c0);
    }

    20%, 24%, 55% {
        filter: none;
    }
}

C'est tout.

 


Partager sur les réseaux