Ce site vous permettra précisément de styliser une image en CSS avec un code propre et aéré (à la différence des interfaces visuelles du Net). Ici, nul besoin de créer un compte ou de payer : ce service est totalement gratuit et ne vous engage à rien (il est financé par la publicité : un petit clic dessus est toujours apprécié) ! Pas besoin non plus de grande connaissances en informatiques : il vous propose une mise en page simple et ergonomique pour une facilité optimale ! Découvrez au travers de ces rubriques un large choix de mise en forme pour obtenir rapidement et facilement votre style CSS. Lancez-vous dès maintenant !

Styliser vos images possède de nombreux avantages ! Un site agrémenté de superbes images met plus en valeur son contenu ! En outre, plus la mise en forme des images sera soignée, plus votre site paraîtra attractif et moderne !

Pour cela, commencez par imaginer le thème de votre page WEB : les couleurs dominantes, la disposition des différentes sections, la taille du contenu... (cette étape est facultative mais conseillée : elle permet d'obtenir un site plus construit et attrayant) ensuite, vous pouvez styliser vos images en CSS ou sur Internet (vous êtes sur le bon site !).

Pour terminer, vous pourrez copier le code généré sur votre page WEB.

Cliquez sur la flèche pour démarrer.

1) Importer une image :

Commencez par choisir une image sur Internet.
Les formats principaux des images sur Internet sont GIF, JPEG (JPG), PNG et WEBP -bien que ce format ne marche que sur ordinateur et sur Intenet.
Adresse de l'image (vous pouvez cliquer droit sur n'importe quelle image du WEB et cliquer "Copier l'adresse de l'image") :

2) Styliser votre image :

Ci-dessous vous sont proposés divers réglages de mise en forme de votre image. Vous pouvez décider d'en laisser certains vierges si vous ne souhaitez pas les utiliser. Cliquer sur « Appliquer » pour voir vos modifications.

Taille de la largeur (en pixels) : px
Bords arrondis :
Epaisseur des bords (en pixels) : px
Couleur des bords :
Flou :
Noir et Blanc :
Opacité :
Rotation (en degrés) : °

3) Prévisualiser votre image :

Voici ce à quoi ressemblera votre image.

4) Définir la durée de la transition :

Vous pouvez choisir d'ajouter une transition fluide entre lorsque le curseur passe sur l'image et lorsqu'il en ressort. La durée de cette transition s'exprime en secondes. Il vous est conseillé de ne pas dépasser les 5 scondes car une animation classique dure environ 0.5 secondes.
Durée de l'animation : sec.

5) Styliser votre image au survol :

Ci-dessous vous sont proposés divers réglages de mise en forme de votre image au survol, c'est-à-dire lorsque vous passez le curseur dessus. Vous pouvez décider d'en laisser certains de côté si vous ne souhaitez pas de modifications au survol. Cliquer sur « Appliquer » pour voir vos modifications.

Taille de la largeur (en pixels) : px
Bords arrondis :
Epaisseur des bords (en pixels) : px
Couleur des bords :
Flou :
Noir et Blanc :
Opacité :
Rotation (en degrés) : °

6) Prévisualiser votre image au survol :

Voici ce à quoi ressemblera votre image lorsque vous passerez le curseur dessus.

Publicité :