Videozáznamy z videa 2025, Apríl
Nickova ilustrácia mala tri rôzne vrstvy pre hlavy. Sú to len mierne odlišné variácie. Obrázky by sme mohli vymeniť pomocou animácie. “
Keď som pracoval na tomto dizajne, vyšiel jQuery 1.8. Toto je iba rýchle video, ktoré sa spolieha na to, že k takýmto veciam dochádza pri vývoji webových stránok. “
Máme umiestnenú základnú hlavičku galérie, ale chýbajú jej malí modrí ľudia, ktorých Erica vložila do pôvodnej ilustrácie. Hovorili sme o tom v
Práve sme dostali vlastnú hlavičku pre Galériu na miesto, takže keď sme už pri, pokračujme v pridávaní ďalšej vlastnej hlavičky. tento urobil “
Za domovskou stránkou je sedem rôznych hlavných oblastí webu. Na dizajnovanie som si teda najal sedem rôznych ilustrátorov. Toto je prvý, kto sme “
Doteraz sme uskutočňovali zmeny kódu lokálne bez použitia akejkoľvek kontroly verzie. S narastajúcou zložitosťou tohto webu sa stáva „
Dobrý štart do responzívneho dizajnu máme dobrý. Ponuka s najmenšou veľkosťou obrazovky sa rozpadá na mriežku 2 x 4. Pekne sa to hodí na obrazovku, ale “
Pridávame určitú odozvu na mriežku, ktorú sme nastavili pre Galériu. Na najširších obrazovkách to máme nastavené na štyri stĺpce. Potom začneme pridávať „
V ktorom zisťujeme problémy, ktoré sme mali s pekným načítaním rozloženia stĺpcov. Oprava spočívala v odstránení CSS, ktoré vytváralo „
Začíname rýpať rozloženie oblasti Galérie, čo je niečo, na čo som myslel od začiatku tohto procesu redizajnu. Väčšinou “
Máme pripravené rozloženie mriežky pre galériu. Načítanie je bohužiaľ trochu prudké a neslušné. Je to tak preto, lebo stĺpce CSS3 sú navrhnuté tak, aby „
Už sme strávili trochu času vyraďovaním stránok, aby naša navigácia fungovala (video # 030) a vy sa môžete preklikávať po celom webe, ale čo je na týchto sub “
Ankety o CSS-Tricks majú dlhoročnú tradíciu. Sú zábavné, zhromažďujú dôležité dôležité údaje a zvyšujú spojenie ľudí s webom. Zapojenie FTW! “
Nakoniec sme skončili s úplne slušným widgetom pre prieskum. Typografia je čistá a všetko dokonale použiteľné. Nebolo to však práve pútavé ani zábavné. My "
Horný modul na hlavnom bočnom paneli stránky patrí spoločnosti Treehouse ako hlavnému sponzorovi CSS-Tricks. Na základe rozhovoru, ktorý som viedol s Ryanom Carsonom, “
Dizajn vyhľadávania funguje dobre, až kým sa nedostaneme k zlomeniu veľkosti „malého medveďa“ (malého mobilného telefónu). Musíme tam urobiť niečo iné. Vyrábame trochu miestnosti “
Myslím si, že prvýkrát v tejto sérii pridáme do dizajnu niektoré nové veci priamo prácou v prehliadači (nespúšťame vo Photoshope)
Stlačením veľmi úzkeho prehliadača v počítači môžete získať neurčitý prehľad o tom, ako funguje responzívny dizajn, ale nejde o presné vyjadrenie „
Reklama, ktorú máme zavedenú, je skvelá pre veľké obrazovky alebo obrazovky pre počítače. Na menších obrazovkách však začne dosť rýchlo zlyhávať. Už máme nejaké hraničné body “
Vytvorili sme vzhľad tlačidla v jeho bežnom stave, ale také 3D tlačidlo prosí o „stlačený“ stav. To, čo robíme, je pridať tmavšiu farbu do „
Začíname s úmyslom preskočiť na HTML a CSSing reklamu na vrchu Treehouse, ktorú sme práve navrhli, ale samozrejme sa hneď ako začneme vykoľajiť “
Značku máme zavedenú pre reklamu Treehouse v hornej časti stránky, ale musíme urobiť niekoľko úprav. Začíname so samotnou stromovou grafikou. My sme
V hlavičke sme nechali veľké množstvo otvoreného priestoru. Od samého začiatku som vedel, že to bude pre hlavného sponzora CSS-Tricks, Treehouse. V tomto"
Čaká nás ešte trochu práce, aby sme dokončili oblasť vyhľadávania. Dostali sme sa na vedľajšiu koľaj na chvíľu, ako som si všimol, že sme nepridali trojrozmerný objekt
Pokračujeme tam, kde sme skončili vo videu # 034, a pokračujeme v budovaní oblasti vyhľadávania. Tentokrát sa zameriavame na „otvorený“ stav vyhľadávania, budovania.
Trochu si oddýchneme od práce na vyhľadávaní, aby sme vyriešili trochu nepríjemný problém. „FOUT“ je „Flash neštýlovaného textu“. Toto je jav, keď @ font-face "
Teraz, keď sme vo Photoshope, čo dúfame, že dosiahneme v oblasti vyhľadávania, pustili sme sa do jej vytvárania pomocou HTML a CSS. Už máme svoje ikonové písmo “
V CSS-Tricks je veľa obsahu. To je jedna z vecí, vďaka ktorým je dizajn trochu náročný. Aj keď dokážeme zostať pri dizajne čistí, „
Začíname hraním sa s našim modulom blogových príspevkov a fušovaním do medzier. Pridáme tiež malý farebný štvorec v ľavej hornej časti modulu, “
V tomto super rýchlom videu pridávame všetky potrebné CSS, aby sme zaistili zvýraznenie aktuálnej položky stránky v hlavnej navigácii, keď je táto stránka „