Videonäyttö 2025, Syyskuu

Nickin kuvassa oli kolme erilaista päätä. Ne ovat vain hieman erilaisia ​​muunnelmia. Voisimme vaihtaa kuvia animaatiolla "

Kun työskentelin tämän suunnittelun parissa, jQuery 1.8 julkaistiin. Tämä on vain nopea video, jolla luotetaan siihen, että tällaista tapahtuu, kun kehität sivustoja "

Meillä on perusta gallerian otsikossa, mutta siitä puuttuu pienet siniset ihmiset, jotka Erica laittoi alkuperäiseen kuvaan. Olimme puhuneet siitä "

Saimme juuri mukautetun gallerian otsikon paikalleen, joten jatkaessamme toisen mukautetun otsikon lisäämistä, kun olemme tällä hetkellä. tämän teki "

Sivuston etusivun ulkopuolella on seitsemän eri pääaluetta. Palkkasin siis seitsemän erilaista kuvittajaa tekemään malleja. Tämä on ensimmäinen, jonka olemme "

Tähän asti olemme tehneet koodimuutoksia paikallisesti käyttämättä minkäänlaista versionhallintaa. Kun tämän sivuston monimutkaisuus kasvaa, siitä on tulossa "

Meillä on hyvä alku reagoivaan suunnitteluun. Pienimmän ruudun kokoinen valikko jakautuu 2x4-ruudukkoon. Se sopii hienosti näytölle, mutta "

Lisäämme jonkin verran reagointikykyä galleriaan asettamallemme ruudukolle. Laajimmissa näytöissä se on asetettu neljään sarakkeeseen. Sitten aloitamme lisäämisen "

Siinä selvitämme ongelmat, jotka saimme sarakeasettelun latautumisesta mukavasti. Korjaus oli poistaa CSS, joka teki "

Alamme kaivaa Galleria-alueen asettelua, mikä on ollut mielessäni tämän uudelleensuunnitteluprosessin alusta lähtien. Enimmäkseen"

Meillä on ruudukon asettelu galleriaa varten. Valitettavasti sen lataaminen on hieman äkillistä ja röyhkeä. Tämä johtuu siitä, että CSS3-sarakkeet on suunniteltu

Olemme jo viettäneet vähän aikaa sivujen poistamiseen, jotta navigointimme toimii (video # 030) ja voit napsauttaa sivustoa, mutta mitä kyseisissä osioissa on "

CSS-temppujen kyselyillä on pitkät perinteet. Ne ovat hauskoja, keräävät hyvää tärkeää tietoa ja lisäävät ihmisten yhteyttä sivustoon. Sitoutuminen FTW! "

Jätimme lopulta täysin kunnollisen kysely-widgetin. Typografia on puhdas ja kaikki täysin käyttökelpoinen. Se ei kuitenkaan ollut aivan pakottavaa tai hauskaa. Me"

Sivuston sivupalkin ylämoduuli kuuluu Treehouselle CSS-Tricksin pääsponsorina. Ryan Carsonin kanssa käymieni keskustelujen perusteella "

Hakusuunnittelu toimii hyvin, kunnes pääsemme "baby bear" (pieni matkapuhelin) -katkoomme. Meidän on tehtävä siellä jotain erilaista. Me teemme tilaa "

Luulen, että ensimmäistä kertaa tässä sarjassa aiomme lisätä joitain uusia asioita suoraan suunnitteluun työskentelemällä selaimessa (ei aloittaen Photoshopista "

Pienentämällä työpöydän selainta hyvin kapeaksi, saat epämääräisen kuvan reagoivan suunnittelun toiminnasta, mutta se ei ole tarkka kuva

Paikalla oleva mainos on loistava suurille / työpöydän kokoisille näytöille, mutta se alkaa epäonnistua melko nopeasti pienemmissä näytöissä. Meillä on jo joitain katkaisupisteitä "

Olemme luoneet painikkeen ulkoasun tavallisessa tilassa, mutta tällainen 3D-painike pyytää "työnnettyä" tilaa. Lisäämme tummemman värin "

Aloitamme tarkoituksellamme siirtyä HTML: n ja CSS: n kirjoittamiseen juuri suunnitellulle Treehouse Top -mainokselle, mutta tietysti se suistuu heti, kun aloitamme "

Meillä on merkinnät Treehouse-mainokselle sivun yläosassa, mutta meillä on joitain muotoilutöitä. Aloitamme itse puupiirroksesta. Olemme "

Olemme jättäneet otsikkoon suuren määrän avointa tilaa. Alusta alkaen tiesin, että tämä koskee CSS-Tricksin pääsponsoria Treehousea. Tässä"

Meillä on vielä vähän töitä hakualueen viimeistelemiseksi. Olemme sivutiehaillut vain sekunnin, kun huomaan, ettemme ole lisänneet kolmiulotteista "

Jatkamme siitä, mihin jäimme, videossa # 034 ja jatkamme hakualueen rakentamista. Tällä kertaa keskitymme "avoimeen" hakutilaan, rakentamiseen "

Pidämme pienen tauon etsinnässä ratkaistaksemme pienen nigling-ongelman. "FOUT" on "tyylittömän tekstin salama". Tämä on ilmiö, jossa @ font-face "

Nyt kun olemme Photoshoppineet mitä toivomme saavutettavan hakualueella, aloitimme sen rakentamisen HTML: llä ja CSS: llä. Meillä on jo kuvakkeen fontti "

CSS-temppuissa on paljon sisältöä. Se on yksi niistä asioista, jotka tekevät suunnittelusta hieman haastavan. Vaikka voimme pysyä puhtaina suunnittelun kanssa, me "

Aloitamme pelaamisesta blogiviestimoduulillamme, hämmentämällä välejä. Lisätään myös pieni värillinen neliö moduulin vasempaan yläkulmaan "

Tähän erittäin nopeaan videoon lisätään kaikki tarvittavat CSS-tiedostot varmistaaksemme, että nykyisen sivun kohde päävalikossa korostetaan, kun kyseinen sivu on "