Générateurs CSS3 pour démarrer du bon pied

Vous vous sentez d’attaque pour créer votre propre site ou faire une refonte d’un site existant en utilisant les fantastiques possibilités que vous offrent les propriétés CSS3 ? Cet article est pour vous.
J’ai concocté pour vous, chers followers, cette liste d’outils qui vous aideront à arriver à votre faim plus facilement. La liste rassemble des générateurs CSS3 ou ‘CSS3 Maker’ ainsi qu’un template CSS3 en bonus compatible sur tous les navigateurs à partir du quel vous pouvez débuter.

Les générateurs CSS3 :

http://css3please.com/

Ce générateur CSS3 reprends un nombre limité de propriétés affichées sur la gauche. Vous pouvez modifier en ligne les différentes valeurs des propriétés qui sont soulignées d’une ligne en pointillés blancs. Les modifications seront immédiatement répercutées sur le bloc situé en haut à droite du site pour avoir un rendu réel.

Il est également possible de désactiver complètement une propriété CSS3 si vous n’avez pas la moindre idée de ce qu’elle fait en cliquant sur les liens situés juste au-dessus de la définition de cette dernière.
Certaines des propriétés du générateur CSS3 sont désactivées par défaut comme celle destinée à incliner la boite qui est particulièrement bluffante. De plus, elle est compatible avec toutes les versions d’Internet Explorer.

http://css3generator.com/

Super générateur CSS3 qui dispose également d’une dizaine de propriétés CSS3. Vous choisissez celle de votre choix sur le menu déroulant principal. En général, une question supplémentaire vous sera posée comme par exemple si vous souhaitez avoir les 4 côtés de la boite de prévisualisation avec le même diamètre de courbure ou si vous voulez avoir des coins arrondis d’un diamètre différent. Dans ce cas, une interface différente sera affichée. Par la suite, vous n’aurez plus qu’à mettre vos valeurs et voir le résultat sur la droite.

Il n’y a pas de surprise avec ce générateur CSS3, il offre une fonction particulièrement intéressante qui donne les versions exacte de tous les navigateurs compatibles avec la définition générée suivant vos valeurs.

http://www.css3maker.com/

CSS3 maker est un générateur CSS3 ayant une interface un peu plus aboutie. Vous pouvez choisir la propriété que vous souhaitez étudier soit par le menu déroulant situé en haut à gauche sur la page d’accueil, soit par le menu horizontal du site.

Le site est divisé en 7 parties : la première regroupe toutes les données paramétrables. La seconde est la prévisualisation de la définition. La troisième partie est le code CSS téléchargeable à intégrer dans vos pages pour avoir l’effet désiré. Deux des trois blocs suivant sont destinés à promouvoir les développeurs qui ont codé cette définition et pour envoyer des suggestions. Le troisième est bien plus intéressant : il regroupe non seulement les navigateurs et leurs versions respectives compatibles avec la propriété mais aussi les différents modèles de téléphones mobiles. Le dernier bloc étant un bloc de publicités.

Template CSS3 et HTML5

Voici donc le petit bonus : un site en HTML, CSS et JavaScript rapide et compatible sur tous les navigateurs.

Le template regroupe les meilleurs pratiques en terme de normslisation et optimisation pour en améliorer les performances. Il y a aussi un peu d’Ajax et un fichier htaccess qui contient les règles de mise en cache de vos fichiers, activation du gzip etc. Ce n’est pas un framework, c’est juste un point de départ, c’est déjà ça. (Partez de l’index.html)

Télécharger le template CSS3

Le top 10 des propriétés CSS3 : compatibilité inter-navigateur
Les règles d’or de la création d’une newsletter

Laisser un commentaire

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