Share
Wat gebeurt er wanneer uw hoofdinhoudgebied twee specifieke achtergrondkleuren nodig heeft: één voor de primaire inhoud en één voor de zijbalk? Als je ooit hebt geprobeerd de achtergrond van elke container zelf toe te passen, zul je je ongetwijfeld hebben gerealiseerd dat je layout snel gefragmenteerd raakt zodra, bijvoorbeeld, het gedeelte met de primaire content de hoogte van de zijbalk overschrijdt.
Over het algemeen is de oplossing om een achtergrondafbeelding op het bovenliggende element in te stellen en in te stellen dat deze verticaal wordt herhaald. Als we echter slim worden met CSS3-gradiënten, kunnen we hetzelfde effect bereiken met nulafbeeldingen. De ironie hierin is dat we CSS3-gradiënten gebruiken om een effect te creëren dat geen gradiënt bevat! Lees verder voor meer informatie.
Laten we beginnen met het opbouwen van een belachelijk eenvoudige lay-out. Op die manier kunnen we een algemeen lay-outprobleem laten zien dat we allemaal op een bepaald moment hebben ervaren.
Maak een nieuw HTML-document en voeg het volgende toe aan uw lichaam label:
Mijn kop
Primaire inhoud.
Vergeet niet dat je de
lichaamelement als een wrapper voor uw lay-out. Stel eenvoudig eenbreedterechtstreeks naar delichaam.
Wat we hier hebben, is redelijk gebruikelijk. EEN hoofd element bevat een heading-tag; en dan hebben we een hoofd div, waarin de primaire inhoud is ondergebracht, evenals de zijbalk.
Laten we vervolgens deze lay-out een beetje stylen. Terwijl we de gebruiken lichaam element als onze verpakking, van soort, laten we een instellen breedte en achtergrondkleur.
body width: 700px; marge: automatisch; achtergrond: # e3e3e3;
Nu laten we de primaire inhoud en de zijbalk naar links en rechts, respectievelijk. Omdat we niet met echte inhoud werken, stellen we ook een hoogte voor elke container om de illusie van inhoud te presenteren. Dit zelf zal niet genoeg zijn; we moeten ook precies specificeren hoe breed elk zou moeten zijn. Anders nemen ze alle beschikbare ruimte in beslag vanwege hun blok natuur.
#primary float: left; breedte: 75%; hoogte: 500 px; achtergrond: rood; opzij display: block; / * Omdat HTML5 element * / float: right is; breedte: 25%; hoogte: 500 px; achtergrond: groen;
Dit ziet er dus prima uit - voor nu. Er treden echter problemen op zodra de hoogte van de primaire inhoud de hoogte van de primaire inhoud overschrijdt zijbalk. Verder zal dit typisch in de meeste situaties het geval zijn.
Om de toegevoegde inhoud te simuleren, verhogen we de hoogte van de #primary div zijn 700px.
Doorgaans is de oplossing voor dit soort dilemma's om een achtergrondafbeelding toe te passen op de ouder (#hoofd) element. Dit is meestal een klein stukje van de achtergrond, dat vervolgens verticaal wordt herhaald.
#main ... background: url (small / slice / of / background.png) repeat-y;
Probleem opgelost! Nou, niet precies. Toegegeven, dit werkt echter wel, zodra u besluit een achtergrondkleur te veranderen, bent u gedwongen terug te gaan naar Photoshop om een nieuwe achtergrondafbeelding te maken. Wat een sleur!
Een andere veelvoorkomende oplossing is om JavaScript te gebruiken om de breedte van elke container dynamisch te detecteren en vervolgens dezelfde hoogte te maken. Houd er rekening mee dat dit vervolgens vereist dat uw lay-out afhankelijk is van het inschakelen van JS.
Als we vooruitdenkenden willen zijn, kunnen we CSS3-gradiënten gebruiken om dit effect te bereiken. Wat zeg je? "Maar Jeff, dit zijn effen kleuren, geen verlopen!" Klopt, maar ik zal je een klein beetje laten zien dat ik heb geleerd. Als u twee stops maakt op dezelfde locatie in een CSS3-verloop, krijgt u twee effen kleuren. Dat is een beetje verwarrend; laat me demonstreren.
Voordat we verder gaan, ga je terug naar je project en verwijder je de achtergrondkleuren. Ze zijn niet langer nodig. Nu voegen we een achtergrondverloop toe aan de ouder, #hoofd, container in plaats daarvan.
#main background: -moz-linear-gradient (links, rood, groen);
Dus dat was waarschijnlijk wat je verwachtte. Maar hoe zal dat ons helpen? We hebben een duidelijke scheiding nodig tussen de primaire inhoud en de zijbalk.
Laten we dit keer aangeven dat zowel het rode als het groene kleur-stops moet op de 75% -markering worden geplaatst.
#main background: -moz-linear-gradient (links, rood 75%, groen 75%);
Is dat niet geweldig? We gebruiken niet alleen een verloop om effen kleuren te maken, ironisch genoeg, maar ook de hoogtes van elke onderliggende container zijn nu identiek.
Houd er rekening mee dat dit niet helemaal correct is. Ze hebben de illusie dat ze dezelfde hoogte hebben. In werkelijkheid passen we echter alleen een achtergrond toe op het bovenliggende element. De zijbalk is nog steeds korter; je kunt het gewoon niet vertellen.
De laatste stap is om de Webkit-browsers (Safari en Chrome) tevreden te stellen. Helaas zijn ze het niet helemaal met Mozilla eens wat betreft de juiste syntaxis voor het maken van verlopen. Hun methode is niet zo bondig als die van Mozilla.
#main background: -moz-linear-gradient (links, rood 75%, groen 75%); achtergrond: -webkit-gradiënt (lineair, linker boven, recht boven, van (rood), kleur-stop (.75, rood), kleur-stop (.75, groen));
Als je gewend bent aan de
van()ennaar()functies, houd er rekening mee dat dit eenvoudigweg hulpfuncties zijn waarnaar wordt verwezencolor-stop ().
kleur-stop accepteert twee parameters:
Verduidelijken, kleurstop (.75, groen) betekent: "bij 75% van de breedte van het element moet de kleur nu groen zijn." Dus ja, de syntaxis is anders, maar het kost maar een paar seconden om te converteren.
Dat is alles wat er is! Houd er rekening mee dat dit CSS3-technieken zijn, wat betekent dat IE koud is. Houd er echter rekening mee: "niet alle websites moeten er in elke browser hetzelfde uitzien."
Wat denk je? Gebruik je deze methode, wetende dat je een fallback-kleur moet opgeven voor IE, of gebruik je conditionele statements om een fallback-image te gebruiken??
Accentsconagua