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

Fondu dans une page lors du chargement avec CSS et JavaScript

Lorsque je visite une page, je suis ennuyé lorsque j'essaie d'interagir avec des éléments pendant que le site Web est toujours en cours de chargement. Souvent, les choses bougent, les polices ne sont pas tout à fait chargées et cela semble cassé. Je sais qu’aujourd’hui, nous sommes obsédés dans ce secteur par le fait de […]

Catégories
Astuces et Design

Comment ajouter des virgules entre une liste d'éléments dynamiquement avec CSS

Imaginez que vous ayez une liste d'articles. Dites, fruit: banane, pomme, orange, poire, nectarine Nous pourrions mettre ces virgules (,) dans le HTML, mais voyons comment nous pourrions le faire en CSS à la place, ce qui nous donne un niveau de contrôle supplémentaire. Nous nous assurerons que le dernier élément n’a pas de virgule […]

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

Centrage en CSS

Suivez 5 techniques de centrage au cours d'une série de tests pour voir laquelle est la plus résistante au changement. 16 déc.2020 Le centrage en CSS est un défi notoire, plein de blagues et de moqueries. 2020 CSS a grandi et maintenant nous pouvons rire de ces blagues honnêtement, pas à travers les dents serrées. […]

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

Propriétés de transformation individuelle CSS dans l'aperçu de la technologie Safari

Le blog WebKit explique comment utiliser les propriétés de transformation CSS individuelles dans la dernière version de Safari Technology Preview. Cela met le navigateur en conformité avec la spécification CSS Transforms Module Level 2, qui éclate le translate(), rotate() et scale() fonctions du transform propriété dans leurs propres propriétés individuelles: translate, scale, et rotate. Donc, […]

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

Simulation des ombres portées avec l'API CSS Paint

Demandez à une centaine de développeurs front-end, et la plupart, sinon tous, auront utilisé le box-shadow propriété dans leur carrière. Les ombres sont toujours populaires et peuvent ajouter un effet élégant et subtil si elles sont utilisées correctement. Mais les ombres occupent une place étrange dans le modèle de boîte CSS. Ils n’ont aucun effet […]

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

Créez un nuage de tags avec du CSS simple et même du JavaScript plus simple

J'ai toujours aimé les nuages ​​de tags. J'aime l'expérience UX de voir quelles balises sont les plus populaires sur un site Web en voyant la taille de police relative des balises, les balises populaires étant plus grandes. Ils semblent ne plus être à la mode, bien que vous en voyiez souvent des versions utilisées dans […]

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 […]