Webmaster ⇒ Ressources du web facebook twitter youtube

Générateur CSS | Générateur CSS


Les générateurs et outils CSS  facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste de ressources CSS à connaître et à tester dès maintenant !

 

CSS3 Générateur

Générateur simple pour créer des simples propriétés CSS3 simples.

 

Css3-1-utile-online-générateurs à améliorer-workflow


 

CSS3Warp

CSS3Warp est une preuve de concept: créer Illustrator comme "déformé" texte (texte suivant un chemin irrégulier) avec Pure CSS et HTML.

 

7astuces générateurs Css3


 

CSS3 texte Générateur Ombre

Générateur d'ombre de texte CSS3 vous aide à insérer de beaux effets d'ombre à vos textes. Vous pouvez changer entre les différentes polices Web et d'explorer différents effets d'ombre comme le feu, 3D, des exemples d'acide et plus imprenable.

7astuces Générateur Ombre


Border Image Generator

Ce générateur vous permet de générer du code pour les propriétés de rayon de la frontière.

 


 

13. CSS3 Pie

PIE rend Internet Explorer 6-8 capable de rendre plusieurs des plus utiles CSS3 décoration caractéristiques les.

 

7astuces Border-image


 

14. CSS3 Sandbox

7astuces Border-image

 

 

 

1. Bear CSS 8. CSS3 Button Generator 15. Lorempixel
2. CSS Type Set 9. Ultimate CSS Gradient Generator 16. HTML Ipsum
3. Border Radius Generator 10. CSS3 Gradient Generator 17. CSSWarp
4. CSS3 Generator 11. 3D CSS Text 18. Compare Ninja
5. CSS3 Generator 12. Variable Grid System 19. CSS Ribbon Generator
6. CSS3 Please 13. CSS Load 20. CSS Opacity Generator
7. CSS3 Maker 14. CSS Arrow Please 21. prefixMyCSS

1. BEAR CSS

Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). Ainsi, vous gagnerez du temps au démarrage de la conception du style CSS. A noter que le balisage HTML5 n’est pas correctement géré.

Générateur CSS 7astuces

2. CSS TYPE SET

CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. Saisissez votre texte puis configuez son apparence en utilisant la barre d’outils : police, alignement, taille, couleur, etc. Une fois le style terminé, il ne vous reste plus qu’à récupérer le code CSS généré.

Générateur CSS 7astuces

3. BORDER RADIUS GENERATOR

Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. Le code est automatiquement généré avec un aperçu. A noter que la propriété n’est supportée par Internet Explorer qu’à partir de la version 9.

Générateur CSS 7astuces

4. CSS3 GENERATOR

CSS3 Generator est un générateur CSS3 spécialement conçu pour utiliser quatre propriétés en particulier : les bords arrondis (border-radius), les ombres (box-shadow), les dégradés de couleur (gradient) et l’opacité (opacity). La compatibilité IE7+ est assurée grâce aux filtres Microsoft.

Générateur CSS

5. CSS3 GENERATOR

CSS3 Generator (même nom que le précédent) est un générateur CSS3 qui dispose de toutes les propriétés CSS3 classiques telles que border-radius, box-shadow, ou gradient, mais également des propriétés plus pointues comme transform, transition ou encore box-sizing. Bref, un générateur simple et complet.

Générateur CSS

6. CSS3 MAKER

CSS3 Maker est un des générateurs CSS3 les plus complets du moment, qui met à disposition l’ensemble des propriétés telles que border-radius, box-shadow, gradient, transform, animation (via les keyframes), ou encore transition. Bref, tout y est, avec indication précise de la compatibilité navigateur. Vous pouvez également télécharger la source.

Générateur CSS

7. CSS3 PLEASE

CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. Tout comme CSS3 Maker, il propose l’essentiel des propriétés existantes sous forme d’un éditeur de code où chaque ligne est éditable avec un aperçu du rendu final : border-radius, box-shadow, gradient, transition, @font-face, etc… Le tout accompagné des filtres Microsoft pour le support IE6+.

Générateur CSS

8. CSS3 BUTTON GENERATOR

CSS3 Button Generator est un générateur de bouton CSS3. Pas besoin de saisir une seule ligne de code, ni d’utiliser d’image. Le service met à disposition une interface permettant de configurer le texte du bouton, la box, la bordure, le background, et l’état « hover ». Point négatif non négligeable : le code CSS généré n’inclut pas le support d’Opera qui utilise pourtant plusieurs propriétés sans préfixe (ex : border-radius).

CSS3 Button Generator

9. ULTIMATE CSS GRADIENT GENERATOR

Ultimate CSS Gradient Generator, service développé par ColorZilla, vous permet de générer des dégradés CSS3, aussi bien « linear » que « radial », via des sélecteurs de couleurs et des curseurs. L’interface n’est pas sans rappeller Photoshop, et la création d’un dégradé personnalisé est très intuitive. Probablement ce qui ce fait de mieux en génération de « gradient » !

Gradient Generator,

10. CSS3 GRADIENT GENERATOR

CSS3 Gradient Generator est un générateur qui se focalise sur les dégradés à l’aide d’un ColoPicker. Facile à prendre en main, vous pouvez ajouter autant de couleurs que vous le voulez, les déplacer dans votre dégradé, et choisir la direction de celui-ci via des axes (horizontal, vertical, ou diagonale). Un des seuls générateurs à concurrencer Ultimate CSS Gradient Generator vu précédemment.

 GRADIENT GENERATOR

11. 3D CSS TEXT

3D CSS Text est un générateur de texte en trois dimensions. Le service utilise la propriété CSS text-shadowet génère plusieurs ombres pour simuler un effet de 3D. Vous pouvez paramétrer très précisément cet effet, notamment sa hauteur, son dégradé, son opacité et son angle d’inclinaison.

générateur de texte en 3d

12. VARIABLE GRID SYSTEM

Basé sur le framework CSS 960 Grid System, le service Variable Grid System propose une interface simple de personnalisation de grille avec plusieurs options telles que le nombre de colonnes, la largeur des colonnes, et la largeur des marges. C’est un moyen rapide de générer une grille CSS sous-jacente calquée sur le standard 960 Grid System.

Variable Grid System

13. CSS LOAD

CSS Load est un générateur d’icônes de chargement (aussi appelées loader) entièrement en CSS, animation comprise. Vous devez choisir l’une des huits icônes proposées pour configurer vitesse d’animation, couleurs, et dimensions. L’animation est gérée via les keyframes CSS3 ; leur fonctionnement est proche de celui de la fonction jQuery animate().

 générateur d’icônes de chargement

14. CSS ARROW PLEASE

CSS Arrow Please est un générateur de box avec flèche directionnelle, similaire à une infobulle, le tout conçu entièrement avec des propriétés et des pseudo-classes CSS. Le service propose quelques options pour la personnalisation (position, taille, bordure, etc) et crée automatiquement le code CSS associé.

générateur de box avec flèche directionnelle

15. LOREMPIXEL

Lorempixel (anciennement Lorempixum) est l’équivalent du célèbre Lorem Ipsum pour les illustrations ! Un service très pratique pour intégrer un template HTML/CSS avec des images temporaires. Plus besoin de passer par Photoshop pour avoir des images aux bonnes dimensions ; il vous suffit de choisir la taille désirée, et le tour est joué ! Le service vous fournit alors une URL à insérer directement dans l’attribut srcde votre image.

Lorempixel

16. HTML IPSUM

HTML Ipsum, toujours en référence à Lorem Ipsum, est un service qui propose différents type de contenu HTML : paragraphe, liste ordonnée ou non-ordonnée, ou encore diverses balises (h1, h2, h3, a, strong, etc). Cela s’avère très pratique, par exemple pour simuler un texte structuré dans un WYSIWYG ou directement dans du code HTML.

HTML Ipsum

17. CSSWARP

Similaire au rendu du plugin jQuery Bacon, CSSWarp est un générateur CSS3 disposant d’une interface facile à prendre en main pour déformer « physiquement » votre texte selon un cercle ou une courbe de Bézier. Pusieurs paramètres sont disponibles tels que l’ajout de points à la courbe, l’incurvation, ou encore l’alignement du texte.

générateur CSS3

18. COMPARE NINJA

Compare Ninja est un service vous permettant de créer en quelques minutes un tableau comparatif HTML/CSS avec un design personnalisé et attrayant ; choisissez un thème existant, le nombre de colonnes, le nombre de lignes, puis remplissez votre tableau avec des données. Le code HTML/CSS généré est valide W3C.

tableau comparatif HTML/CSS

19. CSS RIBBON GENERATOR

CSS Ribbon Generator est un générateur de rubans (ou ribbons) ; une des dernières tendances du webdesign. Il suffit de choisir un des quatre modèles pour le personnaliser (id et classes CSS, couleur, taille, ombre) à l’aide d’une prévisualisation. Une fois terminé, vous obtenez le code HTML/CSS correspondant prêt à l’utilisation (compatibilité IE7+).

CSS Ribbon Generator

20. CSS OPACITY GENERATOR

CSS Opacity Generator est un générateur d’opacité CSS. Il vous suffit de déplacer un curseur pour faire varier la valeur de l’opacité de l’aperçu. Le service génère alors automatiquement le code CSS correspondant pour les navigateurs modernes, mais également les filtres pour le support IE.

générateur d’opacité CSS

21. PREFIXMYCSS

prefixMyCSS est un service qui permet de rendre compatible des propriétés CSS avec tous les navigateurs en leur rajoutant les préfixes lorsque c’est nécessaire. Ainsi, vous pouvez rendre votre feuille de style « cross-browser » sans ajouter la moindre ligne de code ; l’outil le fait pour vous.

compatible des propriétés CSS avec tous les navigateurs

>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces