Video Screencasts 2025, September

Nicks illustration havde tre forskellige lag til hovederne. De er bare lidt forskellige variationer. Vi kunne bytte billederne ud med en animation "

Da jeg arbejdede på dette design, blev jQuery 1.8 frigivet. Dette er bare en hurtig video, der bygger på, at denne slags ting sker, når du udvikler websteder "

Vi har det grundlæggende gallerihoved på plads, men det mangler de små blå mennesker, som Erica satte i den originale illustration. Vi havde talt om det i "

Vi har lige fået den brugerdefinerede header til galleriet på plads, så mens vi er ved, lad os fortsætte med at tilføje en anden tilpasset header. denne blev gjort af "

Der er syv forskellige hovedområder på siden ud over hjemmesiden. Så jeg hyrede syv forskellige illustratorer til at lave designs. Dette er den første, vi er "

Indtil nu har vi foretaget kodeændringer lokalt uden at bruge nogen form for versionskontrol. Med kompleksiteten af ​​dette site stigende, bliver det "

Vi har en god start på det responsive design. Menuen i de mindste skærmstørrelser opdeles i et 2x4-gitter. Det passer pænt på skærmen, men "

Vi tilføjer noget lydhørhed til det gitter, vi har oprettet til galleriet. På de bredeste skærme har vi den indstillet til fire kolonner. Så begynder vi at tilføje i "

Hvor vi finder ud af de problemer, vi havde med at få kolonnelayoutet til at indlæse pænt. Løsningen var at fjerne CSS, der lavede "

Vi begynder at grave i layoutet af galleriområdet, hvilket jeg har tænkt på siden starten af ​​denne redesignproces. For det meste"

Vi har gitterlayoutet til galleriet i gang. Desværre er indlæsningen af ​​den lidt brat og uhyggelig. Dette skyldes, at CSS3-kolonner er designet til at "

Vi har allerede brugt lidt tid på at stubbe sider ud, så vores navigation fungerer (Video nr. 030), og du kan klikke rundt på siden, men hvad er der i disse underordnede "

Der er en lang tradition for afstemninger om CSS-tricks. De er sjove, samler vigtige vigtige data og øger folks forbindelse til webstedet. Forlovelse FTW! "

Vi slap med en helt anstændig afstemningswidget. Typografien er ren og alt perfekt brugbart. Det var dog ikke ligefrem overbevisende eller sjovt. Vi"

Topmodulet i sidens hovedfelt tilhører Treehouse som hovedsponsor for CSS-Tricks. Baseret på en samtale, jeg havde med Ryan Carson, "

Søgningsdesignet fungerer fint, indtil vi kommer ned til vores "baby bjørn" (lille mobil) størrelse pause. Vi er nødt til at gøre noget andet der. Vi laver lidt plads "

For jeg tror første gang i denne serie vil vi tilføje nogle nye ting til designet direkte ved at arbejde i browseren (starter ikke i Photoshop "

At klemme ned en desktop-browser meget smal kan give dig en vag fornemmelse af, hvordan et responsivt design fungerer, men det er ikke en nøjagtig gengivelse af en "

Den annonce, vi har på plads, er fantastisk til store / desktop-skærme, men den begynder at fejle ret hurtigt på mindre skærme. Vi har allerede nogle brudpunkter "

Vi har oprettet udseendet af en knap i den normale tilstand, men en sådan 3D-knap beder om en "skubbet" tilstand. Hvad vi gør er at tilføje en mørkere farve til "

Vi starter med den hensigt at springe ind i HTML & CSSing den øverste Treehouse-annonce, som vi netop har designet, men naturligvis afspores, så snart vi starter "

Vi har markeringen på plads til Treehouse-annoncen øverst på siden, men vi har noget stylingarbejde at gøre. Vi starter med selve trægrafikken. Vi er "

Vi har efterladt en stor mængde åben plads i overskriften. Helt fra starten vidste jeg, at dette ville være for CSS-Tricks primære sponsor, Treehouse. I denne"

Vi har lidt mere arbejde at gøre for at afslutte søgeområdet. Vi bliver sidetracked i et sekund, da jeg bemærker, at vi ikke tilføjede det tredimensionelle "

Vi fortsætter, hvor vi slap i Video # 034, og fortsætter med at opbygge søgeområdet. Denne gang fokuserer vi på den "åbne" tilstand for søgning, bygning "

Vi tager en lille pause fra at arbejde med søgning for at løse et lille niggling-problem. "FOUT" er "Flash af unstyled tekst". Dette er fænomen, hvor @ font-face "

Nu hvor vi har Photoshopped, hvad vi håber at opnå med søgeområdet, satte vi os i gang med at opbygge det med HTML og CSS. Vi har allerede vores ikonfont "

Der er meget indhold på CSS-Tricks. Det er en af ​​de ting, der gør det design lidt udfordrende. Mens vi kan holde os rene med designet, "

Vi starter med at lege med vores blogindlægsmodul og snakke med afstand. Vi tilføjer også den lille farvede firkant øverst til venstre i modulet, "

I denne superhurtige video tilføjer vi alt det CSS, der er nødvendigt for at sikre, at det aktuelle sideelement i hovednavigationen bliver fremhævet, når siden er "