Video Screencasts 2025, April

Nicks illustrasjon hadde tre forskjellige lag for hodene. De er bare litt forskjellige varianter. Vi kunne bytte ut bildene med en animasjon "

Da jeg jobbet med dette designet, ble jQuery 1.8 utgitt. Dette er bare en rask video for å stole på at denne typen ting skjer når du utvikler nettsteder "

Vi har den grunnleggende gallerihodet på plass, men det mangler de små blå menneskene som Erica la i den originale illustrasjonen. Vi hadde snakket om det i "

Vi har akkurat fått den tilpassede overskriften for Galleriet på plass, så mens vi er på, la oss fortsette å legge til en annen tilpasset overskrift. denne ble gjort av "

Det er syv forskjellige hovedområder på nettstedet utenfor hjemmesiden. Så jeg ansatte syv forskjellige illustratører for å lage design. Dette er den første vi er "

Inntil nå har vi gjort kodeendringer lokalt uten å bruke noen form for versjonskontroll. Med kompleksiteten til dette nettstedet stiger, blir det "

Vi har en god start på det responsive designet. Menyen i de minste skjermstørrelsene brytes ned i et 2x4-rutenett. Det passer fint på skjermen, men "

Vi gir litt respons til rutenettet vi har satt opp for Galleriet. På de bredeste skjermene har vi den satt til fire kolonner. Så begynner vi å legge til i "

Der vi finner ut problemene vi hadde med å få kolonneoppsettet til å lastes inn pent. Løsningen var å fjerne CSS som gjorde "

Vi begynner å grave i utformingen av Galleri-området, noe som jeg har tenkt på siden begynnelsen av denne redesignprosessen. For det meste"

Vi har rutenettet for Galleriet. Dessverre er belastningen litt brå og uklar. Dette er fordi CSS3-kolonner er designet for å "

Vi har allerede brukt litt tid på å stubbe ut sider slik at navigasjonen vår fungerer (video nr. 030), og du kan klikke deg rundt på siden, men hva er det på denne underdelen "

Det er en lang tradisjon med meningsmålinger på CSS-Tricks. De er morsomme, samler gode viktige data og øker folks tilknytning til nettstedet. Forlovelse FTW! "

Vi slapp med en helt anstendig meningsmåling. Typografien er ren og alt perfekt brukbart. Det var imidlertid ikke akkurat overbevisende eller morsomt. Vi"

Toppmodulen i hovedsidefeltet til nettstedet tilhører Treehouse, som hovedsponsor for CSS-Tricks. Basert på en samtale jeg hadde med Ryan Carson, "

Søke design fungerer bra til vi kommer ned til "baby bjørn" (liten mobil) størrelse pause. Vi må gjøre noe annerledes der. Vi lager litt plass "

For jeg tror første gang i denne serien, skal vi legge til noen nye ting i designet direkte ved å jobbe i nettleseren (ikke starte i Photoshop "

Å klemme ned en veldig smal desktop-nettleser kan gi deg en vag følelse av hvordan et responsivt design fungerer, men det er ikke en nøyaktig fremstilling av en "

Annonsen vi har på plass er flott for store / desktop-størrelser, men den begynner å mislykkes ganske raskt på mindre skjermer. Vi har allerede noen bruddpunkter "

Vi har laget utseendet til en knapp i normal tilstand, men en 3D-knapp som ber om en "presset" tilstand. Det vi gjør er å legge en mørkere farge til "

Vi starter med den hensikt å hoppe inn i HTML og CSSing Top Treehouse-annonsen som vi nettopp har designet, men blir selvfølgelig avsporet så snart vi begynner "

Vi har markeringen på plass for Treehouse-annonsen øverst på siden, men vi har litt stylingarbeid å gjøre. Vi starter med selve tregrafikken. Vi er "

Vi har lagt igjen mye plass i overskriften. Helt fra starten visste jeg at dette ville være for CSS-Tricks hovedsponsor, Treehouse. I dette"

Vi har litt mer arbeid å gjøre for å fullføre søkeområdet. Vi blir sporet i bare et sekund da jeg merker at vi ikke la til det tredimensjonale "

Vi fortsetter der vi slapp i Video # 034 og fortsetter å bygge opp søkeområdet. Denne gangen fokuserer vi på den "åpne" tilstanden til søket, bygningen "

Vi tar en liten pause fra å jobbe med søk for å løse et lite fnysende problem. "FOUT" er "Flash of Unstyled Text". Dette er fenomenet der @ font-face "

Nå som vi har Photoshoppet det vi håper å oppnå med søkeområdet, satte vi oss i gang med å bygge det med HTML og CSS. Vi har allerede vår ikonfont "

Det er mye innhold på CSS-Tricks. Det er en av tingene som gjør design litt utfordrende. Mens vi kan holde oss rene med designet, "

Vi begynner med å leke med blogginnleggsmodulen vår og fikle med avstand. Vi legger også til den lille fargede firkanten øverst til venstre i modulen, "

I denne super raske videoen legger vi til all CSS som er nødvendig for å sikre at det nåværende sideelementet i hovednavigasjonen blir uthevet når den siden er "