# 071: CSSing the Footer, Part 1 - CSS-tricks

Anonim

Med HTML-strukturen för sidfoten på plats har vi vad vi behöver för att börja styla och få den här sidfoten att se ut som den vi designade i Photoshop.

Vi skapar en ny SCSS-fil bara för sidfoten, för det är bara meningsfullt att hålla modulärt och det är vad vi har gjort för allt annat. Vi @importerar det till huvudformatet längst ner.

Vi mörknar sidfoten med bara en liten RGBa-bakgrund. Sass hjälper oss lite eftersom du kan göra detta i Sass som är super cool: rgba(black, 0.5); Vi använder en infälld rutaskugga för att skapa den hyllliknande effekten.

Vi skjuter in innehållet bort från kanterna med vänster och höger stoppning. Vi måste genast justera mängden av vadderingen baserat på den aktuella brytpunkten.

Vi utformar bottenfoten på ungefär samma sätt. Det är bara lite mörkare att få det att se en annan nivå lägre ut.