Share
Que se passe-t-il lorsque votre zone de contenu principale nécessite deux couleurs d'arrière-plan spécifiques: une pour le contenu principal et une autre pour la barre latérale? Si vous avez déjà essayé d’appliquer l’arrière-plan à chaque conteneur, vous vous êtes sans doute rendu compte que votre mise en page se fragmente rapidement dès que la section du contenu principal dépasse la hauteur de la barre latérale..
En règle générale, la solution consiste à définir une image d'arrière-plan sur l'élément parent et à la redire verticalement. Cependant, si nous devenons intelligents avec les dégradés CSS3, nous pouvons obtenir le même effet avec zéro image. L'ironie est que nous utilisons des dégradés CSS3 pour créer un effet qui ne contient pas de dégradé! Continuez à lire pour en savoir plus.
Commençons par construire une mise en page ridiculement simple. De cette façon, nous pouvons démontrer un problème de mise en page commun que nous avons tous connu à un moment ou à un autre.
Créez un nouveau document HTML et ajoutez ce qui suit à votre corps étiquette:
Mon en-tête
Contenu primaire.
N'oubliez pas que vous pouvez utiliser le
corpsélément comme un wrapper pour votre mise en page. Il suffit de définir unlargeurdirectement aucorps.
Ce que nous avons ici est assez commun. UNE entête l'élément contient une balise de titre; et puis nous avons un principale div, qui abrite le contenu principal, ainsi que le barre latérale.
Ensuite, modélisons un peu cette disposition. Comme nous utilisons le corps élément comme notre wrapper, de toutes sortes, définissons un largeur et couleur de fond.
corps largeur: 700px; marge: auto; arrière-plan: # e3e3e3;
Maintenant, nous allons flotter le contenu principal et le barre latérale à gauche et à droite, respectivement. De plus, comme nous ne travaillons pas avec du contenu réel, nous allons définir une hauteur pour chaque conteneur afin de présenter l'illusion de contenu. Cela ne suffira pas; nous devons également spécifier avec précision la largeur de chacun. Sinon, ils prendront tout l’espace disponible, en raison de leur bloc la nature.
#primary float: left; largeur: 75%; hauteur: 500px; fond: rouge; apartement display: block; / * Parce que l'élément HTML5 * / float: right; largeur: 25%; hauteur: 500px; fond: vert;
Donc, tout cela a l'air bien - pour l'instant. Cependant, des problèmes se posent dès que la hauteur du contenu principal dépasse la hauteur du contenu. barre latérale. En outre, cela sera généralement le cas dans la plupart des situations.
Pour simuler un contenu ajouté, augmentons la hauteur du #primaire div être 700px.
Généralement, la solution à ces types de dilemmes consiste à appliquer une image d’arrière-plan au parent (#principale) élément. Ce sera généralement une petite tranche de l'arrière-plan, qui sera ensuite répété verticalement.
#main … background: url (small / slice / of / background.png) repeat-y;
Problème résolu! Eh bien, pas exactement. Certes, cela fonctionne, cependant, dès que vous décidez de changer une couleur d'arrière-plan, vous êtes alors obligé de revenir à Photoshop pour créer une nouvelle image d'arrière-plan. Quelle traînée!
Une autre solution courante consiste à utiliser JavaScript pour détecter de manière dynamique la largeur de chaque conteneur, puis à leur attribuer la même hauteur. Gardez à l'esprit que cela nécessite alors que votre mise en page dépende de l'activation de JS.
Si nous voulons être avant-gardistes, nous pouvons utiliser les dégradés CSS3 pour obtenir cet effet. Qu'est ce que vous dites? "Mais Jeff, ce sont des couleurs unies; pas des dégradés!" C'est vrai, mais je vais vous montrer un petit truc que j'ai appris. Si vous créez deux arrêts au même emplacement dans un dégradé CSS3, vous obtenez deux couleurs unies. C'est un peu déroutant; laissez-moi démontrer.
Avant de continuer, si vous continuez, revenez à votre projet et supprimez les couleurs d'arrière-plan. Ils ne sont plus nécessaires. Maintenant, nous allons ajouter un dégradé de fond au parent, #principale, conteneur à la place.
#main background: -moz-linear-gradient (gauche, rouge, vert);
Donc, c'est probablement ce à quoi vous vous attendiez. Mais comment cela nous aidera-t-il? Nous avons besoin d’une séparation distincte entre le contenu principal et le contenu. barre latérale.
Cette fois, précisons que le rouge et le vert couleur s'arrête devrait être placé au marqueur de 75%.
#main fond: -moz-linear-gradient (gauche, rouge 75%, vert 75%);
N'est-ce pas génial? Ironiquement, nous utilisons non seulement un dégradé pour créer des couleurs unies, mais les hauteurs de chaque conteneur enfant sont désormais identiques..
Gardez à l'esprit que ce n'est pas tout à fait exact. Ils ont l'illusion d'être à la même hauteur. En réalité, cependant, nous appliquons uniquement un arrière-plan à l'élément parent. le barre latérale est encore plus courte; vous ne pouvez pas dire.
La dernière étape consiste à rendre heureux les navigateurs Webkit (Safari et Chrome). Malheureusement, ils ne sont pas tout à fait d'accord avec Mozilla sur la syntaxe correcte pour créer des dégradés. Leur méthode n'est pas aussi succincte que celle de Mozilla.
#main fond: -moz-linear-gradient (gauche, rouge 75%, vert 75%); arrière-plan: -webkit-gradient (linéaire, gauche en haut, droite en haut, à partir de (rouge), couleur-stop (0,75, rouge), couleur-stop (0,75, vert));
Si vous êtes habitué à la
de()età()fonctions, gardez à l’esprit que ce sont simplement des fonctions d’aide, qui dirigentarrêt de la couleur ().
arrêt de la couleur accepte deux paramètres:
Clarifier, arrêt de couleur (0,75, vert) signifie "à 75% de la largeur de l'élément, la couleur doit maintenant être verte". Alors oui, la syntaxe est différente, mais la conversion ne prend que quelques secondes.
C'est tout ce qu'on peut en dire! S'il vous plaît rappelez-vous qu'il s'agit de techniques CSS3, ce qui signifie qu'IE est laissé pour compte. Gardez toutefois à l'esprit que "tous les sites Web ne doivent pas nécessairement être identiques dans tous les navigateurs".
Qu'est-ce que tu penses? Utiliserez-vous cette méthode, sachant que vous devrez fournir une couleur de secours pour IE, ou aurez recours à des instructions conditionnelles pour utiliser une image de secours?
Accentsconagua