# 106: Building Snippets Area, Part 3 (HTML & CSS) - Triky CSS

Anonim

Jsme docela blízko dokončení stavby domovské stránky oblasti Snippets na webu. Hned začneme vylepšovat věci a dostávat do formy další věci.

Máme divný zážitek, kdy absolutně umístěný pseudo prvek nereagoval na negativní levý okraj, ale byl v pořádku s pozitivním pravým okrajem. Kdo ví.

Poté přejdeme k vytvoření „aktivní“ třídy pro levou nabídku kategorií úryvků. Procházíte pouze jeden z nich najednou (vpravo najdete seznam souvisejících úryvků). Řekněme, že „HTML“ je aktivní a kliknete na „CSS“, vpravo se zobrazí nový seznam pouze úryvků souvisejících s CSS. Musí být zaveden nějaký styl, aby bylo možné ukázat, který je aktivní. Změna z-indexu na aktivní třídě je pro nás dostačující (aby seděla nad stínem).

Pro seznam vpravo je lákavé, aby se odkazy zobrazovaly: blok - ale je to téměř příliš klikatelná oblast. Zdá se divné si to myslet, ale myslím, že je to pravda. Nechcete, aby se náhodná kliknutí aktivovala příliš daleko od textu samotného odkazu. Bylo by to překvapivé a divné. Samotné odkazy tedy mohou být inline-block, aby mohly mít nějaké polstrování, ale nevyplňujte celou šířku jako položka seznamu, ve které jsou.

U samotných odkazů se rozhodneme, že zbarvení názvu úryvků v barvě kategorie, do které patří, je příliš silné. Místo toho budou odkazy šedé, ale barva přechodu může mít tuto speciální barvu.

Rovněž jsme se rozhodli, že prozatím funguje seznam přímo jednoho sloupce, ale pokud by se rolování stalo příliš směšným, možná se jednoho dne můžeme rozdělit do dvou sloupců a zkrátit to.