Utiliser Grid ou Flexbox ?
Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout. Par Rachel Andrew
Arrière-plans avec CSS3 Backgrounds
CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale
Sass : Mixin ou Placeholder ?
Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux. Par Hugo Giraudel Quand j'ai commencé à m'amuser avec Sass il y a un an et demi, j'ai mis un peu de temps à comprendre la différence entre inclure un mixin et étendre un placeholder. En fait, la notion même de placeholder relevait un peu de la magie noire pour moi.
Oui, Flexbox est buggué – La Tête dans le Flux
À force de promettre monts et merveilles à propos de Flexbox, on finit par croire que ce module de positionnement est parfait et dénué de bugs. Bah non, sans surprise, Flexbox est buggué. Comme tous les autres. Ce n’est pas la faute à Flexbox hein, mais celle des navigateurs… même si au fond ça ne change pas grand chose pour nous.
Intégrer une vidéo dans un site web, compatible ie, firefox, safari, chrome, opera, iphone, ipad, android, …
Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise <video> et flash pour les navigateurs non compatibles ? Avec un code HTML qui affiche les liens vers 3 formats de fichiers vidéo dans cet ordre : HTML5 MP4HTML5 WebMHTML5 OGGFlash MP4 (pas besoin de FLV depuis la version 9 rev 3 de flash) Le navigateur sautera le format qu'il ne connait pas jusqu'à trouver celui qu'il sait lire.
De la géométrie avec CSS
Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires
Images responsive, flexbox et souci de ratio d'affichage
Sur plusieurs navigateurs (sauf Firefox) nous avons constaté au sein de différents projets à l'agence un petit bug concernant le module CSS3 Flexbox. Le constat est celui-ci : lorsque l'on place une image responsive directement dans un container en flexbox, l'image s'affiche avec un petit souci de proportions : Pour en savoir un peu plus sur l'explication de ce comportement (qui n'est en fait pas un bug) je vous laisse lire cet article. En résumé, la spécification Flexbox a changé il y a quelques temps et les flex-items bénéficient désormais d'un min-height / min-width de valeur auto (et non plus 0 comme avant), et ça change tout !
MotionComposer - Créez des contenus Web animés en Flash® et HTML5 !
Outil parfait pour les professionnels comme pour les amateurs, MotionComposer permet de réaliser facilement ses propres animations HTML5 ou Flash.Les animations et contenus web créés avec MotionComposer sont lisibles depuis n'importe quel navigateur et depuis n'importe quel support, y compris l'iPhone et l'iPad. MotionComposer vous facilite la vie Aucune ligne de code à écrire.
