The CSS Cascade
Or, How browsers resolve competing #CSS styles
We style our websites using CSS, which stands for Cascading Style Sheets.
But what does Cascading really mean?
-
-
ITCSS: Scalable and Maintainable #CSS Architecture - Xfive
▻https://www.xfive.co/blog/itcss-scalable-maintainable-css-architectureITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such a way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.
ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.
One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take the form of the inverted triangle
-
Tufte CSS
https://edwardtufte.github.io/tufte-cssTufte #CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.
If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.
Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.
-
Gnome : le poids des icônes — aris
▻https://aris.papatheodorou.net/gnome-le-poids-des-iconesGnome, l’environnement graphique pour systèmes GNU/Linux, viens de sortir une nouvelle version (3.32) comportant d’importantes améliorations au niveau des performances comme de l’ergonomie. Au passage, un nouveau set d’icônes fait son apparition…
Jakub Steiner, salarié de Red Hat et membre de l’équipe de design pour Gnome, avait expliqué en janvier 2019 sur son blog personnel les raisons d’un changement global du design des icônes de l’environnement de bureau, qui n’avait pratiquement pas évolué depuis une quinzaine d’années
#gnulinux #gnome #opensource #libre #interfaces #webdesign #icônes
-
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-jsaged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.
-
Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
►https://seenthis.net/messages/734575À suivre de prêt, cette initiative…
« Supported by Shuttleworth fundation »
-
-
-
Quand tu visites le #site #web d’un confrère qui a décidé d’ignorer les règles élémentaires d’ #accessibilité #accessibility #Webdesign
-
Priority Guides : A Content-First Alternative to Wireframes · An A List Apart Article
▻http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes-
C’est intéressant même si je ne suis pas d’accord avec le démarrage de sa réflexion sur le faire qu’un wireframe c’est forcément un dessin statique (et donc dans son argumentation pas responsive etc).
Du coup c’est déjà un peu ce qu’on fait, puisqu’on commence par mettre des blocs de contenu (faux ou plus précis suivant ce qu’on connait comme détails à ce moment) dans du HTML. Puis on style ce HTML en bloc que l’on place petit à petit. On pourrait aller plus loin et vraiment commencer par TOUT mettre en détail et faire valider cette liste de choses à placer dans un ordre de priorité, puis le styler une fois que c’est validé seulement.
Mais du coup ses documents de priorités il continue de les faire en pixels, alors qu’on peut parfaitement les faire en HTML directement (et donc au départ c’est mobile first tant qu’on n’a rien stylé oui mais on PEUT les styler ensuite, ce qui n’est pas possible avec un truc statique).
Bref, ça va dans le bon sens, mais je pense qu’il faut continuer à améliorer dans la voix de partir directement sur le HTML, jamais depuis un outil statique : aussi puissant qu’ils peuvent être (sketch etc), je trouve que c’est obsolète, des outils du passé, pour la majorité des cas.
#conception #web #prototype #design #maquette #méthodologie #bonnes_pratiques
-
Alors je suis tout à fait d’accord, je viens encore d’en faire les frais ^^ Les outils comme sketch ou autre enferme dans une reflexion « pixel perfect » qui effectivement viens du print ou tout du moins tendrait a y ressembler.
Le problème c’est aussi les gens qui utilisent le logiciel. Je retrouve les mêmes erreurs de conception de document, identiques a quand je faisais de la production et que j’executais les doc des directeurs artistique (ex 30 couleurs aucune dans le même format).
On récolte donc des protos, conçues par des gens qui n’on jamais intégré ou conscience du markup, ni des implications de leurs choix graphiques.
En exemple le plus courrant, des titres qui change de place suivant le mode mobile, mais change de bloc container : on se retrouve a dupliquer le code, a masquer en aria-hidden pour pas que les lecteurs vocaux double… bref moi j’aime pas et généralement on peut faire sans …
Ce sont des méthodes ou type de réflexion, qui vont a l’encontre du progressive enhancement, et du mobile first.
La en tout cas ce concept est intéressant car on pense la page en fonction du contenu réel : ce qui est totalement l’inverse des méthodes les plus couramment employées, encore largement tirés du print, sauf que l’ont à enlevé des étapes comme le calibrage ^^, et que maintenant on nous envoie le contenu quand le travail est fini, on marche à l’envers.
Il y’a quelques années, j’avais été intéressé, par un projet Project Hub lancé par Brad Frost (Atomic Design methodology) : ▻https://github.com/bradfrost/project-hub. En fait l’idée est de constatent garder le fil avec le client en le poussant a participer (genre Agile) . Je pense que l’implication, le suivi, le déroulement devrait faire partie d’un seul outil ou chaque intervenant à accès aux infos, a la timeline, des notifications rappels, guideline, …
Dans un outil qui gérerait l’ensemble de la progression, l’exemple cité dans l’article peut effectivement permettre au SEO, marketeux de faire leur sauce en parallèle de l’intégrateur, sans interférer avec la partie purement dev.
Je pense que réfléchir parallèlement ainsi pourrait éviter pas mal de problème pour ceux qui sont en fin de chaine, et surtout amener à se poser les bonnes questions sans penser QUE cosmétique mais contenu. Certainement un gain de temps aussi quand on travaille a plusieurs intervenants, …
-
-
Design Better Forms – UX Collective
▻https://uxdesign.cc/design-better-forms-96fadca0f49cform. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.
Voila une belle liste des erreurs que nous pousse a faire nos clients, et marketeux qui savent mieux que nous organiser une page agréable et raisonné ;-) . Perso on me les as déjà toutes faites quasiement et comme un lache de tâchon j’ai éxécuté … les ordres (appelé recommandations dans le monde du travail …)
-
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problemThis article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.
-
Mouais pas aussi cool que ce que je pensais à la base.
Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).
-
En fait c’est une version/vision du problème…
ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…
Dans les autres tendances et stratégies sur le meme sujet :
Elements queries :
Le draft de la spec proposée :
▻https://tomhodgins.github.io/element-queries-spec/element-queries.html
Un petit tour d’horizon du sujet et de la problématique :
▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries
Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css
▻https://github.com/marcj/css-element-queries
Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…
-
-
Timeline Me
TimelineMe - ▻http://mickaelr.github.io/jquery-timelineMe - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps.
-
Dans le même genre, j’avais fait celui la l’année dernière quand j’ai refait mon cv ^^
-
et le plug spip est ici ▻https://github.com/mistergraphx/spip_vtimeline
-
@mist_ merci pour l’info, je me ferai un plaisir de le citer dans la gazette dès qu’une doc sera dispo :)
Un truc non documenté n’existe pas
(ou uniquement pour son auteur ^^).
-
-
-
CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layoutsThe fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.
-
À la fin il donne le lien vers une super chaine pédago de Jen Simmons
▻https://seenthis.net/messages/670758 -
j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.
-
-
-
Il me semble qu’on avait un tag pour ça genre #art_directed_articles mais ya qu’un seen donc ça devait être autre chose
-
-
-
-
C’est parce que y a pas de « s » au tag @rastapopoulos (c’est juste @baroug qui a voulu faire son intéressant)
-
-
-
-
28 CSS Magazine Layouts | Free Frontend
▻http://freefrontend.com/css-magazine-layoutsCollection of HTML and CSS magazine layouts. Demo and download code (*zip).
Le jour où j’aurais le temps... j’en ferais bien mon p’tit #Spip !
-
-
-
-
Toujours :-) J’aimerais vraiment changer le design de mon site... :-)
-
-
-
-
-
Hi hi :-) Mais j’ai tellement l’impression d’y être un boulet :-)
-
moi je veux bien t’aider, mais j’ai une pratique tellement old school (tout est en HTML dans le Terrier) que je ne suis pas certain d’être très utile. Je peux faire des maquettes si on en cause (que tu me dis ce que tu veux) et confier la mise en forme css à un gars qui sait faire ce genre de trucs.
-
C’est adorable mais ce que je cherche c’est intégrer du SPIP dans un template HTML/CSS... :-)
Merci encore ! -
Tu veux un nouveau squelette plus « responsive », en gros ?
-
Oui, plus responsive, TRES typographique, plus fou que l’actuel que j’utilise...
Des choses comme
▻https://codepen.io/julesforrest/full/xLBbVb
▻https://codepen.io/julesforrest/full/yowMPw
ou mieux encore ▻http://www.mrmarcelschool.comAvec de beaux titres puisés ici
▻http://tobiasahlin.com/moving-lettersMais j’avoue que je suis resté bloqué en 2004 avec mes boucles... je suis totalement dépassé par les SPIP 2, 3, etc :-)
-
Bah, t’es déjà sous SPIP 3.2. Donc, c’est du squelette, surtout du squelette et beaucoup de CSS (on veut des grilles, hein !).
Tu es pressé ? C’est toi qui a tout fait sur ton site ? -
La dernière version on y avait un peu tous touché :p
Mais c’est pas « plus responsive », la version actuelle est déjà responsive (à part les commentaires, qui sont pas glop en petit). C’est changer l’ambiance graphique quoi (comme régulièrement) :)
-
@rastapopoulos , il a tout vrai :-) Beaucoup de gens m’ont aidé ---- comme toujours :-)
Là, j’aimerais bien refaire un squelette qu’on partagerait ensuite, comme feu ▻https://contrib.spip.net/TypoManiac :-)
En fait, je suis largué entre les Z, les Thèmes, les squelettes, les plugins Framework (boostrap et Foundation)...
Non, pas pressé mais un peu de temps d’ici le 20 décembre, alors j’aimerais en profiter un peu... :-)
-
-
-
Tes forums sont comme toi : tout parfait ! :-)
Merci l’ami ! -
Si vous avez deux minutes les amis :-)
▻https://forum.spip.net/fr_268641.html?debut_forums=%40268645#forum268645 -
On ne peut pas avoir l’inverse : avoir une image en N&B qui passe en couleur quand on la survole ?
-
Bah si mais en CSS, si tu produis par les filtres de SPIP une image de telle ou telle sorte, elle est comme elle est, tu peux plus la changer. C’est en CSS qu’il faut la passer en noir et blanc, et la remettre normal en hover.
-
-
Chers amis... J’avance bien (sommaire et article) mais je m’arrache les cheveux sur les css responsive...
Le titre des mes articles dépassent largement en version mobile...
Au secours :-)
-
Apparemment tu réutilises le javascript qui change la taille d’un texte pour qu’il rentre dans une largeur, comme dans ton précédent thème d’avant. Mais il semblerait qu’il merde une fois sur deux à trouver la bonne taille en petit écran. Quand je charge ça marche pas et quand je joue ensuite avec la taille de la fenêtre ça finit par retaille le texte comme il faut au bout d’un moment. Mais bon ça fait un truc super en hauteur. Ça serait sûrement mieux de ne pas l’activer en petit écran et d’écrire plus petit.
-
Tu as raison, j’ai repris ▻https://github.com/freqDec/slabText que j’adore...
Mais j’ai l’impression qu’avant le titre, le probleme est d’abord le « bloc » (cadre) dans lequel ce titre s’inscrit.... J’ai du mettre trop de padding, machin :-)
Pour reprendre ton idée, comment « interdire » cette utilisation du JQuery sur les téléphones ?
Ma feuille de style est ici
www.davduf.net/lab/squelettes/css/perso.cssMille mercis :-)
-
Pour ne pas encombrer SeenThis, j’ai ouvert ceci :-)
▻https://forum.spip.net/fr_268680.htmlAu secours :-)
-
-
Auto-héberger les polices #Google Fonts sur #WordPress | Angristan
▻https://angristan.fr/auto-heberger-polices-google-fonts-wordpressMais c’est surtout l’aspect vie privée, qu’il est difficile de ne pas évoquer dès que l’on touche à un service Google, puisque chaque visiteur va devoir télécharger quelques fichiers depuis les serveurs de Google. Et donc on a presque un service similaire : avec votre adresse IP et votre user-agent, Google va pouvoir vous suivre sur tous les sites qui utilisent Google Fonts et donc exploiter ces donnée à des fins commerciales par exemple. Bref ça pue, ça apporte pas grand chose, alors ça dégage.
Je vous invite donc à éviter ce genre de CDN, et à lire cet article de Pepper & Carrot : « My fight against CDN libraries » .
-
mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )
Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).
Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.
-
Tu peux être plus explicite ?
-
Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).
▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress
Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.
-
-
Text-only news sites are slowly making a comeback. Here’s why. | Poynter
►https://www.poynter.org/news/text-only-news-sites-are-slowly-making-comeback-heres-why
▻https://www.poynter.org/sites/default/files/2017-09/Text+sites.pngThese text-only sites — which used to be more popular in the early days of the Internet, when networks were slower and bandwidth was at a premium – are incredibly useful, and not just during natural disasters. They load much faster, don’t contain any pop-ups or ads or autoplay videos, and help people with low bandwidth or limited Internet access. They’re also beneficial for people with visual impairments who use screen readers to navigate the Internet. (Related: Designing Journalism Products for Accessibility.)
In recent months, Twitter, Facebook, and Google News have also published their own versions of stripped-down sites that use less bandwidth, mainly aimed at users in emerging markets who might not have access to faster network connections. Earlier this week, Twitter announced that it was now experimenting with an Android app designed to use less data for people with limited connectivity.
-
la cuisine du graphiste : Quelles #typo iraient bien ensemble ?
▻http://www.lacuisinedugraphiste.net/2017/09/quelles-typo-iraient-bien-ensemble.htmlLe site est très complet et il permet de travailler les approches, les interlignages etc pour avoir une vision la plus fidèle possible de ce que l’on désire.
À noter que c’est conçu pour les travaux digitaux. Les corps sont en pixels, les styles sont en CSS…-
▻http://typecast.com est bien et a l’air plus complet et plus simple je crois (et pas que en pixels, on peut vraiment tout mettre en « em » et télécharger les CSS produites à la fin etc)
-
C’est sûr que c’est top TypeCast mais ▻http://www.archetypeapp.com est très bien comme outil de base (et on peut tout à fait travailler en em ou en %, exporter les CSS ou même les intégrer dans Sketch). Il ne nécessite pas de s’enregistrer, permet avec le ratio des tailles de typos de faire un prototypage rapide, propose une aide pour choisir une police.
-
-
-
Comment devenir ergonome UX ? - romy.tetue.net
▻http://romy.tetue.net/comment-devenir-ergonome-uxVous êtes plusieur·e·s dernièrement à me demander comment devenir ergonome ou UX designer. Ces profils sont effectivement de plus en plus recherchés. Si ce n’est pas votre futur métier, ça peut être une corde de plus à ajouter à votre arc de dev front, de graphiste ou d’expert a11y.
Sans prétendre avoir la bonne réponse et sans chipoter sur la dénomination (ergonome ou UX designer, osef), je peux au moins témoigner de ce qui m’a forgée, en partant du principe que si vous me posez la question, c’est que vous souhaitez vous orienter vers quelque chose qui ressemble à mon job actuel, c’est-à-dire l’UX design ou conception centrée utilisateur/trices.
-
Les do-don’t de l’accessibilité - romy.tetue.net
▻http://romy.tetue.net/affiches-do-dont-accessibiliteCette série d’affiches aide à concevoir pour tou·te·s en expliquant ce qu’il faut faire et ne pas faire (do & don’t) pour chaque type de déficience. Ces conseils simples et compréhensibles, généraux plutôt que trop prescriptifs constituent une excellente entrée en matière. À afficher, sans modération, dans vos locaux !
Sources : ▻https://github.com/UKHomeOffice/posters/tree/master/accessibility-
Chère @tetue , je profite que le sujet est ouvert : je voudrais pouvoir transmettre à mon éditeur, pour mon prochain roman, des recommandations pour qu’il soit plus facilement lisible pour les dyslexiques, c’est une sorte de promesse que j’ai faite à ma fille Adèle qui veut pouvoir lire le prochain. Existe-t-il une charte ? Et dans cette charte quelles sont les recommandations les plus importantes parce que je ne pourrais sans doute pas exiger toute la refonte de la maquette déjà existante.
Cet été, la discussion est venue avec Adèle en cherchant dans mes livres d’adolescent dans la maison cévenole ceux des livres qu’Adèle trouvait les plus lisibles. La maquette des Folio des années septante par exemple n’était pas sans donner des problèmes tandis qu’un tout petit éditeur qui n’avait pas du beaucoup se donner de mal avait produit quelque chose d’assez parfait du point de vue d’Adèle.
Par la suite, ayant lu de mon côté Rose-Ronce d’Eric Chevillard, l’ayant bien apprécié et me demandant si d’aventure ce ne serait pas du goût d’Adèle cette espèce d’actualisation d’ Alice au Pays des merveilles , j’ai eu à découvrir de la bouche d’Adèle que la maquette tellement sobre et belle des éditions de Minuit , c’était juste parfait, loué soit Garamond !
Bref, si tu as quelques ressources sur ce sujet spécifique, je suis ton public captif.
Amicalement
Phil
-
@philippe_de_jonckheere : pour en avoir discuté avec des enseignant·e·s, il y a autant de dyslexies, et donc de solutions, que de dyslexiques… Spour ça que l’approche est plutôt de laisser à chacun·e la possibilité d’adapter à ses besoins .
Il n’y a pas de police recommandée pour les dyslexiques :
►http://romy.tetue.net/quelle-police-pour-les-dyslexiquesLes seules recommandations visent à améliorer la lisibilité (marges, alignements, etc.) :
►http://romy.tetue.net/ameliorer-lisibilite-typographiqueEt laisser chacun·e adapter à ses besoins, via des plugins navigateurs, etc. ou cette webapp du CNED :
▻https://accessidys.org -
@tetue Mille mercis, je regarde. Dans le cas présent, il s’agirait d’un livre en papier et donc sans plugin. J’avais déjà noté les considérations typographiques (encore que je ne me résouds pas encore à Comic Sans, mais je remarque que le Garamond est généralement bien apprécié d’Adèle) et celles de la mise en page (notamment la justification qui ne serait pas top, j’aurais pourtant cru). Merci d’avoir pris le temps de répondre en tout cas.
-
-
#css avancé : métriques des fontes, #line-height et #vertical-align - Vincent De Oliveira
▻http://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-alignLine-height et vertical-align sont des propriétés très simples. Tellement simples que la majorité d’entre nous sommes persuadés de savoir comment elles fonctionnent et comment les utiliser. Mais non. Elles sont vraiment tout sauf simples, voire les plus complexes, puisqu’elles ont un rôle important dans la création de l’une des choses les moins connues de CSS : le contexte de formatage inline (inline formatting context)
-
-
Tilt Hover Effects | Demo 2 | Codrops
▻http://tympanus.net/Development/TiltHoverEffects/index2.html -
Une liste de Styleguides UI/UX
▻http://usabilitygeek.com/usability-user-experience-user-interface-guidelines-companies-2016Une liste de Styleguides UI/UX Design de grandes marques. Voilà ce qu’on peut faire avec du budget et du temps. ▻https://t.co/YRWxV5VEIb
-
An In-Depth Overview Of Living Style Guide Tools – Smashing Magazine
▻https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-toolsLiving Style Guide Tools. ▻https://t.co/uJfsj4AZ0R
-
50 Style Guide Tools, Articles, Books and Resource
▻http://webdesign.tutsplus.com/articles/50-style-guide-tools-articles-books-and-resources--cms-2120950 Style Guide Tools, Articles, Books and Resources. ▻https://t.co/sOAbLNLeDs
-
Les #masques #CSS – 24 jours de web
▻http://www.24joursdeweb.fr/2013/les-masques-cssLe masquage est une technique de composition qui permet de combiner plusieurs images en une seule, où l’une des images va être utilisée pour masquer certaines parties des autres. Pour parler simplement, la première image correspond à l’élément graphique (la source) qui peut être composée d’images, de textes, de vidéos ou de n’importe quel autre contenu de notre page web. La seconde image est le masque et va agir comme un pochoir pour ne laisser visible qu’une certaine partie de notre source graphique.
Il existe deux catégories de masques :
Les masques basés sur une forme vectorielle définissant la zone visible de l’élément, c’est ce qu’on appelle le clipping.
Les masques basés sur une image en niveau de gris définissant quelles parties d’un élément sont masquées et quelles parties sont visibles, c’est le masking.Si vous êtes habitués à utiliser les masques de Photoshop, vous pouvez facilement assimiler que le masking correspond aux masques de fusion alors que le clipping correspond aux masques vectoriels ou 1-bit mask.
-
-
Pour les textes, mais ne sembla pas bien marcher avec FF ▻http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg
Par contre, ça marche bien avec #Vivaldi (je crois que c’est un moteur #Opéra, mais je ne suis plus certaine) ? ▻https://seenthis.net/messages/515670
-
