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

Layoutit Grid: apprentissage visuel de la grille CSS avec un générateur

Layoutit Grid est un générateur de grille CSS open source interactif. Il vous permet de dessiner vos créations et de voir le code au fur et à mesure. Vous pouvez interagir avec le code, ajouter ou supprimer des lignes de suivi et les faire glisser pour changer le dimensionnement – et vous pouvez voir le […]

Catégories
Astuces et Design

Comment créer un flou de mouvement réaliste avec des transitions CSS

Avant de nous plonger dans la création d'un flou de mouvement réaliste dans CSS, cela vaut la peine de plonger rapidement dans le flou de mouvement est, afin que nous puissions avoir une meilleure idée de ce que nous essayons de reproduire. Avez-vous déjà pris une photo de quelque chose se déplaçant rapidement, en particulier […]

Catégories
Astuces et Design

20 chargeurs de pages animées Pure CSS

Les chargeurs de pages sont souvent utilisés sur les sites Web pour donner à l'utilisateur quelque chose à regarder pendant le chargement du contenu en arrière-plan, ainsi que pour signaler à l'utilisateur que quelque chose se passe plutôt que de simplement regarder un écran vide pendant le chargement de la page. Les concepteurs créatifs ont […]

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

Un guide des formulaires HTML et CSS (pas de piratage!)

Historiquement, les formulaires HTML ont été assez délicats – d'une part, parce qu'au moins un peu de JavaScript était nécessaire, et d'autre part, parce qu'aucune quantité de CSS ne pourrait jamais les faire se comporter. Cependant, ce n'est pas nécessairement vrai dans le cas du Web moderne, alors apprenons à baliser des formulaires en utilisant […]

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

Un guide complet des requêtes multimédias CSS

Les requêtes multimédias sont un moyen de cibler le navigateur en fonction de certaines caractéristiques, fonctionnalités et préférences de l'utilisateur, puis d'appliquer des styles ou d'exécuter d'autres codes basés sur ces éléments. Les requêtes multimédias les plus courantes dans le monde sont peut-être celles qui ciblent des plages de fenêtres particulières et appliquent des styles […]

Catégories
Astuces et Design

Un petit analyseur de sélecteur CSS permissif – Lea Verou

J'ai déjà publié des articles sur mon travail pour le Web Almanac cette année. Pour faciliter le calcul des statistiques sur les sélecteurs CSS, nous avons cherché à utiliser un analyseur de sélecteur existant, mais la plupart étaient trop volumineux et / ou avaient des dépendances ou ne tenaient pas compte de tous les sélecteurs […]

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

Mettre à l'échelle linéairement la taille de la police avec la pince CSS () En fonction de la fenêtre

La typographie responsive a été essayée dans le passé avec une multitude de méthodes telles que les requêtes multimédias et CSS calc(). Ici, nous allons explorer une manière différente de mettre à l'échelle du texte de manière linéaire entre un ensemble de tailles minimale et maximale à mesure que la largeur de la fenêtre augmente, […]

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

Un cadre de grille CSS pour les pages de collection Shopify – Smashing Magazine

A propos de l'auteur Liam est un Developer Community Manager chez Shopify, basé en Irlande, et se spécialise dans le développement front-end, Liquid et le travail avec des thèmes. Il est passionné… Plus à propos Liam … Dans cet article, nous verrons comment configurer une disposition en grille pour les produits sur les pages de […]

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

25+ effets de texte CSS intéressants – 1stWebDesigner

Dans l'article d'aujourd'hui, nous partageons certains des effets de texte CSS les plus intéressants et les plus inhabituels – certains avec l'aide de JavaScript – que nous avons trouvés sur CodePen pour votre inspiration et pour éventuellement les utiliser dans l'un de vos projets à venir. Ces exemples vont des animations, aux interactions de survol, […]

Catégories
Astuces et Design

Architecture célèbre recréée avec CSS et JavaScript

L'architecture est l'une des formes d'art les plus immédiatement reconnaissables. Montrez une image d'une structure célèbre et il y a de fortes chances qu'une pluralité de personnes l'identifie immédiatement. C'est aussi une source de fierté et d'inspiration. Par exemple, des gens du monde entier rêvent de visiter la Tour Eiffel. Mais l'expérience ne consiste pas […]

Catégories
Astuces et Design

Optimiser CSS pour des chargements de page plus rapides

Il n'y a pas longtemps, j'ai décidé d'améliorer les temps de chargement de mon site Web. Il se charge déjà assez rapidement, mais je savais qu'il y avait encore place à l'amélioration et l'un d'entre eux était le chargement CSS. Je vais vous guider tout au long du processus et vous montrer comment vous pouvez […]