Catégories
Astuces et Design

Sur CSS atomique généré automatiquement | Astuces CSS

"The Shorthand-Longhand Problem in Atomic CSS" de Robin Weser dans un parcours intéressant à travers un problème délicat. Le fait est que lorsque vous prenez la tâche de convertir quelque chose de semblable à HTML et CSS en HTML et CSS réels, il y a des cas extrêmes dont vous devrez vous programmer, si vous […]

Catégories
Astuces et Design

Animation avec Lottie | Astuces CSS

Je pense que l'animation sur le Web est non seulement amusante, mais aussi engageante de telle sorte qu'elle a converti le site visiteurs dans les clients. Pensez au bouton «J'aime» sur Twitter. Lorsque vous «aimez» un tweet, de minuscules bulles colorées se répandent autour du bouton en forme de cœur alors qu'il semble se transformer […]

Catégories
Astuces et Design

Animations sveltes et printanières | Astuces CSS

Les animations printanières sont un excellent moyen de donner vie aux interactions de l'interface utilisateur. Plutôt que de simplement changer une propriété à une vitesse constante sur une période de temps, les ressorts nous permettent de déplacer des objets en utilisant la physique des ressorts, ce qui donne l'impression d'une chose réelle en mouvement et […]

Catégories
Astuces et Design

Whack-a-Mole: l'édition CSS | Astuces CSS

Nous avons vu le piratage de la case à cocher et comment il peut être utilisé pour créer une machine à états complète en CSS. Aujourd'hui, nous allons pousser cette pensée un peu plus loin et créer un jeu simple de Whack-A-Mole, où le joueur doit réagir rapidement pour gagner… le tout sans une touche […]

Catégories
Astuces et Design

Propriétés personnalisées comme état | Astuces CSS

Voici une idée amusante de James Stanley: un fichier CSS (qui est vraisemblablement mis à jour quotidiennement) contenant des propriétés CSS personnalisées pour les couleurs «saisonnières» (par exemple, le printemps est vert, l'automne est oranges). Vous utiliserez ensuite les valeurs pour thématiser votre site, sachant que ces couleurs changent légèrement d'un jour à l'autre. Voici […]

Catégories
Astuces et Design

Création de tableaux dans Hasura | Astuces CSS

Hasura est l'un de mes moyens préférés de créer une API GraphQL gérée pour mes applications. Je trouve cela simple et direct et adapté à un large éventail de cas d'utilisation. Cependant, depuis que je travaille avec Hasura, j'ai vu la même question se poser encore et encore: comment faire un tableau? Compte tenu du […]

Catégories
Astuces et Design

Créez vos propres outils | Astuces CSS

Spencer Miskoviak sur le blog Wealthfront: En créant des DevTools personnalisés spécifiques à une application, ils peuvent fonctionner à une abstraction encore plus élevée pour gérer des éléments tels que les interactions des utilisateurs ou le débogage des événements de suivi. Bien que cela nécessite la création et la maintenance des DevTools personnalisés, cela signifie […]

Catégories
Astuces et Design

Merci (édition 2020) | Astuces CSS

Un an, hein? Comme nous le faisons chaque année, je voudrais vous donner un énorme Merci pour lire CSS-Tricks, et récapituler l'année. Plus de bas que de hauts, tout compte fait. Ici, à CSS-Tricks, c'était plus un lavage. Permettez-moi de partager avec vous quelques chiffres, jalons et réflexions sur notre voyage de 2020. Faisons les […]

Catégories
Astuces et Design

Astuces Cloudinary pour la vidéo | Astuces CSS

Créer une vidéo prend du temps. Une vidéo bien conçue de 5 minutes peut prendre des heures à planifier, enregistrer et éditer – et c’est avant nous commençons à parler de rendre cette vidéo cohérente avec toutes les autres vidéos de votre site. Lorsque nous avons entrepris le projet Jamstack Explorers (une ressource pédagogique vidéo […]

Catégories
Astuces et Design

Design v18 | Astuces CSS

J'ai repensé le site! Je ne peux jamais penser au mot refonte sans penser aussi réaligner, extrait de l’article fondateur de Cameron Moll. J'ai fait ne pas partir de rien. Cette conception n’était pas une toile de conception vierge et un éditeur de code vide. Je doute qu'une refonte future le soit non plus. J'ai […]

Catégories
Astuces et Design

Chapitre 6: Conception Web | Astuces CSS

Alec Pollak n'était guère plus qu'un directeur artistique junior qui créait des publicités imprimées lorsqu'il a reçu un appel qui allait changer le chemin de sa carrière. Il a travaillé à l'agence de publicité Gray Entertainment, appelée plus tard Gray Group. L'agence avait passé des décennies à acquérir certains des plus gros clients du secteur. […]

Catégories
Astuces et Design

Intégration de TypeScript avec Svelte | Astuces CSS

Svelte est l'un des plus récents frameworks JavaScript et sa popularité augmente rapidement. Il s’agit d’un cadre basé sur des modèles, mais qui permet un JavaScript arbitraire dans les liaisons de modèles; il a une superbe histoire de réactivité qui est simple, flexible et efficace; et en tant que framework compilé à l'avance (AOT), il […]

Catégories
Astuces et Design

Un calendrier en trois lignes de CSS – Astuces de calendrier

Il s'agit d'une tentative de démontrer comment CSS Grid Layout permet de créer un calendrier avec seulement trois lignes de CSS. Alors que beaucoup diraient qu'un calendrier devrait être construit sémantiquement en utilisant une table, il y en a d'autres qui pensent qu'une liste serait également appropriée. Et le élément pourrait également être une solution […]

Catégories
Astuces et Design

Reconnaître les contraintes | Astuces CSS

Il existe un mot «C» dans le développement Web auquel nous n’accordons pas suffisamment d’attention. Non, je ne parle pas d ’« intégration continue », ni même de« CSS ». Le mot «C» dont je parle est "contraintes". La compréhension des contraintes est un élément essentiel de la création d'un logiciel qui fonctionne le mieux […]

Catégories
Astuces et Design

Edge tout | Astuces CSS

La série est un wrap mes amis! Merci d'avoir lu et un grand merci à tous les auteurs cette année qui ont partagé quelque chose qu'ils ont appris. Beaucoup d'auteurs ont vraiment réfléchi à la façon dont nous pouvons être meilleurs et faire mieux, ce que j'aime bien sûr. Adam nous a montré des propriétés […]

Catégories
Astuces et Design

Changement vs inertie | Astuces CSS

Récemment, je suis devenu plus profondément conscient de la tension inhérente entre le changement et l’inertie, qui s’applique à l’évolution et à l’utilisation des technologies Web. Ces forces ont toujours été présentes et opposées les unes aux autres, mais il me semble que les effets secondaires de ces collisions impactent plus sensiblement le développement web. […]

Catégories
Astuces et Design

Apprendre à simplifier | Astuces CSS

Lorsque j'ai reçu cette invite d'écriture pour la première fois, mon esprit a immédiatement commencé à penser à des choses comme: «Quelle technologie ai-je apprise cette année?» Mais cet article ne concerne pas vraiment la technologie, car je pense que ce que j'ai le plus appris sur la création de sites Web cette année est […]

Catégories
Astuces et Design

Mouvement lent | Astuces CSS

N'allez pas courir après les chutes d'eau Je parle de négligence parce que je pense qu’il existe un fossé important entre ce que nous croyons savoir sur les langages frontaux et ce que nous devrions réellement savoir. HTML Cela fait partie de mon travail et de mon hobby d'inspecter des sites Web et d'évaluer la […]

Catégories
Astuces et Design

C’est toujours l’année zéro | Astuces CSS

À court terme, les opinions sur la technologie suivent souvent une forme compressée de la loi de Laver: Tout juste avant moi était complètement cassé. Tout ce qui vient après moi est complètement inutile. Tout ce que j'utilise en ce moment est parfaitement bien; arrêtez de changer les choses. Nous avons tendance à juger les […]

Catégories
Astuces et Design

Questions de représentation | Astuces CSS

Cette année, j'ai eu le plaisir de relancer The Accessibility Project. Je passe beaucoup de temps à rechercher et à écrire sur l'accessibilité et le design inclusif, donc cela ressemblait à un cumul de beaucoup d'efforts. Le site utilise maintenant toutes sortes de fonctionnalités Web intéressantes telles que CSS Grid, @supports, et fonctionnalités multimédias, aria-current, […]