Cette semaine, nous avons encore un autre projet CSS simple et amusant pour vous aider à perfectionner vos techniques de programmation. Cette fois-ci, nous allons créer l'illusion d'une page avec un coin plié.
Grâce à la puissance des pseudo-éléments, nous allons créer des triangles CSS que nous pourrons ensuite mettre en place pour créer notre pli de page. Une fois que nous avons tous terminé, vous pourrez simplement appliquer une classe à n’importe quelle div pour ajouter l’effet.
Le concept
Démo: Cliquez ici pour lancer.
Récemment, j'ai voulu ajouter un peu de caractère à un simple conteneur de texte et j'ai décidé d'essayer de plier l'un des coins. Avec l'aide d'une image, c'est une tâche assez facile. Cependant, si nous essayons d’utiliser une route CSS pure, cela prend plus de temps et d’efforts.
La méthode que j'ai proposée n'est sûrement pas innovante, mais je pensais qu'elle était assez intéressante pour la partager ici. En gros, il nous faut, outre une boîte rectangulaire, deux triangles. Nous allons pousser ces triangles dans les positions indiquées ci-dessous.
Une fois les triangles en place, nous pouvons changer le triangle supérieur de la même couleur que l’arrière-plan et, tout à coup, nous obtenons notre bel effet de pli de page. Plutôt facile!
Maintenant que nous avons un plan en place, nous pouvons commencer à créer nos formes en utilisant CSS. Il n'y a pas vraiment de grande méthodologie intégrée pour la création de triangles avec CSS, donc nous allons devoir nous tourner vers une frontière vaudou.
Le HTML
Pour commencer, créez une div comme celle illustrée ci-dessous. J'ai ajouté un titre avec un paragraphe, une classe pour les styles de page généraux que nous pourrions vouloir réutiliser ailleurs et enfin une classe pour appliquer l'effet de pli de page (tl signifie "en haut à gauche", nous allons en créer un autre pli en haut à droite plus tard).
C'est tout ce dont nous avons besoin pour l'instant. Passons à notre CSS et mettons-nous en forme!
Page CSS
Pour le CSS, nous commencerons par coder l’aspect général de notre petite page sans l’effet de pli. J'ai commencé par donner une jolie couleur sombre à l'arrière-plan, puis je suis passé au style de la classe de page réelle. Donnez-lui une largeur, une hauteur et une marge et attribuez du blanc à la couleur d'arrière-plan.
A titre facultatif, j'ai inclus un dégradé d'arrière-plan très subtil. Comme toujours, cela prend un morceau de code impie si nous essayons de jouer correctement avec autant de navigateurs que possible. Si vous pensez que cela n'en vaut pas la peine, abandonnez simplement le dégradé.
Maintenant que nous avons le style de base du conteneur, il est temps d'améliorer le texte. Pour le h2, je l'ai fait grand et grand et je l'ai scooté assez loin du haut pour qu'il ne gêne pas le pli de page. J'ai également utilisé la police de caractères Web Lilita One de Google. Cette intégration est aussi simple que de copier et coller le code qui vous est donné sur la page de ce lien.
Enfin, pour terminer le texte, j’ai ajouté du rembourrage au paragraphe, défini sa police et fait en sorte que sa couleur soit légèrement restituée du noir pour aider à le différencier du titre.
Vérification des progrès
À ce stade, vous devriez avoir une jolie petite page qui ressemble à celle présentée ci-dessous. Ce n’est pas grand chose à regarder en ce moment, mais c’est un bon début.
CSS Triangles
Avant de continuer, nous devons apprendre à faire un triangle avec CSS. Pour commencer ce processus, créez un div vide et donnez-lui une classe de "triangle". Définissez maintenant la hauteur et la largeur sur zéro, mais appliquez une bordure très épaisse au bas et au côté gauche (utilisez deux couleurs différentes). Voici le résultat que vous obtiendrez:
Comme vous pouvez le constater, cela a créé un carré divisé en diagonale du coin inférieur gauche au coin supérieur droit. Chaque bordure correspond à l'un des triangles obtenus. Maintenant, regardez ce qui se passe si l'une de ces frontières devient transparente:
Voilà un triangle en CSS pur. Nous pouvons même modifier la direction du triangle en appliquant des bordures à différents côtés:
Assurez-vous de définir la bordure transparente dans la direction dans laquelle vous souhaitez que l'hypoténuse soit orientée. Donc, si vous voulez qu'il soit face droit, faites en sorte que la bordure droite soit transparente. L'inverse est vrai pour les autres frontières. Si vous voulez que l'hypoténuse soit face cachée, définissez le bord supérieur. Si vous voulez qu'il soit face visible, définissez la bordure inférieure.
Consultez cette Bricolage pour voir un exemple des quatre options au travail.
Plier la page
Il est maintenant temps d'utiliser cette connaissance pour plier la page. Pour ce faire, nous devons suivre trois étapes. D'abord, nous allons appeler le? Foldtl? classe que nous avons mis en place avant. Ensuite, nous allons ajouter un triangle en utilisant le pseudo-élément: before.Enfin, nous allons ajouter le deuxième triangle en utilisant le pseudo-élément: after.
Comme vous pouvez le constater, tout ce que nous avons fait pour la classe principale est d’appliquer un positionnement relatif (cela aide les triangles à position absolue) et de définir une zone d’ombre. En passant, ce projet est beaucoup plus facile sans ombres, mais je voulais m'assurer que vous saviez qu'il pourrait toujours fonctionner. Vous devez simplement vous assurer que l'ombre est suffisamment décalée pour ne pas dépasser du côté du pli de page.
Il est maintenant temps de créer notre premier triangle. Appelez le pseudo-élément: before, définissez son contenu sur rien, positionnez-le absolument à l'origine, puis utilisez le code de triangle que nous venons d'apprendre ci-dessus.
Comme vous pouvez le constater, je règle la taille sur 70px et la couleur sur #eee, ce qui est un peu plus foncé que la couleur de la page car il s’agit du triangle qui crée l’effet de repliement. Encore une fois, l'ombre doit être considérablement compensée pour bien paraître.
Découper le coin
Pour finir, nous devons positionner notre deuxième triangle pour découper ce coin supérieur gauche. Cela utilise à peu près la même syntaxe que la dernière, seule la couleur du triangle est identique à celle du corps et la direction a été inversée.
Il s'avère que cette étape n'est pas vraiment nécessaire. Pour plus d'informations, reportez-vous à la section Mise à jour ci-dessous.
Avec cela, notre effet de pli de page est tout fini! Voici à quoi ça ressemble:
En le retournant
Maintenant que nous avons terminé notre pli en haut à gauche, il est temps de le retourner et de voir si nous pouvons obtenir la même chose de l'autre côté. La syntaxe est presque identique, il suffit de décaler de la droite vers la gauche avec votre positionnement absolu et de retourner vos triangles.
Une des choses qui pourrait vous faire trébucher ici, ce sont les ombres, vous devrez les retourner, sinon l'illusion sera ruinée. Cette image illustre ce que je veux dire:
Le voir en action
Maintenant que nous avons tous terminé, il est temps d'essayer ce mauvais garçon. Gardez à l'esprit que, parce que nous utilisons: avant et: après, IE7 et avant ne joueront pas bien. Il existe des correctifs disponibles en utilisant JavaScript si cela vous préoccupe beaucoup.
Démo: Cliquez ici pour lancer.
Mettre à jour
Voici la chose, parfois, un projet comme celui-ci a un sens dans votre tête lorsque vous le codez, puis vous revenez plus tard et réalisez que vous le faisiez tout faux! C'est exactement ce qui s'est passé ici. Immédiatement après la publication de cette publication, j'ai remarqué que, puisque mon tour de frontière s'était scindé en deux triangles, je n'avais vraiment pas besoin d'ajouter l'étape: après la section. Les informations ci-dessus sont toujours utiles, alors je vais les laisser en tête, mais voici une meilleure façon de procéder.
Tout ce que nous avons à faire, c'est de prendre la bordure que nous rendions transparente et de la définir comme couleur de fond. Cela seul sert de deuxième triangle, nous permettant de couper complètement la section suivante.
Vivre et apprendre, vivre et apprendre. Toujours passer et assurez-vous que votre code est aussi concis que possible. Parfois, vous faites des erreurs stupides (je le fais bien). Ne vous découragez pas, mais rassurez-vous au fait qu'il existe presque toujours une meilleure façon de faire quelque chose et que chaque fois que vous en trouvez une, vous vous faites un meilleur codeur.
Assurez-vous de consulter la mise à jour de Tinkerbin pour voir cette nouvelle version améliorée.
Conclusion
Merci d'avoir lu ce tutoriel sur la création d'un effet de page avec CSS. J'espère que vous avez trouvé les informations utiles et que vous maîtrisez désormais parfaitement les deux triangles CSS et les pseudo-éléments: before et: after.
Laissez un commentaire ci-dessous et laissez-moi savoir ce que vous pensez. Assurez-vous de revenir bientôt pour découvrir d'autres bonnes solutions CSS.