Mamy całą zawartość, której potrzebujemy na wyjściu tej strony, i mamy na miejscu nagłówek. Teraz możemy rozpocząć CSS w projektowaniu treści w Photoshopie.
Jedną z rzeczy, które zrobiliśmy, było uczynienie listy siedmiu kategorii statyczną. To tylko jedno wywołanie wp_list_pages () mniej, a przez to nieco wydajniejsze. Jeśli kiedykolwiek zmienimy kategorie, to taka wielka rzecz, że ponowne odwiedzanie tego kodu nie jest trudne.
Zasadniczo potrzebujemy tutaj projektu dwukolumnowego. Jest to dość łatwe do zrobienia, po prostu unosząc kilka elementów div (lub, co bardziej prawdopodobne, używając naszej istniejącej struktury grid). Ale to nie pomaga nam w tworzeniu kolumn o „równych wysokościach”, jak nakazuje nasz projekt. W końcu elementy div bez ustawionych wysokości są tak wysokie, jak ich zawartość. Ustawienie wysokości elementu div jest ogólnie złym pomysłem.
Aby uzyskać kolumny o równej wysokości, udajemy, że to zgrabny pomysł, w którym używamy jednego dużego elementu div wrapper (który jest tak wysoki, jak najwyższa z kolumn, które zawiera) i ustawiamy gradientowe tło. Nie jest to gradient przenikający jeden kolor do innego, ale gradient z twardymi przystankami dokładnie tam, gdzie łamie się kolumna. Daje nam to potrzebną nam szarość po lewej i biel po prawej.
Stosujemy różne kolory tła do każdego linku kategorii w lewej kolumnie za pomocą serii selektorów: nth-child (). Decydujemy się na to raczej w ten sposób niż na klasy, ponieważ kolejność kolorów jest ważniejsza niż dopasowanie koloru do kategorii (jest to raczej dowolne).
Zanim skończymy z tym screencastem, wprowadzamy efekt cienia (wyraźne oddzielenie kolumn), stosując pseudoelement do nawigacji, która rozciąga się od góry do dołu strony. Ten pseudoelement ma własny gradient od czerni do przezroczystości, który sprawia, że wygląda jak cień.