Screencasty wideo 2025, Styczeń

Ilustracja Nicka miała trzy różne warstwy na głowy. To tylko nieco inne wariacje. Moglibyśmy zamienić obrazy na animację „

Kiedy pracowałem nad tym projektem, wydano jQuery 1.8. To tylko krótki film, w którym można polegać na fakcie, że takie rzeczy mają miejsce podczas tworzenia witryn ”

Mamy podstawowy nagłówek galerii, ale brakuje w nim małych niebieskich ludzików, które Erica umieściła na oryginalnej ilustracji. Rozmawialiśmy o tym w „

Właśnie utworzyliśmy niestandardowy nagłówek dla Galerii, więc skoro już jesteśmy, kontynuujmy dodawanie kolejnego niestandardowego nagłówka. ten został wykonany przez „

Poza stroną główną znajduje się siedem różnych głównych obszarów witryny. Zatrudniłem więc siedmiu różnych ilustratorów do wykonania projektów. To jest pierwsza osoba, którą jesteśmy ”

Do tej pory wprowadzaliśmy zmiany w kodzie lokalnie bez korzystania z jakiejkolwiek kontroli wersji. Wraz ze wzrostem złożoności tej witryny staje się to „

Mamy dobry początek w projektowaniu responsywnym. Menu przy najmniejszych rozmiarach ekranu jest podzielone na siatkę 2x4. Dobrze pasuje na ekranie, ale „

Dodajemy trochę responsywności do siatki, którą ustawiliśmy dla Galerii. Na najszerszych ekranach ustawiliśmy go na czterech kolumnach. Następnie zaczynamy dodawać „

W którym rozwiązaliśmy problemy, które mieliśmy z ładnym ładowaniem układu kolumn. Poprawka polegała na usunięciu kodu CSS, który tworzył „

Zaczynamy zagłębiać się w układ obszaru Galerii, o którym myślę od początku tego procesu redesignu. Przeważnie"

Mamy układ siatki dla Galerii. Niestety jego ładowanie jest nieco gwałtowne i chwiejne. Dzieje się tak, ponieważ kolumny CSS3 są zaprojektowane tak, aby „

Spędziliśmy już trochę czasu na wycinaniu stron, aby nasza nawigacja działała (wideo nr 030) i można było poruszać się po witrynie, ale co jest w tych podrzędnych ”

Ankiety na temat sztuczek CSS mają długą tradycję. Są zabawne, zbierają dobre, ważne dane i zwiększają połączenie ludzi z witryną. Zaangażowanie FTW! ”

Zakończyliśmy z całkiem przyzwoitym widżetem ankiety. Typografia jest czysta i wszystko doskonale nadające się do użytku. Jednak nie było to zbyt atrakcyjne ani zabawne. My"

Najwyższy moduł na głównym pasku bocznym witryny należy do Treehouse, jako głównego sponsora CSS-Tricks. Na podstawie rozmowy, którą odbyłem z Ryanem Carsonem, „

Projekt wyszukiwania działa dobrze, dopóki nie przejdziemy do rozmiaru „małego misia” (małego telefonu komórkowego). Musimy tam zrobić coś innego. Robimy trochę miejsca ”

Myślę, że po raz pierwszy w tej serii dodamy kilka nowych rzeczy do projektu bezpośrednio, pracując w przeglądarce (nie zaczynając w Photoshopie ”

Ściśnięcie bardzo wąskiej przeglądarki na komputerze może dać ci niejasne wyobrażenie o tym, jak działa projekt responsywny, ale nie jest to dokładna reprezentacja „

Reklama, którą mamy na miejscu, jest świetna na duże ekrany / komputery stacjonarne, ale na mniejszych ekranach zaczyna dość szybko zawodzić. Mamy już kilka punktów przerwania ”

Stworzyliśmy wygląd przycisku w jego normalnym stanie, ale taki przycisk 3D błaga o stan „wciśnięty”. Dodajemy ciemniejszy kolor do „

Zaczynamy z zamiarem wskoczenia do HTML i CSS, aby wyświetlić reklamę Top Treehouse, którą właśnie zaprojektowaliśmy, ale oczywiście zostajemy wykolejeni, gdy tylko zaczniemy ”

Mamy znaczniki dla reklamy Treehouse u góry strony, ale musimy wykonać trochę pracy związanej ze stylizacją. Zaczynamy od samej grafiki drzewa. Byli"

W nagłówku zostawiliśmy dużą ilość wolnego miejsca. Od samego początku wiedziałem, że będzie to główny sponsor CSS-Tricks, Treehouse. W tym"

Mamy jeszcze trochę pracy, aby dokończyć obszar poszukiwań. Zostajemy zboczeni na sekundę, ponieważ zauważyłem, że nie dodaliśmy trójwymiarowości "

Rozpoczynamy od miejsca, w którym zakończyliśmy, w filmie nr 034 i kontynuujemy tworzenie obszaru wyszukiwania. Tym razem skupiamy się na „otwartym” stanie wyszukiwania, budowaniu

Robimy sobie małą przerwę od pracy nad wyszukiwaniem, aby rozwiązać dręczący problem. „FOUT” oznacza „Flash of Unstyled Text”. To jest zjawisko, w którym @ font-face "

Po dodaniu Photoshopa do tego, co mamy nadzieję osiągnąć w obszarze wyszukiwania, zabraliśmy się za tworzenie go za pomocą HTML i CSS. Mamy już naszą czcionkę ikony ”

W CSS-Tricks jest dużo treści. To jedna z rzeczy, która sprawia, że ​​projekt jest nieco trudny. Chociaż możemy zachować czystość w projekcie, „

Zaczynamy od zabawy z naszym modułem postów na blogu, bawiąc się spacjami. Dodajemy również mały kolorowy kwadrat w lewym górnym rogu modułu:

W tym superszybkim filmie dodajemy wszystkie kody CSS niezbędne do upewnienia się, że bieżący element strony w głównym obszarze nawigacji zostanie podświetlony, gdy ta strona jest „