10 générateurs de CSS qui vous feront gagner beaucoup de temps

Si vous créez des sites avec WordPress et construisez des themes WordPress « de vos propres mains », vous avez probablement déjà une certaine expérience du CSS. Un fait a déjà dû s’imposer à vous: certaines fonctionnalités sont très compliquées à coder directement. Pour cette raison, nous vous suggérons d’utiliser des générateurs de CSS pour les fonctionnalités en questions.

1. Générateur de neumorphisme

Le neumorphisme est un néologisme issu de deux mots en anglais: « new » et « skeuomorphism ». En anglais, il est aussi appelé « soft design » (design doux). Ce style graphique postule qu’un design devrait ressembler à l’objet auquel il réfère dans le réel. Par exemple, un bouton digital devrait ressembler à un bouton dans la vraie vie. Ce style peut être compliqué à créer en CSS, car il implique beaucoup de paramètres.

Voir le générateur

2. Générateur de boutons CSS

Il est assez simple de créer des boutons de base en CSS. Cependant, si vous voulez ajouter plus de styles et d’effets à vos boutons, vous seriez bien inspiré d’utiliser un générateur de boutons CSS.

Vers le générateur de boutons CSS

3. Générateur de border-radius complexes

Si vous êtes un web designer expérimenté, vous utilisez sûrement régulièrement des border radius et les propriétés relatives les plus courantes, mais savez-vous que vous pouvez créer des formes avancées à l’aide de la propriété border radius? Le générateur de « Fancy CSS Border Radius » vous offre un excellent outil pour le faire en quelques secondes.

Essayez-le sur cette page

4. Générateur d’ombres portées

Il est difficile de créer des ombres portées en codant à la main en CSS, car on ne peut pas visualiser ce qu’on qu’on est en train d’écrire. Vous pouvez évidemment travailler dans l’inspecteur du navigateur pendant que vous regardez le résultat en direct, mais il est beaucoup plus facile de travailler avec un générateur de CSS.

Essay le générateur d’ombres portées CSS

5. Dégradés fluides en CSS

Préparez des dégradés fluides qui donnent un rendu presque parfait, sans les lignes intempestives qui abîment celui-ci.

Créez un dégradé parfait en CSS

6. Générateur de grille de mise en page CSS

Chez WP Expert, nous n’utilisons habituellement pas de générateur de grille de mise en page CSS, car nous créons la plupart de nos sites à l’aide du Framework Foundation, mais si vous êtes motivés à écrire 100% de votre CSS, un générateur de grille de mise en page vous sera très utile.

Essayez-le ici

7. Générateur de palette chromatique CSS

Travailler avec des couleurs en CSS peut être un peu ennuyeux par moments, principalement à cause de l’utilisation de couleurs hexadécimales. L’utilisation d’un générateur de palette chromatique est une bonne manière de gagner du temps, particulièrement quand l’outil en question vous permet de copier toutes les couleurs en un clic.

Essayz le générateur de palette CSS

8. Générateur d’effet accordéon en CSS

Vous savez ce qui est mieux qu’un effet accordéon classique sur un site internet? Un effet accordéon fabriqué en CSS uniquement! Grâce à l’outil en ligne ci-dessous, vous pouvez le créer très simplement.

Essayez l’outil en ligne

9. Vagues SVG

Cet outil n’est pas exactement un générateur de CSS, mais assez proche et très pratique, car il vous permet de créer des vagues SVG en quelques clics. Une option nettement meilleure que de devoir travailler dans Illustrator ou un autre logiciel pour ce même effet.

Essayez ce générateur en ligne

10. Masques CSS

La possibilité de créer des masques CSS sur des images est une fonctionnalité bluffante, mais malheureusement sous-utilisée, car compliquée à mettre en oeuvre. Heureusement, ce générateur en ligne vous permet de créer des masques CSS très rapidement et simplement, sur la base de formes pré-définies que vous pouvez facilement modifier.

Tester les masques CSS

Ce billet vous a été utile?
Offrez-nous un café!
Categories: Ressources
Tags: