Vanilla JS : créer des éléments aux couleurs aléatoires photo

Vanilla JS : créer des éléments aux couleurs aléatoires

par · Lecture: 19 minutes

Créer des éléments HTML en JavaScript natif reste l’un des meilleurs exercices pour comprendre le DOM. Pas besoin de React, Vue ou jQuery pour ajouter des blocs, leur donner du contenu, puis leur appliquer des couleurs aléatoires.

Dans cet exemple, nous allons créer des cartes en Vanilla JS, générer une couleur de fond aléatoire, choisir automatiquement une couleur de texte lisible, puis injecter les éléments dans la page proprement.

L’objectif : produire un code simple, moderne, performant et accessible.

Lire Vanilla JS : créer des éléments aux couleurs aléatoires

Réalisation de votre projet web photo

Réalisons votre projet WordPress ou WooCommerce

par · Lecture: 9 minutes

Nos compétences au service de vos besoins

Stratégie

Nous étudions le parcours de votre site et vos besoins pour vous fournir une solution à long-terme, qui correspond à votre vision.

Développement

Vous souhaitez ajouter de nouvelles fonctionnalités à votre site ou boutique? Nous pouvons coder la solution!

Performance

Votre site doit être rapide et optimisé sur tous supports afin de convertir vos visiteurs. Nous auditons votre site et proposons la solution adaptée.

Hébergement

Vos projets ont besoin d’un hébergement de qualité, c’est la fondation de votre site web et elle doit être solide car c’est sur elle que tout repose.

Maintenance

Votre site a besoin d’une maintenance régulière afin de toujours utiliser la dernière mouture du code et rester sécurisé face aux menaces.

Assistance

Vous avez besoin d’aide ponctuelle? Pas de problème, nous sommes à votre écoute pour vous dépanner rapidement et sereinement.

Soumettez votre projet

Lire Réalisons votre projet WordPress ou WooCommerce

CSS: superposer du texte lisible sur une image de fond photo

CSS: superposer du texte lisible sur une image de fond

par · Lecture: 7 minutes

Superposer du texte sur une image de fond est très courant : hero de page d’accueil, bannière d’article, carte produit, section d’appel à l’action, couverture WordPress… Le piège, toutefois, consiste à poser du texte blanc sur une belle photo et à croiser les doigts.

Mauvaise nouvelle : les yeux de vos visiteurs ne fonctionnent pas en mode “inspecteur CSS”. Si l’image est claire, chargée ou très contrastée, le texte devient vite illisible.

Bonne nouvelle : une simple couche sombre, appliquée en CSS, règle le problème proprement.

Le principe : ajouter un overlay entre l’image et le texte

Pour rendre un texte lisible sur une image, on ajoute généralement un voile sombre au-dessus de l’image. Ensuite, on place le texte au-dessus de ce voile.

La méthode la plus simple consiste à utiliser plusieurs arrière-plans CSS avec background-image : d’abord un dégradé semi-transparent, puis l’image.

Lire CSS: superposer du texte lisible sur une image de fond

Articles suivants →