21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et 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 non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 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). 2. CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. 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. 4. 5. 6. 7. CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. 8. 9.
10 générateurs de backgrounds et favicons Même si on a l’habitude de travailler avec un logiciel d’édition graphique, il peut être parfois plus rapide de récupérer et personnaliser des patterns de design déjà existants. Et si en plus des sites spécialisés vous permettent de le faire gratuitement, rapidement, et en toute légalié, pourquoi se priver ? Vous pouvez fermer Photoshop : Même si on a l’habitude de travailler avec un logiciel d’édition graphique, il peut être parfois plus rapide de récupérer et personnaliser des patterns de design déjà existants. Et si en plus des sites spécialisés vous permettent de le faire gratuitement, rapidement, et en toute légalié, pourquoi se priver ? Vous pouvez fermer Photoshop : voici 10 générateurs pour vos backgrounds et vos favicons. Générateurs de Backgrounds 1. Permet de réaliser des fonds striés et de télécharger votre création afin de l’utiliser dans un projet. 2. Idem, avec un fonctionnement très semblable. 3. 4. Pour dessiner des motifs de style tartan. 5. 6. Générateurs de favicons 1. 2.
SelectORacle: CSS Selector Tool English & Spanish translations of CSS2 and CSS3 selectors Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Simply enter one or more semi-colon separated selectors or rulesets into the following "Direct Input" area, or provide the URL of a stylesheet in the "URL Input" area. Best of all, the SelectORacle will flag potential errors and other problems, and it won't choke on any actual rules. Current notes and limitations Explainer Parser Potential expansion more internationalization of the translation text (help us out!) Comments, suggestions, critiques, or other feedback? Coding and expertise: Kevin Jacobs Idea and styling: Eric Meyer Massive bug squashing: Ian Hickson Special thanks to: John Aycock Inspired by a comment made by: Murray Summers Spanish Translation: Favio Manriquez Leon (though all mistakes are mine alone)
HTML Beautifier Online HTML Beautifier tool can process an html document and reformat it with a correct indentation of tags and syntax highlighting. By applying HTML beautifies to your HTML code will improve the layout and indent style of the resulting HTML code. When an html document is edited is very easy to mess the code making it unreadable. Especially if you use many nested DIVs (or even worse nested TABLEs) it can become difficult to remember how the document is structured. HTML Beautifier will help you to solve many of these problems. Beautification involves using white spaces like tabs and line-breaks to indent HTML code. This online tool will not fix your invalid tags. Online HTML Beautifier Information: Purpose of this Tool : HTML Beautifier, HTML Formatting, HTML Tags Formatting, Improve the HTML layout and indent style, HTML Tidy, Unpack HTML, Human Readable HTML, De-Obfuscate HTML Intended Audience : Webmasters, Web Developers, Website Designers, Programmers External Resources:
MC Benveniste- Cours HTML- CSS - Dreamweaver - Fireworks - Jquery pour web designers KNACSS MakeTemplate.com: CSS Tools Online JavaScript beautifier Quick and Easy jQuery Image Swap Here is a very quick and easy way to implement image swap on hover on your website using jQuery. With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page: Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below: Additional Notes: Refer to our later blog post – Create An Image Preloader For Image Swap Function Using jQuery – for a preload function to improve the image swap performance. For an example on how to use this to create a very simple jQuery gallery check out our tutorial – jQuery Image Swap Gallery.