Aller au contenu

Les démos CodePen IV préférées de Chris Coyer

Saviez-vous que vous pouvez tripler les choses sur CodePen ? Nous avons cette petite fonctionnalité pas si cachée pour toujours. Vous pouvez cliquer sur ce petit bouton en forme de cœur sur n’importe quel stylo (ou projet, groupe ou publication) sur CodePen pour montrer un peu d’amour au créateur, mais vous pouvez cliquer dessus encore et encore pour lui accorder plus d’attention. Ceci est utile pour plusieurs raisons. Il est calculé dans des algorithmes – qui – pour la gloire, et vous pouvez aussi Voir les articles que vous avez aimés à différents niveaux.

Dans la lecture de mon récent astrologue, avec le fait que Au top jusqu’en 2018 Je suis récemment passé et je pensais que je devrais faire un autre article sur mes favoris personnels ! Les voici!

voir stylo Bob Ross fait le fil, comme un patron (CSS pur) Écrit par Steve Gardner (@ste-vg) emploi code.

Je me souviens de mon professeur d’art à l’université portant un T-shirt qui disait : « L’art est mort ». Avec les dates de naissance/décès de Bob Ross dessus. Mec était une légende de PBS. Steve Gardner fait ressortir l’ambiance insouciante de Bob en lui faisant faire la danse joyeuse qui définit 2010. J’ai récemment appris que le premier Bob était peut-être aussi célèbre, au moins en partie, pour être Très bon pour l’ASMR un phénomène de picotements plutôt étrange qui est devenu très important sur YouTube ces derniers temps.

voir stylo < img taille intrinsèque & rt; Il combat les blagues Écrit par Éric Portis (eups) emploi code.

Autant j’aime toute l’exploration technique sur CodePen (et moi Amour it), le développeur front-end axé sur les performances, amoureux de la mise en page en moi aime vraiment les stylos d’exploration technologique comme celui d’Eric Portis. C’est un tout nouveau thème HTML qui vient de commencer à être livré en version bêta et qui a la puissance et les capacités Résoudre La junkie de téléchargement d’images, ce qui est un sacré gros problème si vous me demandez.

voir stylo Interrupteur unipolaire Flexbox par Heydon (@employé) emploi code.

Et en parlant d’une exploration granuleuse de la mise en page, Heydon Pickering a récemment publié une technique intéressante utilisant flexbox où une rangée d’éléments peut basculer instantanément d’une rangée horizontale à une rangée verticale La largeur en pixels de l’élément parent que vous souhaitez (plutôt que de s’appuyer sur une requête multimédia au niveau du document). Donc, comme une requête d’élément très basique, qui Tout le monde veut. Cela fonctionne soit en amenant efficacement les largeurs des éléments à 0 et en leur permettant de grandir pour remplir la ligne horizontale, soit en forçant un très grand nombre chaque élément sur une nouvelle ligne, créant une ligne verticale. Si vous souhaitez connaître le mode de calcul de la taille, je vous encourage à consulter Firefox DevTools pour le voir.

voir stylo Concepteurs CSS 4 purs Écrit par Julia Muzaffarova (@employé) emploi code.

Julia Muzaffarova Il réalise des scènes animées absolument magnifiques avec une quantité incroyable de soin et de détails. C’est génial car il y a tellement de scènes différentes en une seule ! Mais il est très difficile de choisir un favori, alors allez certainement parcourir son profil pour les autres.

voir stylo art de griffonnage css par @uanchuan (@employé) emploi code.

Yuan Chuan m’impressionne toujours, premièrement parce qu’ils sont si prolifiques (beaucoup de démos !), et deuxièmement parce qu’ils ont fondamentalement inventé un moyen d’alimenter cette nature prolifique : composant Web ! Il s’agit essentiellement d’un langage descriptif qui combine des informations de conception avec des fonctions personnalisées qui aident à cette conception. Les résultats, avec si peu de code, sont toujours étonnants.

voir stylo Plusieurs arrière-plans, plusieurs modes de fusion Écrit par Dan Wilson (@employé) emploi code.

En conversation avec Dan Wilson il y a peu de temps, nous en parlions Comment cool est le filtre, mais il est étrange que vous ne puissiez pas utiliser les autorisations de filtrage pour les images d’arrière-plan. Supposons que vous souhaitiez modifier les niveaux de gris de l’arrière-plan, mais pas l’ensemble de l’élément en niveaux de gris (ce qui ferait des choses comme transformer les liens bleus en gris). Vous pouvez le retirer avec un pseudo-élément tel qu’un arrière-plan. Peut-être qu’une autre façon, plus propre, consiste à utiliser le mode de fusion d’arrière-plan et plusieurs images d’arrière-plan. Si les niveaux de gris sont ce que vous recherchez, vous pouvez utiliser le mode de fusion des couleurs sur une image qui repose sur un noir plat.

Dan Wilson est devenu un peu plus expérimental avec ce stylo, superposant des images, des dégradés et des couleurs et laissant quelqu’un jouer avec ce stylo pour changer les couleurs et les mélanges appliqués.

voir stylo Fourmis en marche SVG Écrit par Maxim Leserovich (@rond) emploi code.

Je pense que ce style d’interface utilisateur classique est une excellente chose à essayer et à se démarquer sur le Web. Une « marche des fourmis » est généralement quelque chose que vous voyez comme dans Photoshop lorsque vous sélectionnez une partie d’une image. En dessous se trouve le style de l’interface utilisateur Web. Mais voici Maxim Leserovich tirez En utilisant des techniques très simples mais trompeusement intelligentes. Il y a de petites choses ici comme avoir besoin de doubler la largeur du contour pour faire face au fait que les traits chevauchent les lignes que vous créez, et donc lorsque vous utilisez des coordonnées comme 0,0, vous rencontrerez la moitié de cette ligne coupée .


Quels sont certains de vos favoris?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *