Les 7 meilleurs générateurs css3 en ligne

Depuis CSS3, les feuilles de style ont révolutionné la création des sites web : des coins arrondis, des gradients, des transitions, des animations etc. Le seul problème vient des navigateurs qui ne sont pas tous au même niveau. L’introduction de nouvelles propriétés CSS3 se fait progressivement, avec des préfixes propriétaires (-webkit-, -moz-, ms-, …).

Ainsi pour obtenir des coins arrondis, la syntaxe recommandée par w3c est border-radius, mais certains navigateurs sont toujours en phase d’essai et utilisent les préfixes propriétaires (vendor). Pour être certain que la propriété soit reconnue par le plus grand nombre de navigateurs, il faut tenir compte de ces préfixes.

Il faudra donc ajouter :

-webkit-border-radius pour chrome et son moteur de rendu webkit

-moz-border-radius pour mozilla firefox et son moteur de rendu gecko

-ms-border-radius pour ms iexplorer

-o-border-radius pour opera etc

Pour être certain de ne pas se tromper et de ne rien oublier, on peut utiliser un préprocesseur comme less ou sass, ou utiliser un générateur de CSS.

C’est cette dernière option que nous allons regarder à la loupe dans cet article, d’autant plus qu’il existe de nombreux générateurs CSS3 en ligne. Certains générateurs ne manipulent qu’une ou deux propriétés, d’autres plus complets, auxquels nous allons nous intéresser,  proposent une large gamme de propriétés CSS3.

Voici donc les 7 meilleurs générateurs de CSS3 en ligne.

enjoy-css

Ce générateur de CSS3 en ligne est aussi efficace qu’une application logiciel. Son apparence soignée donne le ton. Ce générateur s’adresse à tous les créateurs web quelque soit leur expérience. Le plus de ce générateur vient de la possibilité de récupérer des codes CSS mais aussi du code des préprocesseurs Less ou SASS – Compass.

La prise en main vous prendra un certain temps, vu la complexité de l’application, mais l’apprentissage en vaut la peine.

Pour obtenir le code générer, cliquer sur le petit triangle bleu représentant le symbole de CSS3 en haut à droite.

create-css3

Voici probablement le générateur CSS3 à la fois le plus et le plus complet de web. Il aurait pu être en première position s’il ne proposait que du code CSS3 et SASS – Compass, sans Less. Vous me direz que ce n’est déjà pas mal et vous aurez raison. La simplicité de ce générateur séduit tout de suite. Il n’est donc pas nécessaire de donner des conseils d’utilisation tant sa prise en main est rapide. A tester.

 

generate-css

La philosophie de ce générateur CSS est différente des deux premiers. Au lieu d’offrir un seul générateur pour toutes les propriétés, ce site propose un ensemble d’outils de création de propriétés CSS3 ou de composants évolués comme des menus, des boutons ou des galeries. A la fin de votre création, le site force un peu la main pour que vous leur donniez un « like » ou un « tweet », mais si vous attendez 10 secondes vous pourrez récupérer les codes css et html sans contribution. N’oubliez par de modifier les noms des classes ou des id avant de les utiliser, pour un code plus sémantique.

 

css3-generator

Tout est dans l’image ci-dessus.  Simple et pratique, ce générateur reste néanmoins assez rudimentaire. Vous ne pourrez pas visualiser votre création en direct. Mais cette web application reste intéressante.

 

css3-maker

Un générateur de CSS3 très simple d’utilisation, qui manque néanmoins  un peu de mise à jour. Certaines propriétés largement reconnues aujourd’hui ne sont pas proposées.

 

css3 please

css3-please

Plutôt qu’un générateur de css, c’est une sorte de dictionnaire des propriétés css3 et de leurs écritures. En cliquant sur

Titre de la bascule
on peut voir l’effet obtenu sur l’image ci-dessus.

css matic

css-matic

Ce générateur offre 4 possibilités : gradient, border radius, box shadow et une originalité, avec la création de textures. Intéressant surtout pour les textures.

Il existe de nombreux autres générateurs CSS3, certains très performants dans leurs domaines, mais rarement complets. C’est pourquoi ils ne figurent pas dans cet article. Peut-être feront-ils l’objet d’un futur article ? En attendant, si ce billet vous a plu, n’hésitez pas à le partager. A bientôt.

Les recherches qui vous ont mené ici

  • editeur css en ligne (2)
  • generateur css (2)
  • generateur de css (2)
Ces articles pourraient vous intéresser :
2 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
monosnap
Un freeware pour des screencasts et screenshots enrichis

Vous souhaitez enrichir vos captures d'écran images ou vidéos, monosnap vous intéressera probablement. monosnap est un petit freeware avec de grandes...

gadget meteo site web
Un gadget météo pour site web.

Voici un petit widget météo pour site web pour afficher les prévisions de météo France. Météo Avignon © meteocity.com Comme...

Promotion twitter
Faites votre promotion sur twitter, avec click to tweet

Ce petit article présente un moyen simple et amusant de faire votre promotion sur twitter, par l'intermédiaire de vos visiteurs....

Fermer