Share
Dans ce didacticiel, nous allons apprendre à créer un effet de papier plié souple (réactif) à l'aide de fonctionnalités CSS3 telles que les dégradés d'arrière-plan et les ombres de boîtes, ce qui peut donner un arrière-plan plutôt cool au contenu de votre site Web..
Accentsconagua
Commençons par créer une page HTML très basique. Nous utiliserons HTML5 parce que… pourquoi ne le feriez-vous pas??!
Effet papier plié flexible <
Dans la tête, nous nous assurons d'utiliser le doctype HTML5, nous définissons notre titre, nous appelons nos feuilles de style, nous utilisons également la balise méta de la fenêtre d'affichage afin que notre effet soit réactif sur les appareils mobiles et les tablettes. Enfin, il existe un polyfill permettant de reconnaître les éléments html5 dans les navigateurs plus anciens et un correctif pour les dégradés CSS3 pour IE dont nous aurons besoin plus tard dans le didacticiel..
Effet papier plié flexible
Obtenu avec un mélange de dégradés CSS3 et de box-shadows.
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique chez dictum ac, porta chez magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Maintenant, dans la section principale de la page, nous avons un conteneur div qui enveloppe la page et un autre qui enveloppe le "papier". Dans cette div nous ajouterons un tag chaque fois que nous voulons une section pliée dans le papier. Il existe deux types de ces sections, de sorte que plus tard dans le CSS nous pourrons les différencier en utilisant les sélecteurs "impair" et "pair". De cette façon, notre code HTML reste aussi sémantique que possible, sans noms de classe superflus..
Dans ces sections, j'ai ajouté du contenu. titres et un texte d’espace réservé. Il s’agit d’une structure de page simple, mais nous avons tout ce dont nous avons besoin pour créer l’effet papier plié en passant au CSS.
Dans le CSS, nous allons créer l'effet complètement à partir de rien, sans images, juste pour le fun.
* -moz-box-sizing: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; body background: # 777; # page-wrap margin: 0 auto; largeur maximale: 980px; largeur: 100%; .paper margin: 30px auto; arrière-plan: # f5f4f0; largeur maximale: 960px; largeur: 90%; -webkit-box-shadow: 0 0 2px rgba (0, 0, 0, 0,7); -moz-box-shadow: 0 0 2px rgba (0, 0, 0, 0,7); boîte-ombre: 0 0 2px rgba (0, 0, 0, 0,7); h1 font: bold 50px "Georgia", serif; text-align: center; text-shadow: 0 1px 0 #fff; marge inférieure: 20 px; h2 font: bold 25px "Georgia", serif; text-align: center;
Ce sont les styles de base pour la page. Nous déclarons une largeur maximale fixe et un pourcentage de la largeur réelle pour rendre l'élément "papier" complet flexible. Les styles d'en-tête ne sont que pour l'exemple, évidemment, il vous appartient de les modifier en fonction de votre conception..
section largeur: 100%; hauteur min .: 100px; position: relative; rembourrage: 30px;
Nous veillons ici à ce que chaque section s'étende à 100% sur son élément parent. Nous définissons une hauteur minimale. Ainsi, si vous souhaitez ajouter des sections de pli vides comme dans l'exemple, elles ne feront pas 0px. Nous déclarons ensuite la position relative et nous ajoutons un peu de remplissage, une fois encore uniquement pour cette conception.
Remarque: C'est très important de déclarer position: relative; dans cette section; nous en avons besoin pour placer les éléments ombrés qui vendent vraiment l'effet.
.section de papier: nième enfant (pair) arrière-plan: -moz-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en bas à droite, stop de couleur (0%, # e9eae5), stop de couleur (100%, rgba (244, 245, 240, 0))); arrière-plan: -webkit-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); arrière-plan: -o-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); arrière-plan: -ms-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); arrière-plan: gradient linéaire (135deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e9eae5', endColorstr = "# 00f4f5f0", GradientType = 1);
Cette fois, nous ne modifions que chaque élément de section paire, ce qui signifie les deuxième, quatrième, sixième, etc. Nous appliquons un dégradé pour donner l'impression qu'une ombre est projetée sur le papier dans l'espace 3D. Ce dégradé est l’une des parties les plus essentielles de cette conception et il est important de choisir une couleur qui complète le papier..
Dans ce cas, le papier était # f5f4f0 et le gris du dégradé (qui s'estompe en diagonale du haut à gauche au bas à droite) va de # e9eae5 à complètement transparent.
Vous pouvez utiliser plusieurs outils pour générer vos dégradés, par exemple:
Ceci fait, ajoutons maintenant des ombres sous le papier.
.partie papier: nième enfant (impair): avant z-index: -1; position: absolue; contenu: ""; en bas: 0px; à gauche: 10px; largeur: 50%; en haut: 20px; arrière-plan: rgba (0, 0, 0, 0,7); -webkit-box-shadow: -10px 20px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: -10px 20px 15px rgba (0, 0, 0, 0,5); boîte-ombre: -10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: rotation (5deg); -moz-transform: rotation (5deg); -o-transformer: faire pivoter (5deg); -ms-transform: rotation (5deg); transformer: faire pivoter (5deg); .paper section: nth-child (impair): après z-index: -1; position: absolue; contenu: ""; en bas: 0px; à droite: 10px; gauche: auto; largeur: 50%; en haut: 20px; arrière-plan: rgba (0, 0, 0, 0,7); -webkit-box-shadow: 10px 20px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: 10px 20px 15px rgba (0, 0, 0, 0,5); boîte-ombre: 10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: rotation (-5deg); -moz-transform: rotation (-5deg); -o-transformer: faire pivoter (-5deg); -ms-transform: rotation (-5deg); transformer: faire pivoter (-5deg);
Maintenant, je sais que cela peut sembler décourageant aux personnes qui ne sont pas habituées à utiliser des transformations ou des pseudo-éléments CSS3, mais c'est en fait assez simple..
Ici, nous ajoutons simplement les ombres pour chaque section impaire. Nous commençons par pousser l'élément supplémentaire derrière le papier avec l'index z. C'est ici que nous déclarons une position absolue, raison pour laquelle nous avons dû déclarer la position relative dans l'élément parent plus tôt..
Fondamentalement, nous fabriquons deux boîtes noires qui occupent la moitié de la largeur de notre section de pli (largeur: 50%;). Nous leur donnons ensuite des ombres de boîte et ensuite nous les faisons pivoter de 5 °. Ces éléments supplémentaires sont pour la plupart cachés, mais sont placés de manière à donner l’illusion de profondeur, comme si le papier s’éloignait de la page. Ces ombres accentuent l’effet créé par le dégradé précédent.
Nous devons maintenant répéter le même processus pour nos sections numérotées uniformément.
.section de papier: nième enfant (pair): before z-index: -1; position: absolue; contenu: ""; en bas: 20px; à gauche: 10px; largeur: 50%; en haut: 0; arrière-plan: rgba (0, 0, 0, 0,7); -webkit-box-shadow: -10px -25px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: -10px -25px 15px rgba (0, 0, 0, 0,5); boîte-ombre: -10px -25px 15px rgba (0, 0, 0, 0,5); -webkit-transform: rotation (-5deg); -moz-transform: rotation (-5deg); -o-transformer: faire pivoter (-5deg); -ms-transform: rotation (-5deg); transformer: faire pivoter (-5deg); .paper section: nième enfant (pair): après z-index: -1; position: absolue; contenu: ""; en bas: 20px; à droite: 10px; gauche: auto; largeur: 50%; en haut: 0; arrière-plan: rgba (0, 0, 0, 0,7); -webkit-box-shadow: 10px -25px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: 10px -25px 15px rgba (0, 0, 0, 0,5); boîte-ombre: 10px -25px 15px rgba (0, 0, 0, 0,5); -webkit-transform: rotation (5deg); -moz-transform: rotation (5deg); -o-transformer: faire pivoter (5deg); -ms-transform: rotation (5deg); transformer: faire pivoter (5deg);
Exactement comme avant mais pour quelques détails. Nous visons évidemment les éléments pairs et non impairs, et le positionnement étant différent, l’ombre se situe en haut de la boîte et pivote dans l’autre sens, créant ainsi une sorte d’ombre triangulaire à proximité du point de chaque ". plier". Ici:
Vous aurez remarqué que nous utilisons des pourcentages pour les largeurs et que nous avons mis en place un environnement permettant une conception réactive. Si vous prenez l'exemple tel qu'il est maintenant et le redimensionnez, cela fonctionne assez bien. Mais il y a des imperfections. Ceux-ci peuvent être corrigés avec quelques corrections qui entrent en jeu à certains moments.
Écran @média uniquement et (largeur maximale: 600px) h1 taille de la police: 25px; h2 font-size: plus petit; .paper section: nth-child (pair): after right: 20px; .ection de papier: nième enfant (impair): après droite: 20px; .paper section: nième enfant (pair): before left: 20px; .paper section: nth-child (impair): avant left: 20px;
Donc ici nous venons de rendre nos titres plus petits (encore une fois juste pour la démo), nous avons également dû remplacer légèrement les pseudo-éléments car ils étaient visibles dans de petites fenêtres. J'ai choisi 600px comme point de rupture uniquement parce que c'est à ce moment-là que les ombres sont devenues trop grandes à mes yeux. Encore une fois, cela est complètement ouvert pour que vous puissiez changer selon votre conception.
Comme nous utilisons des gradients CSS3, la compatibilité de navigateur est limitée aux navigateurs modernes et à Internet Explorer 10. Nos gradients ont une propriété de filtre de sauvegarde pour nous donner accès à IE9, de sorte que les réductions ne sont que pour IE8 et les versions antérieures. En réalité, IE8 se déclenche de différentes manières (sélecteurs CSS3, règles de transformation et ombrages de boîtes, oublions donc totalement IE8!) Heureusement, il s’agit d’une dégradation gracieuse et le contenu de la page est parfaitement accessible:
N'oubliez pas que vos requêtes multimédia devront également contenir la seulement mot-clé, pour empêcher IE8 d'analyser tout son contenu par défaut.
Donc là vous l'avez! Un effet de papier plié flexible créé avec des dégradés CSS3, des ombres par boîte et des pseudo-éléments. J'espère que vous avez apprécié ce tutoriel et espéré en tirer quelque chose d'utile. Faites-moi savoir dans les commentaires, j'aimerais entendre vos opinions.
