Tous les articles dans HTML, CSS & SVG

Cours d’Initiation HTML et CSS – Apprendre les bases du langage pour créer des sites web

Cours d’Initiation HTML et CSS - Apprendre les bases du langage pour créer des sites web

Ce contenu a été rédigé il y a 1 année. Il se peut qu’il ne soit plus à jours.Un cours d’introduction aux langages HTML et au CSS pour les débutants La communauté web foisonne de ressources sur les dernières propriétés CSS3 et API HTML5 tendances, pourtant, il semble encore difficile de trouver des ressources fiables et faciles d’accès pour les débutants. Partant de ce constat, cela fait plus de 5 ans maintenant que j’interviens dans différentes structures, écoles et universités …Lire la suite

Exporter un SVG avec un pattern qui fonctionne dans IE/Edge depuis Illustrator CC 2015.

Astuce : exporter un SVG avec un pattern dans Illustrator CC 2015.

Ce contenu a été rédigé il y a 2 années. Il se peut qu’il ne soit plus à jours.TLDNR : pour le moment si vous devez exporter un SVG qui contient un pattern depuis Illustrator (CC 2015) qui fonctionne sur Internet Explorateur et Edge, utilisez Fichier > Exporter, puis choisissez “SVG” au lieu de Enregistrer sous > SVG. Vous ne pourrez également pas copier/coller directement vos “path” SVG depuis Illustrator vers un éditeur de texte. Lire l’explication complète en anglais. …Lire la suite

Un menu Responsive et Retina-Friendly sur Codrops

Ce contenu a été rédigé il y a 5 années. Il se peut qu’il ne soit plus à jours.Pour mon dernier article sur Codrops, j’ai voulu jouer avec les font-icons et les media-queries pour créer un menu responsive qui s’adapte aux tailles d’appareil et de navigateur. Les couleurs sont inspirées des armes Maliwan de Borderlands et le menu proposé a 3 différentes mises en pages : une navigation en  blocs en ligne avec une animation de box-shadow sur les différentes …Lire la suite

[A lire] “L’intégration web, cette leçon d’humilité” par Marie Guillaumet

[A lire] "l'intégration web, cette leçon d’humilité" par Marie Guillaumet

Ce contenu a été rédigé il y a 5 années. Il se peut qu’il ne soit plus à jours.Un superbe article et une leçon d’humilité par Marie Guillaumet qui nous parle du métier d’intégrateur aujourd’hui, avec tous nos doutes et nos incertitudes. Pas de réponse figée, de moins en moins de certitude dans nos métiers et un besoin de remise en question quotidien et d’humilité. La meilleure réponse que l’on puisse aujourd’hui généralement donner à nos collègues et nos client est …Lire la suite

[mobile] Charger des ressources de manière conditionnelle avec matchMedia()

[mobile] Charger des ressources de manière conditionnelle avec matchmedia

Ce contenu a été rédigé il y a 5 années. Il se peut qu’il ne soit plus à jours.A ParisWeb, suite à une réflexion de Vitaly Friedman sur les ressources chargée en web et  mobile first, nous avions avec Raphaël Goetter fait quelques tests de chargement conditionnel, notamment pour ne pas charger du tout une police @font-face sur la version mobile. Ces tests se basent sur window.matchMedia(). Christian Heilmann dans son article (en anglais) “Conditional loading of resources with mediaqueries” pousse cette méthode encore …Lire la suite

Sur Codrops : formulaire de login et sign up en HTML5 et CSS3

Ce contenu a été rédigé il y a 6 années. Il se peut qu’il ne soit plus à jours.La pseudo classe CSS3 :target permet d’utiliser des propriétés CSS en fonction de l’ancre ciblée avec un < a href = “#monancre” > . J’ai donc utilisé cette propriété, accompagnée de quelques transitions CSS3 et animations pour créer une démonstration de double formulaire de login / souscription en pure CSS3 et HTML5. Le principe est assez simple : deux formulaires, on propose …Lire la suite

Sur Noupe : tutoriel jQuery Mobile création d’une application web de choix de restaurant

Ce contenu a été rédigé il y a 6 années. Il se peut qu’il ne soit plus à jours.Noupe m’a demandé d’écrire pour eux au moment où je préparais mes cours pour les étudiants du Master2 Caweb qui portaient sur la mobilité et jQuery Mobile. J’ai donc décidé de reprendre un des exercices proposés durant ce cours, de l’améliorer un peu, pour le publier sous forme de tutoriel sur Noupe. La démo est une mini web-application créée en utilisant jQuery …Lire la suite

Formulaire de contact pur css3 html5 sans images

Ce contenu a été rédigé il y a 6 années. Il se peut qu’il ne soit plus à jours.J’avais envie de m’amuser avec les nouvelles fonctionnalités des formulaires html5 et les gradients css3, et l’idée qui m’est venue est est assez simple : créer un formulaire pure html5 Css3 sans utiliser une seule image. Voici le résultat, que vous pouvez voir dans une démo live ici. Attention, ce formulaire utilisant des techniques de css3 et html5 pas encore répandues dans …Lire la suite

Menu flexible en onglets en utilisant la propriété css3 border-image

Ce contenu a été rédigé il y a 8 années. Il se peut qu’il ne soit plus à jours.N’en avez vous parfois pas marre des coins arrondis uniformes ? N’avez vous parfois pas envie de créer des formes plus complexes ? En règle générale, pour créer des formes plus complexes il faut recourir à des images, ce qui génère un problème de flexibilité. La solution consiste souvent à créer nos images plus longues que le titres / objets le plus …Lire la suite