Carte de France cliquable en SVG avec la librairie js Raphaël
Je vous propose de faire une carte cliquable des régions françaises (hors Dom Tom), le but ici est d’avoir une carte compatible avec les anciens navigateur (oui même notre ami IE) et sur un maximum de terminaux, donc adieu flash (Flash n’étant pas supporté sur les ipad, iphone et Android). On va donc se concentrer sur le format SVG (wikipédia) et surtout pour assurer la compatibilité avec les anciens navigateurs on va utiliser la librairie JS Raphael. Voici les étapes * Volontairement je ne m’étendrais pas sur la création du fichier SVG, mais sachez qu’avec un logiciel de dessin vectoriel comme inkscape, en sélectionnant un objet (les contours des départements par exemple) et en faisant Ctrl+ Maj + X (Editeur XML) la première ligne « d » correspond aux coordonnées dont nous avons besoin. Voilà vous avez téléchargé les fichiers, nous allons créer une simple page web nommée index.html, et un répertoire « js » pour nos fichiers javascript. Créer notre page web : <! Sources :
The Making of Octicons
Animating Along a Curved Path
This demonstrates how to animate the position of an element along a curve. Click the button or drag the dots to see the animation. You can use this example as a tool to find the right XY values for start, end, and control points that will give you the right shape path for your own animation on a curve. The curved line shown here between points 0 and 3 is just for preview purposes, and is not part of animation on a curve. To see anim along a path, click the button above, or drag point 0, 1, 2, or 3. The X and Y of point 0 is [92,103] The X and Y of 1, 2, and 3, are the sub-arrays in array value of "curve:" in the anim.set() Setting up the HTML First we add some HTML to animate. <div class="example"><button id="btn-animate" class='yui3-button'>Animate On Path</button><div id="demo">A</div></div> Creating the Anim Instance Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate. Changing Attributes Running the Animation Complete Example Source
20 @fontface Icon Sets
The pros for using @fontface icon sets far outweigh the cons. First of all, there are the obvious benefits of being infinitely scalable and being able to style them dynamically using any CSS property (color, gradients, shadow…). Secondly, its much easier to manage one single font file as opposed to juggling lots of individual images or having to create sprites. Thirdly, a single font file will only need a single HTTP Request for all the icons you use. And finally, just to round things off and finally convince you of the benefits of using @fontface icons, they look amazing. As @fontface icons are a relatively new trend that is slowly moving into the mainstream, there are very few icon-sets that are available in a font format. Modern Pictograms Number of Icons/Characters: 89 Price: Free License: Open Font License → Download Page: Modern Pictograms → Web Symbols Typeface Number of Icons/Characters: 77 Price: Free License: SIL Open Font License (OFL) → Download Page: Web Symbols Typeface → Fico
Beachfront B-Roll
HTML for Icon Font Usage
Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. You want the icon to enhance a wordYou want the icon to stand alone but still be functional or informational And our major goals here are: As good of semantics as we can getAs little awkwardness for screen readers as possible This ground has been treaded before, but I think the following techniques are a small step forward. Enhancing a word Let's say we have a header like "Stats" and we want to set it apart from other headers on the page and emphasize it's meaning. <h2 id="stats" class="stats-title">Stats</h2> Result: So to get that icon in there (remember we're talking font icons here, we can't just pad the left and use a background) we'll need to insert some content. Using a pseudo element is tempting because 1) they aren't read by most screen readers 2) we don't need dedicated markup for the icon which is a semantic ideal. But alas! And the CSS is: Hey, it works
Free Icon Fonts for Web User Interfaces
By Jacob Gube This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs). What are Icon Fonts? Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. And because they’re treated like web fonts, icon fonts: Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)Can be scaled on-the-fly if the user adjusts their web browser settingsCan be rendered with different colorsCan embody font- and text-related CSS properties (like text-shadow and gradient) See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page. To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage. Free Icon Fonts 1. Number of icons: 137. 2. Number of icons: 121. 3.
A roundup of great icon fonts
Icon fonts are incredibly useful when designing a site, and have a huge number of advantages over regular icons. Because they are delivered as a font file and embedded like a font, these icons are easily scalable, their color can be altered live, rather than having to edit images; along with that, various effects can be added via coding, such as shadows, stroke effects, or gradients, making them far more versatile than images. Here, we will be rounding up some of the best icon fonts the world wide web has to offer, for you to use on your sites. Fico Fico is a fantastic looking font, presented on a beautiful site, which makes it a joy to download and use. Pixelated Pixelated is a font which, despite all it’s charm, has a practical use. Entypo Surprisingly for a font with 100+ icons, Entypo comes completely free of charge, and like Pixelated, is available for commercial use. Uicons Iconic Iconic is an open source icon set consisting of 171 icons in various formats, including as a font. Sanscons
Icon Fonts are Awesome
Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="⇝"></span> Stats </h3> How To Use for Stand Alone Icons
