Catégories
Astuces et Design

Gestion de la mise au point et inerte | Astuces CSS

De nombreuses formes de technologie d'assistance utilisent la navigation au clavier pour comprendre et agir sur le contenu de l'écran. Une façon de naviguer est via le Languette clé. Vous connaissez peut-être déjà cette façon de naviguer si vous l'utilisez pour passer rapidement d'une entrée à une autre sur un formulaire sans avoir à saisir […]

Catégories
Astuces et Design

L'astuce: focus visible | Astuces CSS

Il vaut toujours la peine de le répéter: tous les éléments interactifs doivent avoir un style de focus. De cette façon, un utilisateur de clavier peut savoir quand il a déplacé le focus sur cet élément. Mais si vous utilisez :focus seul pour cela, il a un effet secondaire que beaucoup de gens n'aiment pas. […]

Catégories
Astuces et Design

Problèmes de personnes | Astuces CSS

L'autre jour, Jeremy Keith a écrit que les problèmes liés au travail de performance ne sont pas seulement une question d'optimisation et de correction du code, mais aussi de résoudre les problèmes des personnes: J'ai été frappé par le fait qu'il existe un continuum de défis de performance. À une extrémité du continuum, vous avez […]

Catégories
Astuces et Design

Purge complète | Astuces CSS

Nous avons déjà abordé des techniques lorsque vous voulez un élément pleine largeur dans une colonne de largeur limitée, comme une image bord à bord dans une colonne de texte plus étroite. Il existe de nombreuses techniques. Peut-être que ma préférée est cette petite classe utilitaire: .full-width { width: 100vw; position: relative; left: 50%; right: […]

Catégories
Astuces et Design

Animation des compteurs de nombres | Astuces CSS

Animation numérique, comme dans, imaginez un nombre passant de 1 à 2, puis de 2 à 3, puis de 3 à 4, etc. pendant un temps spécifié. Comme un compteur, sauf contrôlé par le même type d'animation que nous utilisons pour d'autres animations de conception sur le Web. Cela pourrait être utile lors de la […]

Catégories
Astuces et Design

Regard sur AWS Amplify | Astuces CSS

AWS Amplify est une collection d'outils d'AWS pour vous aider à créer des applications. Permettez-moi de préparer le terrain ici pour essayer de rendre cela aussi clair que je sais comment. J'ai un ami (histoire vraie) qui veut créer une application centrée sur l'entraînement physique. Sa femme est un entraîneur physique, et ils pensent qu'il […]

Catégories
Astuces et Design

La règle du prototype papier | Astuces CSS

J’ai eu la chance de travailler avec certains des meilleurs designers de l’industrie, notamment Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas et, bien sûr, des dizaines d’incroyables designers de MediaMonks. De nombreux projets sur lesquels nous avons travaillé nécessitent une animation personnalisée et des consignes permettant aux développeurs d'être pleinement créatifs et de […]

Catégories
Astuces et Design

La boîte vide | Astuces CSS

Quand j'étais au lycée, nous avons découvert «The Black Box» qui est un concept au théâtre. Si ma mémoire est bonne, l'approche était simple et élégante: vous pouvez prendre n'importe quel espace, n'importe quelle boîte noire, et lui donner vie avec une histoire. J'ai aimé l'idée qu'il est possible de transmettre n'importe quoi, de raconter […]

Catégories
Astuces et Design

Nova | Astuces CSS

Nova est un nouvel éditeur de code (avec véhémence uniquement pour macOS) de Panic, les gens derrière Coda. C’est comme "Coda 3", sauf que c’était une réécriture si importante qu’ils lui ont donné un tout nouveau nom. J'ai joué avec certaines bêtas pendant qu'ils les construisaient. J'ai eu un petit rabais lors de sa mise […]

Catégories
Astuces et Design

Webs tissés | Astuces CSS

Il y a un peu d'ironie avec Jamstack. Le concept est simple: vous placez des fichiers statiques pré-rendus sur un hébergement Web (un CDN) conçu pour bien le faire. C'est tout. Si vous avez besoin d'en faire plus, tout ce que vous faites à partir de là est fait avec JavaScript côté client, qui concerne […]

Catégories
Astuces et Design

Chapitre 4: Recherche | Astuces CSS

eBay en avait assez de ces araignées. Ils les repoussaient par milliers. Leurs serveurs bourdonnaient d'activité non-stop; un flot incessant d'intrus. Un agresseur, cependant, dominait les autres. Enchérisseur Edge, qui se présentait comme un agrégateur d'enchères, explorait régulièrement les pages d'eBay pour extraire son contenu et le répertorier sur son propre site aux côtés d'autres […]

Catégories
Astuces et Design

Comment fonctionne la perspective CSS | Astuces CSS

En tant que personne qui aime créer des animations CSS, l'un des outils les plus puissants que j'utilise est perspective. Tandis que le perspective n'est pas capable de produire des effets 3D à elle seule (car les formes de base ne peuvent pas avoir de profondeur), vous pouvez Utilisez le transform pour déplacer et faire […]

Catégories
Astuces et Design

Morphing SVG avec react-spring | Astuces CSS

Je suis intrigué par l’effet de morphing depuis que je suis enfant. Il y a quelque chose dans une animation qui change de forme qui capte toujours mon attention. La première fois que j'ai vu le morphing m'a laissé me demander «Wow, comment ont-ils fait ça?«Depuis, j’ai créé des démos et écrit un article sur […]

Catégories
Astuces et Design

Chapitre 3: Le site Web | Astuces CSS

Précédemment dans l'historique Web… Berners-Lee, motivé par sa propre curiosité, crée le World Wide Web au CERN. Il libère ses technologies dans le domaine public, ce qui permet le développement de plusieurs nouveaux navigateurs pour chaque système d'exploitation. Mosaic s'avère le plus populaire, et son introduction d'images couleur directement en ligne dans le contenu change […]

Catégories
Astuces et Design

Chronique CSS-Tricks XXXVIII | Astuces CSS

Hé gang! J’ai eu la chance d’être invité dans une variété de domaines différents ici, alors j’ai pensé qu’il était temps de publier un autre article dans Chronique. Vous savez, ces articles spéciaux où je rassemble les événements aléatoires que je fais en dehors de ce site. J'ai rejoint Ed & Tom sur A Question […]

Catégories
Astuces et Design

TypeScript, moins TypeScript | Astuces CSS

À moins que vous ne vous soyez caché sous un rocher ces dernières années (et avouons-le, se cacher sous un rocher semble parfois être la bonne chose à faire), vous avez probablement entendu parler de TypeScript et vous l'avez probablement utilisé. TypeScript est un sur-ensemble syntaxique de JavaScript qui ajoute – comme son nom l’indique […]

Catégories
Astuces et Design

Chapitre 1: Naissance | Astuces CSS

Tim Berners-Lee est fasciné par l'information. C’est l’œuvre de sa vie. Depuis plus de quatre décennies, il cherche à comprendre comment il est cartographié, stocké et transmis. Comment ça passe d'une personne à l'autre. Comment les graines de l'information deviennent les racines d'un changement radical. C'est tellement fondamental pour le travail qu'il a accompli que […]

Catégories
Astuces et Design

Jetpack CRM | Astuces CSS

Il y a environ un an, Automattic a racheté Zero BS CRM. À l'époque, on pensait qu'il pouvait être renommé dans la suite Jetpack et, eh bien, c'est arrivé. CRM signifie «Gestion de la relation client» si vous êtes comme moi et que cela sort un peu de votre sphère logicielle quotidienne. Les CRM sont […]

Catégories
Astuces et Design

Faire sens de react-spring | Astuces CSS

L'animation est l'une des choses les plus délicates à faire avec React. Dans cet article, j'essaierai de fournir l'introduction à react-spring que j'aurais aimé avoir quand j'ai commencé, puis je vais plonger dans des cas d'utilisation intéressants. Bien que react-spring ne soit pas la seule bibliothèque d'animations pour React, c'est l'une des plus populaires (et […]

Catégories
Astuces et Design

Une solution de maçonnerie légère | Astuces CSS

En mai, j'ai découvert Firefox ajout de maçonnerie à la grille CSS. Les mises en page de maçonnerie sont quelque chose que je voulais faire moi-même à partir de zéro depuis très longtemps, mais je n'ai jamais su par où commencer. Alors, naturellement, j'ai vérifié la démo, puis j'ai eu un moment d'ampoule quand j'ai […]