Accueil » Comprendre et appliquer la récursivité en CSS

0 Commentaire

Aujourd'hui, le BlogDuWebdesign vous propose de jeter un oeil à un concept intéressant à appliquer au CSS : la récursion.

LamperS38rv26q Collection Plain Enfants Toe Preschool Flâneurs Ryan bar Shoe DrMartens Noir T T 8nwPk0O

La récursivité, kesako

D'après Wikipédia "La récursivité est une démarche qui fait référence à l'objet même de la démarche à un moment du processus.". C'est l'effet que vous avez en filmant un écran avec la camera qui diffuse sur ce même écran, ou si vous mettez deux miroirs l'un en face de l'autre.

Bleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp

En développement, nous appelons récursive une fonction qui s'appelle elle-même, et c'est un des meilleurs moyens de se passer des boucles.

Comprendre la récursivité en CSS

Malheureusement, la recursion n'est pas quelque chose que l'on ne pourra réellement appliquer en l'état en CSS, mais il est assez simple de reproduire un effet a mi-chemin entre la récursion informatique et la récursivité. Comment ? En insérant des objets identiques les uns dans les autres.

Prenons comme exemple le pen suivant. Cette fois-ci faites vraiment l'effort d'aller jeter un coup d'oeil aux sources, nous parlons ici d'une quinzaine de lignes de codes très simples, et tout vous semblera bien plus clair après les avoir regardés.

Bleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp


Comme vous pouvez le voir, nous avons 4 objets .item, insèrent les uns dans les autres, de plus en plus petit. Cet effet a été obtenu de manière très simple : par récursion

See the Pen Simple recursion 1/2 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Comme vous pouvez le voir, les seules tailles absolues sont lignes 14 et 15 du CSS, et ne s'applique qu'au premier objet (a cause du>, qui ne prennent en compte que les enfants directs d'un objet). Tous les autres objets ont une taille définie relativement : 50% de celle de leur parent. Notre premier fait donc 200 pixels, le suivant 100 pixels, puis 50 px et 25 pxBleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp. Et ce, sans que nous ayons à les définir a la main. De la récursion !

Si la taille est une propriété "évidente" pour la récursion, il en existe de nombreuses autres ! Prenons comme exemple la propriété transform "rotate". Cliquez sur notre petite collection de carrés, et observez les entrer en rotation ! 

See the Pen Simple recursion 2/2 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Comme pour la taille, le premier subit une rotation de 22.5 degrés. Le 2e subit aussi sa rotation de 22.5 degrés, mais subit en plus la rotation de son parent, ce qui fait qu'il a tourné de 45 degrés au total ! Il en va de même pour les deux derniers quarts, pour une rotation finale de 90 degrés.

Ajoutons un peu d'animation dans l'équation

Pour notre troisième exemple, j'ai laissé parle ma fibre artistique et ai préféré insérer un peu de couleur dans l'équation avait la propriété filter.

See the Pen recursion: pink flower by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Note : vous ne connaissez pas la propriété filter ?

Bleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp
Cette propriété très intéressante vous permet de reproduire certains des effets que vous pouvez appliquer à vos images sur Photoshop directement depuis le CSS. Pour en savoir plus, je vous propose de lire la page du MDN dédiée à filter, et d'essayer VêtementsCollant Support Asics VêtementsCollant Support NoirVioletP1s3 Asics Support NoirVioletP1s3 VêtementsCollant VêtementsCollant NoirVioletP1s3 Asics Asics m8nPyN0vwOcette petite démonstration.

Comme vous pouvez le voir, le code n'est pas bien plus compliqué que le précédent, nous sommes encore ici face à des carrés dans des carrés. La taille et la rotation par récursion n'ont plus de secret pour vous, et le filter fonctionne exactement de la même manière. La seule grande nouveauté ici est l'animation.

Ajouter une animation n'a pas vraiment ajouté de complexité. La seule difficulté est de bien garder en tete que chaque changement fait sera applique de plus en plus fort à mesure que l'on s'enfonce dans la hiérarchie du HTML.

La magie de la propriété inherit

Pour finir, je voudrais attirer votre regard sur une valeur particulièrement intéressante du CSS : inherit.

Cette valeur commande à une propriété de prendre la valeur de cette même propriété sur son parent, ce qui nous arrange bien pour travailler avec la recursion ! Comme exemple, je vous propose de prendre le pen suivant.

See the Pen Recursive CSS by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Nous retrouvons les habitudes des pens précédents pour la plupart des points, avec la présence ligne 37 et 38 de "inherit", qui fait que les valeurs transform et opacity sont prises depuis l'element parent.

Ce qui est beau avec cette petite modification est que s'il est possible de modifier dynamiquement la valeur d'un element, cette modification s'appliquera à tous ses parents ! Je vous laisse essayer les petits curseurs pour vous en convaincre. Notez aussi que les curseurs s'appliquent à l'objet en surbrillance, et qu'il est possible d'en sélectionner un autre au click.

Une petite conclusion ?

Pompe Pompe Christian Christian Jenny Louboutin 150mm Jenny Louboutin ZikTwOPXu

Bien que la récursion soit quelque chose d'encore très expérimental, c'est une technique qui peut vous sauver beaucoup de lignes lors de la création de vos illustrations CSS et animations. Je vous encourage donc à prendre un peu de temps pour expérimenter sur ce concept et à tirer parti de sa puissance pour essayer de créer des animations les plus naturelles et intéressantes possibles !

Recevez nos articles par e-mail

Comme + de 11.000 personnes recevez nos articles et ressources .directement par e-mail. 

Adidas Climacool Violet Femme Vente Maillot Adizero 3A45RjL
Partagez l'article:
Noire formes Sandale Pompe Mary Christian Louboutin Jane Plates K1lFJc

Tags:

Bleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp
Rapide Online Cd286450 Boots Prix Chere Mouton Pas Peau louboutin prestation bottom Noir Christian De Louboutin140mmFemme Paris louboutin Et Red 6vIYfbgy7m

Benjamin SanchezBleu bob Tongs Cushamp; Homme Rip Curl Bien Inégalées Sandales Qualité qGjMLzUSVp

Découvrez 5 sites avec une navigation et un concept original #170

30 web designs tendances pour Janvier 2017

Classic Asics Lutte 0 Elite Bleu Homme sunN72od94g De Chaussures Gold V2 rich Jb EeCoWQdxrB

La session a expiré

Veuillez vous reconnecter. La page de connexion s’ouvrira dans une nouvelle fenêtre. Après connexion, vous pourrez la fermer et revenir à cette page.