Video Screencasts 2025, Januar

Nickova ilustracija je imela tri različne plasti za glave. Gre le za nekoliko drugačne različice. Slike bi lahko zamenjali z animacijo "

Ko sem delal na tej zasnovi, je izšel jQuery 1.8. To je samo hiter videoposnetek, v katerem se lahko zanesete na dejstvo, da se takšne stvari dogajajo med razvojem spletnih mest. "

Osnovno glavo galerije imamo na mestu, manjkajo pa mali modrčki, ki jih je Erica dala na prvotno ilustracijo. O tem smo govorili v "

Pravkar smo pripravili glavo po meri za Galerijo, zato, medtem ko smo pri, nadaljujmo z dodajanjem druge glave po meri. tega je naredil "

Poleg domače strani je sedem različnih glavnih področij spletnega mesta. Tako sem za oblikovanje najel sedem različnih ilustratorjev. To smo prvi, "

Do zdaj smo kode spreminjali lokalno, ne da bi uporabljali kakršen koli nadzor nad različicami. Z naraščanjem kompleksnosti tega spletnega mesta to postaja "

Odziven dizajn smo dobro začeli. Meni pri najmanjših velikostih zaslona se razdeli na mrežo 2x4. Lepo se prilega zaslonu, ampak "

Mreži, ki smo jo nastavili za Galerijo, dodamo nekaj odzivnosti. Na najširših zaslonih imamo nastavljeno na štiri stolpce. Nato začnemo dodajati "

V katerem smo ugotovili težave, s katerimi smo se soočali s tem, da se je postavitev stolpca lepo naložila. Popravek je bil odstraniti CSS, ki je naredil "

Začeli smo se ukvarjati s postavitvijo območja galerije, kar mi je v mislih od začetka tega procesa preoblikovanja. Večinoma "

Za galerijo imamo postavljeno mrežo. Na žalost je nalaganje nekoliko nenadno in nenavadno. To je zato, ker so stolpci CSS3 zasnovani tako, da "

Nekaj ​​časa smo že porabili za kramljanje strani, tako da naša navigacija deluje (Video št. 030) in lahko kliknete po spletnem mestu, toda kaj je na teh pod "

Ankete o CSS-Tricks imajo dolgo tradicijo. So zabavni, zbirajo pomembne pomembne podatke in povečujejo povezavo ljudi s spletnim mestom. Zaroka FTW! "

Zaključili smo s povsem spodobnim pripomočkom za ankete. Tipografija je čista in vse je popolnoma uporabno. Vendar ni bilo ravno prepričljivo ali zabavno. Mi "

Zgornji modul v glavni stranski vrstici spletnega mesta pripada podjetju Treehouse kot glavnemu sponzorju CSS-trikov. Na podlagi pogovora, ki sem ga imel z Ryanom Carsonom, "

Zasnova iskanja deluje v redu, dokler ne pridemo do premora "baby bear" (majhen mobilni telefon). Tam moramo narediti nekaj drugačnega. Naredimo nekaj prostora "

Mislim, da bomo prvič v tej seriji oblikovanju dodali nekaj novih stvari neposredno z delom v brskalniku (ne zaženemo v Photoshopu "

Če stisnete namizni brskalnik zelo ozko, lahko dobite nejasen občutek, kako deluje odziven dizajn, vendar ni natančen prikaz "

Oglas, ki ga imamo na mestu, je odličen za velike zaslone / velikosti namizja, vendar na manjših zaslonih začne precej hitro propadati. Nekaj ​​mejnih točk že imamo "

Ustvarili smo videz gumba v običajnem stanju, toda takšen 3D gumb prosi za "potisnjeno" stanje. Kar naredimo, dodamo temnejšo barvo "

Začnemo z namenom, da skočimo v HTML in CSS z oglasom Top Treehouse, ki smo ga pravkar oblikovali, seveda pa izstopite takoj, ko začnemo. "

Na vrhu strani imamo oznako za oglas Treehouse, vendar nas čaka nekaj stilskega dela. Začnemo s samo drevesno grafiko. Smo "

V glavi smo pustili veliko odprtega prostora. Že na samem začetku sem vedel, da bo to za glavnega sponzorja CSS-Tricks, Treehouse. V tem"

Za dokončanje področja iskanja nas čaka še nekaj dela. Samo sekundo pridemo stran, saj opazimo, da nismo dodali tridimenzionalne "

Nadaljujemo tam, kjer smo končali v videu # 034, in nadaljujemo z gradnjo območja iskanja. Tokrat se osredotočamo na "odprto" stanje iskanja, gradnje "

Malo si oddahnemo od dela na področju iskanja, da bi rešili težavno težavo. "FOUT" je "Flash nestiliziranega besedila". To je pojav, pri katerem @ font-face "

Zdaj, ko smo Photoshopped, kar upamo, da bomo dosegli z iskalnim področjem, smo se lotili gradnje z HTML in CSS. Že imamo pisavo ikone "

V CSS-Tricks je veliko vsebine. To je ena od stvari, zaradi katerih je oblikovanje nekoliko zahtevno. Čeprav lahko ostanemo čisti pri oblikovanju, "

Začnemo z igranjem z našim modulom za objave v spletnem dnevniku, ki se ukvarja z razmikom. V zgornjem levem kotu modula dodamo tudi majhen obarvan kvadrat, "

V tem super hitrem videoposnetku dodamo ves CSS, ki je potreben, da se trenutni element strani v glavni navigaciji označi, ko je ta stran "