Videozáznamy z videa 2025, Apríl
Návrh komentárov môže vyzerať veľmi jednoducho. A to je! Myslím si však, že v tomto prípade je jednoduché. Komentáre sú takou dôležitou súčasťou CSS-trikov “
Začneme sa tu hrabať vo Photoshope a navrhujeme oblasť komentárov. Začíname na vrchole, čo znamená jednotlivé komentáre samotné (na rozdiel od „
Začíname asi tak, že sa pozrieme na niektoré gruntové práce, ktoré som urobil v zákulisí, a objasnili niektoré veci, ktoré bolo treba urobiť. Rovnako ako pridanie do zvyšku „
Sme dosť blízko k dokončeniu vytvárania domovskej stránky oblasti Snippets na webe. Hneď začneme dolaďovať veci a dostávať viac vecí do “
S dizajnom oblasti úryvkov „hotovo“ - teraz môžeme prejsť na interaktivitu (čítaj: JavaScript). Pre odkazy pridávame super chromé pretočenie
Teraz máme návrh Photoshopu, z ktorého môžeme pracovať na domovskej stránke oblasti Snippets. Je oveľa prehľadateľnejší ako predtým, ale udržuje dúhu “
Je čas sa ponoriť do oblasti Snippets! Teda jeho skutočná obsahová oblasť. Hlavičku už máme umiestnenú. Oblasť úryvkov je veľmi populárna. ““
V tomto obrazovom vysielaní zhŕňame časť Almanach. V Almanachu je celkom jasná hierarchia. Vychádza to: Domov> Domov Almanachu> Vlastníctvo alebo selektor> „“
Tu skočíme len o maličkosť. Toto je celkom komplexná séria obrazoviek, ale je to iba asi 40 hodín a samozrejme tento skutočný projekt. “
Lokálne sme už pracovali na lokálnej doméne (v10.whatup). Teraz je čas začať s prechodom na WordPress. Budeme naďalej pracovať lokálne “
Na výstupe z tejto stránky máme všetok obsah, ktorý potrebujeme, a hlavičku máme na svojom mieste. Teraz môžeme začať CSSin 'obsah do dizajnu, do ktorého ideme “
Keď začneme pracovať na WordPress, bude najlepšie, keď zachytíme presnú kópiu živej databázy, s ktorou budeme pracovať lokálne. Niektoré weby obsahujú napríklad „
Teraz, keď sme bojovali so získavaním správneho obsahu na domovskej stránke Almanachu, môžeme pomocou CSS načrieť do niekoľkých skutočných štýlov. Rozhodli sme sa ísť “
V tomto vysielaní sa do veľkej miery zaoberáme oranžovou farbou „Photostar“, ktorá dominuje v päte. Hviezdu vytvoríme v samostatnom súbore vo Photoshope, aby sme mohli vytvoriť „
Hlavička Alamancov prišla, tentoraz od Giovanniho Difetericiho. Na začiatok používame veľa techník, ktoré sme už vytvorili
Prišla vlastná ilustrácia hlavičky pre sekciu videí, tentokrát od Alyssy Nassner. Trávime trochu času organizovaním súboru Photoshopu a “
V tomto poslednom vysielaní vytvárania päty pracujeme na spodnej päte, kde sú oblasti CodePen a ShopTalk. Musíme zmeniť HTML a "
V tomto obrazovom vysielaní sa zameriavame na čiary pod odkazmi v hornej časti päty. Nejako narazíme na to, čo by malo byť “
Vstúpila hlava úryvkov, tentoraz Reagan Ray. Trávime trochu času vo Photoshope, tentokrát trochu zamiešame veci, aby sme sa uistili, že “
Vďaka štruktúre HTML pre pätu máme to, čo potrebujeme, aby sme mohli začať stylovať a aby táto päta vyzerala ako to, čo sme navrhli vo Photoshope. “
Toto je posledná z práce vo Photoshope, ktorú urobíme konkrétne o päte predtým, ako skočíme do jej skutočnej stavby. V tomto vysielaní „
Pracujeme na vytvorení vzoru päty vo Photoshope. Rýchle pripomenutie: Pracujem vo Photoshope, pretože sa tam cítim kreatívnejšie, než preskočím “
V tomto obrazovom vysielaní sa pustíme do ďalších biznisov Photoshoppinu a načrtneme spodnú časť päty s odkazmi na moje dva ďalšie najväčšie projekty, CodePen “
Vydávame sa na skvelú cestu, ktorá je pätou! CSS-Tricks vždy mali veľkú efektnú pätu a tento dizajn nebude výnimkou. Nie je to čisto “
Vďaka nášmu dizajnu päty, ktorý je pripravený na použitie vo Photoshope, ho môžeme začať stavať do našej statickej makety HTML a CSS. Prvý krok je dať “
Máme ďalšiu zónu BSA, ktorá sa integruje do tohto webu. Ten by mal byť o niečo ľahší, pretože už máme zavedený JavaScript a je to len „
Máme maketu toho, ako chceme, aby naše zóny BuySellAds vyzerali, takže poďme ďalej na jej budovanie. Webová stránka BuySellAds poskytuje požadovaný kód. “
Jediná vec, ktorá teraz chýba v našej hlavičke Fóra pre colné správy, je časť, ktorá v skutočnosti hovorí „Fóra“! Nick ilustroval ruku držiacu znamenie, ktoré bolo myslené „
Teraz, keď už vieme, s akými zónami pracujeme, vrátime sa do Photoshopu a vysmievame sa, ako chceme, aby tieto reklamné zóny vyzerali. Máme precedens pre „
Ako viete, niektoré reklamy na trikoch CSS sú akosi „samostatne spravované“, ako napríklad hlavný sponzor Treehouse. Vzal som to ďalej, pretože je to iba jeden “