Share
Vad händer när ditt huvudsakliga innehållsområde behöver två specifika bakgrundsfärger: en för det primära innehållet och en annan för sidofältet? Om du någonsin har försökt att applicera bakgrunden till varje behållare själv, har du utan tvekan insett att din layout snabbt blir fragmenterad så snart som huvudämne sektionen överstiger sidobalkens höjd.
I allmänhet är lösningen att ställa in en bakgrundsbild på moderelementet och ställa in det för att repetera vertikalt. Om vi blir smarta med CSS3-gradienter kan vi dock uppnå samma effekt med nollbilder. Ironin i detta är att vi använder CSS3-gradienter för att skapa en effekt som inte innehåller en gradient! Läs vidare för att lära dig mer.
Låt oss börja med att bygga en löjligt enkel layout. På det sättet kan vi visa en gemensam layoutfråga som vi alla har upplevt på en eller annan punkt.
Skapa ett nytt HTML-dokument och lägg till följande i din kropp märka:
Min rubrik
Primärt innehåll.
Glöm inte att du kan använda
kroppelement som ett omslag för din layout. Ange bara abredddirekt tillkropp.
Det vi har här är ganska vanligt. en rubrik elementet innehåller en rubrik tagg och då har vi en huvud div, som rymmer det primära innehållet, liksom sidofältet.
Låt oss sedan utforma denna layout lite. När vi använder kropp element som vår omslag, sorts, låt oss sätta en bredd och bakgrundsfärg.
kropp bredd: 700px; marginal: auto; bakgrund: # e3e3e3;
Nu flyter vi det primära innehållet och sidofältet till vänster respektive höger. Eftersom vi inte arbetar med något verkligt innehåll ställer vi in en höjd för varje behållare för att presentera illusionen av innehållet. Detta i sig kommer inte att vara tillräckligt; Vi måste också ange exakt hur stor varje ska vara. Annars tar de upp all ledigt utrymme på grund av deras blockera natur.
#primary float: left; bredd: 75%; höjd: 500px; bakgrund: röd; åt sidan display: block; / * Eftersom HTML5-elementet * / float: höger; bredd: 25%; höjd: 500px; bakgrund: grön;
Så, det här ser bara bra ut - för nu. Problem uppstår emellertid så snart höjden av primärinnehållet överstiger höjden på sidofältet. Vidare är det vanligtvis fallet i de flesta situationer.
För att simulera tillsatt innehåll, låt oss öka höjden på #primär div att vara 700px.
Typiskt är lösningen på dessa typer av dilemma att applicera en bakgrundsbild till föräldern (#main) elementet. Detta kommer vanligtvis att vara en liten bit av bakgrunden, som sedan upprepas vertikalt.
#main ... background: url (small / slice / of / background.png) repeat-y;
Problemet löst! Tja, inte exakt. Det här gör verkligen, men när du bestämmer dig för att ändra en bakgrundsfärg, måste du återvända till Photoshop för att skapa en ny bakgrundsbild. Vad ett drag!
En annan vanlig lösning är att använda JavaScript för att dynamiskt detektera bredden på varje behållare och göra dem i samma höjd. Tänk på att detta kräver att din layout är beroende av att JS är aktiverad.
Om vi vill vara framtänkare kan vi använda CSS3-gradienter för att uppnå denna effekt. Vad är det du säger? "Men Jeff, dessa är soliga färger, inte gradienter!" Visst, men jag ska visa dig ett litet knep jag lärde mig. Om du skapar två stopp på samma plats i en CSS3-gradient kommer du att sluta med två solida färger. Det är lite förvirrande; låt mig demonstrera.
Innan vi fortsätter, om du arbetar tillsammans, återvänd till ditt projekt och ta bort bakgrundsfärgerna. De behövs inte längre. Nu lägger vi till en bakgrundsgradient till föräldern, #main, behållare istället.
#main background: -moz-linear-gradient (vänster, röd, grön);
Så det är nog vad du förväntade dig. Men hur kan det hjälpa oss? Vi behöver en distinkt separation mellan primärt innehåll och sidofältet.
Den här gången, låt oss ange att både den röda och den gröna färg-stopp bör placeras vid 75% markören.
#main background: -moz-linear-gradient (vänster, röd 75%, grön 75%);
Är det inte häftigt? Inte bara använder vi en gradient för att skapa solida färger, ironiskt nog, men också höjden för varje barnbehållare är nu identiska.
Tänk på att detta inte är helt korrekt. De har en illusion att vara samma höjd. I själva verket tillämpar vi bara en bakgrund till moderelementet. De sidofältet är fortfarande kortare; du kan bara inte berätta.
Det sista steget är att göra Webkit-webbläsare (Safari och Chrome) lycklig. Tyvärr är de inte helt överens med Mozilla på rätt syntax för att skapa gradienter. Deras metod är inte lika succinkt som Mozillas.
#main background: -moz-linear-gradient (vänster, röd 75%, grön 75%); bakgrund: -webkit-gradient (linjär, vänster topp, höger topp, från (röd), färgstopp (.75, röd), färgstopp (.75, grön));
Om du är van vid
från()ochtill()funktioner, kom ihåg att de bara är hjälparfunktioner, som leder tillfärg-stop ().
färg-stop accepterar två parametrar:
Att förtydliga, färgstopp (.75, grön) betyder "vid 75% av elementets bredd, färgen ska nu vara grön." Så ja, syntaxen är annorlunda, men det tar bara några sekunder att konvertera.
Det är allt det finns! Kom ihåg att det här är CSS3-tekniker, vilket innebär att IE lämnas ut i kylan. Tänk på: "inte alla webbplatser måste se identiskt ut i varje webbläsare."
Vad tror du? Kommer du använda den här metoden, med vetskap om att du måste tillhandahålla en fallback-färg för IE, eller använda sig av villkorliga uttalanden för att använda en återgångsbild?
Accentsconagua