Introduction aux images responsives, 1 : définitions. Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby.
Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide! Par Jason Grigsby Ces dernières années, j’ai écrit pas mal d’articles sur les images responsives. Maintenant qu’elles sont arrivées dans nos navigateurs, je me suis dit que c’était le moment de prendre un peu de recul et de revenir aux bases pour ceux qui commencent tout juste à s’y intéresser. Donc, voici une nouvelle série intitulée Responsive Images 101 ( NdT : le titre original) qui couvrira tout ce qu’il faut savoir, depuis les raisons pour lesquelles nous avons besoin des images responsives jusqu’à la façon de choisir la bonne solution pour notre site web adaptif.
Making SVGs Responsive - Demo 5. Du Retina et HD pour votre site web : image-set, picture et srcset. Retina, ou la haute définition de manière plus générale pour les images de nos sites web pose un problème relatif.
En effet depuis la sortie du premier Mac Book Pro à écran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ? Je fais partie des gens indécis sur la question, et du coup cette position me va très bien pour écrire cet article, car j’en attends vos réactions. Pour moi la HD, comme la 3D, fait partie de l’avenir de l’image, que ce soit au ciné, la télévision ou un écran d’ordinateur. C’est comme le son multicanal (plus connu sous le nom de son surround), aujourd’hui ça vous ferait bizarre d’aller au cinéma avec un son mono. Et bien pour la HD c’est pareil, dans quelques années nous ne pourrons plus nous en passer.
Voici les problèmes que j’ai pu relever, a priori, en pensant à l’intégration d’images HD : Je ne dis pas que cette liste est exhaustive. Un design nickel chrome Mais encore… Open Iconic, a free and open icon set. Displaying Open Iconic's SVGs are a snap.
Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute. SVG Sprite Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag. <head> ... Sizing icons only needs basic CSS. Coloring icons is even easier. Font Icon fonts are a great fallback for SVG—and our font is pretty great.
Head Body Bootstrap Font Use Bootstrap? Retina Images. Retina graphics for your website. How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server.
If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute. Foundation Icon Fonts 3.
Use 283 icons with 1 font A custom collection of 283 icons that are stored in a handy web font.
View All Icons » Style 'em with CSS A couple lines of CSS and the right markup will get you going in no time. How to Use Them » Create infinite variations Easily customize these icons to be any size, color and style in CSS. How these were built Here at ZURB, we created these icons with specific standards which gives a cohesive voice and style to develop an amazing font set for everyone to love, enjoy and use on their website. Geometric All icons are made with basic shapes like triangles, squares, rectangles and circles. After converting these vector icons into a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need which could be customized and stylized via CSS. App - Icon Font & SVG Generator.
Pictos.