Grade.js. This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
Download npm install grade-js Usage <! --the gradient is applied to this div as a background-image--><div class="gradient-wrap"><! Using CreateJS - EaselJS. In this tutorial we will be exploring the CreateJS suite of libraries.
CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries. EaselJS - Makes working with HTML5 canvas easy.TweenJS - For tweening HTML5 and JavaScript propertiesSoundJS - Lets you easily work with HTML5 audioPreloadJS - Lets you manage and coordinate loading of assets The first library we will look at is EaselJs. Lets get started! EaselJS is a library for working with the HTML5 canvas. To reference the above canvas you would use the following.
EaselJS comes with a Graphics class that exposes an easy to use API for generating vector drawing instructions and drawing them to a specified context. As you can see in the above code the commands are chainable ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) etc.. You can attach events to the shapes such as click, mousedown/over/out, etc, by using the on() method. How SVG Line Animation Works. I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself.
It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples. I have very little to add, except my brain just kinda figured it out, so I thought I would explain it one more time the way it clicked for me. Snap.svg - Home. 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.
SVG Fallbacks. If you like, you may skip straight to the fallbacks.
There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer. Alexey's technique looks like this: The idea was based on Jake Archibald's revisiting of the fact that browsers render the <image> tag like <img>.
What Displays The technique is pretty close to perfect in terms of what supporting and non-supporting browsers display. The part I got confused on was iOS 3 and 4. The point: it's weird to see <img> work and <image> not work in these cases. What Downloads Of course we also care about what gets downloaded because that affects page performance. But we run into an issue with Internet Explorer versions 9, 10, and 11 (a preview at this time). Findings if (! Cross Domain Canvas Images.
Le BlogDuWebdesign booste l'inspiration des intégrateurs #6. World atlas in svg and country information. Un logo cliquable SVG avec alternatives. “Responsive Webdesign”, “Retina”, “optimisation mobile”, autant de termes qui sont devenus de plus en plus présents dans nos quotidiens de designers et intégrateurs web.
Le nombre d’écrans dont la résolution permet l’affiche d’images en très haute qualité ne cesse d’augmenter : écrans Retina sur iPhone, téléphones Android, Mac Book pro et bientôt sur nos TV (à quand le frigo ?) , etc. Ces nouveaux écrans apportent de nouvelles perspectives, mais également un besoin grandissant de flexibilité.
Le format vectoriel semble être une excellente réponse à cette problématique. Cet article s'intéressera au format SVG qui propose une solution flexible : une seule image vectorielle, qui pourra être redimensionnée et s’afficher dans différentes tailles sur tout support sans perte de qualité.