Agence d'illustration en France, Agents d'illustrateurs: Illustration Ltd CSS Reset | 2015's most common CSS Resets to copy/paste, with documentation / tutorials Techniques pour intégrateurs : Le SVG sous toutes tes formes #5 Dernier article des techniques d'integrations centrees sur le SVG sur le BlogDuWebdesign. Au programme : Interactions avec le Javascript et path. S'aider du SVG pour les problemes de responsive Cet article est le cinquième d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article. Étant donné que le SVG est un sujet assez difficile d'accès, j'ai fait un article plus tôt dans le mois permettant de faire un tour d'horizon des bases : Techniques pour intégrateurs : Le SVG sous toutes tes formes #2. Enfin, l'article d'aujourd'hui demandera beaucoup plus de connaissances en Javascript que les articles précédents. Exemple 3 : Animated SVG Path by Matt Litherland Notre exemple du jour n'a peut-être pas l'air très intéressant, mais ce sera l'exemple parfait pour notre sujet : animer un élément en suivant un "path" Svg défini à l'avance.
Envato Market 14 bibliothèques et outils CSS gratuits à utiliser sans hésiter De nombreuses ressources CSS open source sont disponibles sur le web pour vous aider à gagner du temps et à parfaire vos connaissances sur des spécificités du langage que vous ne maîtrisez peut-être pas encore. J’ai sélectionné dans cet article 14 bibliothèques et outils CSS gratuits qui viendront vous prêter main forte et vous faire gagner du temps lors de vos prochains projets web : outils, filtres photos, dégradés, couleurs, icônes, info-bulles, … 1. Hamburgers est une collection d’icônes hamburgers animés 2. Balloon.css est une collection d’info-bulles, 100% CSS. 3. StarWarsIntro vous permet de recréer une intro façon Star Wars, en CSS. 4. Spinners est une collection d’icônes de chargement animés en HTML et CSS. 5. Des icônes de chargement inline 100% CSS. 6. CSS Loader is une collection d’icônes de chargement utilisant uniquement une DIV et entièrement en CSS. 7. Une collection d’animations d’image au survol de la souris. 8. Une collection de 49 dégradés CSS. 9. 10. 11. WAIT! 12. 13. 14.
Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1 Et c'est parti pour le deuxième sujet des techniques pour intégrateurs. Au programme de ce mois de février : le SVG sous toutes tes formes, ses différents usages et comment l'utiliser. Ceux qui me suivent depuis longtemps le savent, le SVG est une technique que je trouve très intéressante mais qui reste malheureusement assez obscure pour moi. Pour changer cela et gagner un petit peu en expertise, j'ai donc décidé de sortir de ma zone de confort et prendre le SVG comme sujet pour ce mois de février. Mais ne perdons pas plus de temps à parler du programme des prochaines semaines et attaquons-nous tout de suite au premier article du sujet, avec cette liste de 20 ressources utilisant le SVG avec des techniques et buts très divers.
UI Space: PSDs - AI and other freebies resources reSmush.it > the 2 Billion (and still free) Image optimization API Techniques pour intégrateurs : Le SVG sous toutes tes formes #2 Aujourd'hui, le BlogDuWebdesign vous propose le premier article de cette série des techniques de l'intégrateur centrée sur le SVG. Illustrations animées en CSS : les bases Cet article est la suite de l'article Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article. Étant donné que le sujet du SVG a un gap de difficulté très agressif dès le départ, nous allons faire une petite exception pour février et ajouter un article. L'article d'aujourd'hui est donc ça pour expliquer les bases les plus simples du SVG, et nous nous retrouverons exceptionnellement mardi pour analyser notre premier exemple. Finalement, le SVG, c'est quoi ? Je ne sais pas si ce paragraphe servira à beaucoup d'entre vous, mais je pense important de commencer par une petite remise en contexte sur ce sujet finalement plus complexe et moins democratisé qu'on pourrait le croire. Créer un SVG
Tutoriel Vidéo Divers Avocode Lorsque l'on fait de l'intégration on est souvent obligé de travailler avec des fichiers PSDs qui nécessitent l'utilisation Photoshop. Le principal problème de ce logiciel est qu'il est conçu pour le traitement photo plutôt que le Webdesign. Inspecter les propriétés des calques et exporter les assets et loin d'être pratique. Certains designers ont même sauté le pas et utilisent maintenant Sketch plus adapté au webdesign. Le principal problème est alors l'accès au logiciel qui ne fonctionne que sur MacOS. Retour au Source Pour vous aider dans votre travail Source a commencé par développer des plugins pour Photoshop comme CSSHat qui permet d'obtenir le CSS correspondant à un calque. Avec Avocode Source propose une solution plus complète afin de pouvoir se passer de Photoshop et Sketch. Une interface travaillée La première chose qui saute aux yeux lorsque l'on ouvre Avocode c'est le travail qui a été fait sur l'interface. Avocode vs Adobe Extract
Techniques pour intégrateurs : Le SVG sous toutes tes formes #4 Second article de la semaine traitant du SVG sur le BlogDuWebdesign. Au programme : Responsive ! S'aider du SVG pour les problemes de responsive Cet article est le quatrième d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1. Étant donné que le SVG est un sujet assez difficile d'accès, j'ai fait un article la semaine dernière permettant de faire un tour d'horizon des bases : Techniques pour intégrateurs : Le SVG sous toutes tes formes #2. Si vous n'avez pas suffisamment de connaissances sur le sujet pour pouvoir lire et comprendre des balises SVG, je vous conseille de le lire avant de revenir finir cet article. Exemple 2 : Responsive SVG by Mike Ce pen n'est peut-être pas très impressionnant de prime abord, mais il a radicalement changé ma façon de voir le SVG, et je pense qu'il en sera de même pour vous. See the Pen Responsive SVG by Mike (@MadeByMike) on CodePen. Un autre element intéressant est à retrouver ligne 46 : mask.
Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. You can exclude a file from being prefixed by adding the data-noprefix attribute to the <link> or <style> element. Firefox (and IE?) Get the jQuery plugin now:
Techniques pour intégrateurs : Le SVG sous toutes tes formes #3 Aujourd'hui, le BlogDuWebdesign vous propose le second article de cette série des techniques de l'intégrateur centrée sur le SVG. Au programme : création et manipulation de SVG ! Le SVG: Création et manipulation Cet article est le troisieme d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article. Étant donné que le sujet du SVG a un gap de difficulté assez agressif (nous ne sommes pas face à dwarfs fortresses, mais avouons qu'il y a de quoi être intimidé ) j'ai fait un article la semaine dernière permettant de faire un tour d'horizon des bases : Techniques pour intégrateurs : Le SVG sous toutes tes formes #2. Ccomment créer un SVG complexe ? La semaine dernière nous avons pu avoir un aperçu du langage SVG, à la fois simple et particulièrement fastidieux. La réponse est simple : avec un logiciel dédié ! Les outils pour créer des SVG