Videocasty 2025, Leden
Nickova ilustrace měla pro hlavy tři různé vrstvy. Jsou to jen mírně odlišné variace. Mohli bychom obrázky vyměnit pomocí animace "
Když jsem pracoval na tomto designu, byl vydán jQuery 1.8. Toto je jen rychlé video, které se spoléhá na skutečnost, že k takovým věcem dochází při vývoji webů. “
Máme základní záhlaví galerie na místě, ale chybí mu malí modří lidé, které Erica vložila do původní ilustrace. Mluvili jsme o tom v
Právě jsme dostali vlastní záhlaví pro Galerii, takže když jsme na, pokračujme v přidávání další vlastní záhlaví. tenhle udělal “
Za domovskou stránkou je sedm různých hlavních oblastí webu. Takže jsem si najal sedm různých ilustrátorů, aby udělali návrhy. Toto je první, kdo jsme “
Až dosud jsme prováděli změny kódu lokálně bez použití jakéhokoli řízení verzí. S rostoucí složitostí tohoto webu se stává
Máme dobrý začátek s responzivním designem. Nabídka s nejmenší velikostí obrazovky se rozpadá na mřížku 2x4. Hodí se pěkně na obrazovku, ale “
Přidáme určitou odezvu na mřížku, kterou jsme nastavili pro Galerii. Na nejširších obrazovkách to máme nastaveno na čtyři sloupce. Pak začneme přidávat
Ve kterém jsme zjistili problémy, které jsme měli při načítání rozložení sloupců do pěkného načtení. Oprava spočívala v odstranění CSS, které vytvářelo „
Začneme se zabývat rozložením oblasti Galerie, což je něco, na co myslím od začátku tohoto procesu redesignu. Většinou"
Máme rozložení mřížky pro galerii. Načítání je bohužel trochu prudké a rozvážné. Důvodem je, že sloupce CSS3 jsou navrženy tak, aby „
Už jsme strávili trochu času stubováním stránek, aby naše navigace fungovala (video # 030) a můžete klikat po celém webu, ale co je na těchto sub
Ankety na CSS-Tricks mají dlouhou tradici. Jsou zábavné, shromažďují důležitá důležitá data a zvyšují spojení lidí s webem. Zapojení FTW! “
Začali jsme s úplně slušným widgetem pro ankety. Typografie je čistá a vše dokonale použitelné. Nebylo to však úplně přesvědčivé ani zábavné. My"
Horní modul na hlavním postranním panelu webu patří společnosti Treehouse jako hlavnímu sponzorovi CSS-Tricks. Na základě rozhovoru s Ryanem Carsonem, “
Návrh vyhledávání funguje dobře, dokud se nedostaneme k přestávce velikosti „medvídek“ (malý mobilní). Musíme tam udělat něco jiného. Uděláme nějaký pokoj “
Myslím, že poprvé v této sérii přidáme některé nové věci do designu přímo prací v prohlížeči (nespouštěním ve Photoshopu "
Když stisknete velmi úzký prohlížeč pro stolní počítače, můžete si nejasně představit, jak funguje responzivní design, ale nejde o přesnou reprezentaci
Reklama, kterou máme k dispozici, je skvělá pro velké obrazovky / obrazovky pro počítače, ale na menších obrazovkách začne rychle selhávat. Již máme nějaké hraniční body “
Vytvořili jsme vzhled tlačítka v jeho běžném stavu, ale takové 3D tlačítko prosí o „tlačený“ stav. To, co děláme, je přidat tmavší barvu do
Začínáme s úmyslem skočit do HTML a CSSing na Top Treehouse Ad, který jsme právě navrhli, ale samozřejmě se vykolejíme, jakmile začneme “
V horní části stránky máme značku pro reklamu Treehouse, ale musíme udělat nějaké stylové práce. Začneme samotnou grafikou stromu. Jsme "
V záhlaví jsme nechali velké množství otevřeného prostoru. Od samého začátku jsem věděl, že to bude pro hlavního sponzora CSS-Tricks, Treehouse. V tomhle"
Čeká nás ještě trochu práce, abychom dokončili oblast hledání. Dostali jsme odbočku na vteřinu, protože jsem si všiml, že jsme nepřidali trojrozměrný "
Pokračujeme tam, kde jsme přestali ve videu # 034, a pokračujeme v budování oblasti hledání. Tentokrát se zaměřujeme na "otevřený" stav vyhledávání, budování "
Děláme si trochu pauzu od práce na hledání, abychom vyřešili malý problém. „FOUT“ je „Flash nestylovaného textu“. Toto je jev, kdy @ font-face "
Nyní, když jsme ve Photoshopu dosáhli toho, čeho chceme dosáhnout v oblasti vyhledávání, pustili jsme se do jeho vytváření pomocí HTML a CSS. Již máme své ikonové písmo “
Na CSS-Tricks je spousta obsahu. To je jedna z věcí, díky nimž je design trochu náročný. I když můžeme zůstat čistí s designem,
Začínáme hraním s naším modulem příspěvku na blogu, který si pohrává s mezerami. Přidáme také malý barevný čtverec v levé horní části modulu, “
V tomto super rychlém videu přidáváme všechny potřebné CSS, abychom zajistili zvýraznění aktuální položky stránky v hlavní navigaci, když je tato stránka „