RSS
Je fais actuellement des recherches pour mettre en place un atelier d'initiation au CSS pour les enfants. J’explore ce qu’il est possible de faire dans un temps raisonnable et en essayant d’avoir un côté ludique marqué.
Je suis arrivé à la conviction que cela était possible à condition de prévoir quelques outils, pour les tâches répétitives. Dans ce cadre, je viens de publier un premier jet d’une application web: un générateur de fond d’étoiles.
J’ai prévu quelques améliorations en particulier sur la configuration de la génération des couleurs, la solution actuelle est un peu trop simpliste.
Le principe de fond d'écran s’appuie sur la propriété box-shadow de CSS. Il s’agit de faire une ombre à une boite.
Si on met sur une balise div le style box-shadow: 5px 10px #888888 on obtient une ombre de la même taille que cette balise div mais décalé de 5 pixels à droite et 10 pixels vers le bas de couleur grise.
Essayer l’exemple de w3schools pour comprendre.
L’idée ici est de détourner cette ombre pour faire plein d’étoiles.
Le truc à savoir c’est qu’il est possible de faire autant de boites que l’on souhaite.
Essayer de modifier la page de l’exemple avec le code suivant :
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #000, 5px 10px #888888, 12px 15px #555, 25px 20px red ;
}
</style>
</head>
<body>
<div id="example1">
<p>A div element with a lot of shadows.</p>
</div>
</body>
</html>
On a 3 ombres successives avec des couleurs différentes – et oui l’exemple est super moche !
On va donc fabriquer des boites de 1 à 5 pixels et on a presque l’effet souhaité – il reste juste à faire plein d’ombre décalées dans tous les sens, mais il faut vraiment faire plein d’ombres (genre 2000).
Voila tout le secret de ce générateur.
Si on se réfère à la documentation de Mozilla sur box-shadow on peut voir qu’il est également possible de configurer d’autres champs: offset-x | offset-y | blur-radius | spread-radius | color.
Il me semble qu'en ajoutant (dans certain cas) un blur-radius et/ou un spread-radius on devrait arriver à faire des choses sympas.
Concernant le générateur :
- Comme dis plus haut, il faudrait prévoir plusieurs algorithmes de génération de couleurs, j’ai quelques idées pour obtenir quelques choses soit de réaliste, soit de plus fantaisiste.
- Il y a une option pour générer le code pour animer tout cela, mais l’animation aussi demande à être configurable. Actuellement, plus les étoiles sont petites, moins elle vont vite – la fonction est linéaire.
ᦿ
-
Vos commentaires
Pas encore de commentaire - ajouter le votre.
-
Ajouter votre commentaire