Video screencasts 2025, Veljača

Dizajn komentara može izgledati vrlo jednostavno. I to je! Ali mislim da je jednostavno djelotvorno u ovom slučaju. Komentari su tako važan dio CSS-trikova "

Ovdje počinjemo kopati po Photoshopu i dizajnirati područje za komentare. Počinjemo od vrha, što znači da pojedinačni komentari sami (za razliku od "

Započinjemo s gledanjem nekih mrzovoljnih poslova koje sam radio iza kulisa, razotkrivajući neke stvari koje je trebalo učiniti. Kao dodavanje ostatka "

Približili smo se završetku izrade početne stranice područja isječaka na web mjestu. Odmah počinjemo dotjerivati ​​stvari i ubacivati ​​više stvari u "

S "gotovim" dizajnom za područje isječaka - sada možemo prijeći u neku interaktivnost (čitaj: JavaScript). Dodamo super šepavo prevrtanje za veze na "

Sada imamo Photoshop dizajn za izradu početne stranice područja Snippets. Puno je pregledniji nego prije, ali zadržava dugu "

Vrijeme je da zaronite u područje Snippets! Odnosno, stvarno područje sadržaja. Zaglavlje već imamo na mjestu. Područje isječaka prilično je popularno. "

U ovom screencast-u završavamo odjeljak Almanah. U Almanahu postoji prilično jasna hijerarhija. Ide: Početna> Kuća almanaha> Svojstvo ili selektor> "

Ovdje skočimo naprijed samo malo. Ovo je prilično sveobuhvatna serija ekranizacije, ali traje samo 40-ak sati i naravno, ovaj stvarni projekt "

Već smo radili lokalno na lokalnoj domeni (v10.whatup). Sada je vrijeme da započnete s ulaskom u WordPress. Nastavit ćemo raditi lokalno "

Na izlazu ove stranice imamo sav sadržaj koji nam je potreban i zaglavlje je postavljeno. Sada možemo započeti CSSin 'sadržaj u dizajn u koji smo ušli "

Kako započnemo s radom u WordPressu, najbolje će biti ako uhvatimo točnu kopiju baze podataka uživo za lokalnu suradnju. Neke web stranice imaju stvari poput "

Sad kad smo se borili za dobivanje odgovarajućeg sadržaja na početnoj stranici Almanaha, možemo istražiti neki stvarni stil s CSS-om. Odlučili smo ići "

U ovom se screencast-u uglavnom bavimo narančastom "Photostar" koja dominira podnožjem. Zvijezdu izrađujemo u zasebnoj datoteci u Photoshopu, tako da možemo napraviti "

Ušao je udarac glavom za Alamanc, ovaj put od Giovannija Difetericija. Za početak koristimo puno tehnika koje smo već uspostavili "

Stigla je prilagođena ilustracija zaglavlja za odjeljak videozapisa, ovaj put od Alyssa Nassner. Provodimo malo vremena u organizaciji Photoshop datoteke i "

U ovom posljednjem prikazu zaslona izrade podnožja radimo na donjem podnožju gdje su područja CodePen i ShopTalk. Moramo promijeniti HTML a "

U ovom screencast-u fokusiramo se na linije ispod veza u gornjem dijelu podnožja. Nekako se spotaknemo oko smisla koje bi stvari trebale "

Ušla je glava isječaka, ovaj put Reagana Raya. Provodimo malo vremena u Photoshopu, ovaj put malo premećući stvari kako bismo bili sigurni da "

S postavljenom HTML strukturom za podnožje, imamo ono što nam je potrebno da započnemo s oblikovanjem i da ovo podnožje izgleda poput onoga što smo dizajnirali u Photoshopu. "

Ovo je posljednji Photoshop rad koji ćemo obaviti posebno u vezi s podnožjem prije nego što prijeđemo na njegovu stvarnu izgradnju. U ovom screencast-u "

Radimo na izradi dizajna podnožja u Photoshopu. Brzi podsjetnik: Radim u Photoshopu jer se tamo osjećam kreativnije prije nego što preskočim "

U ovom screencastu spuštamo se na još nekoliko Photoshoppinovih poslova, postavljajući najdonje podnožje s vezama na moja dva najveća druga projekta, CodePen "

Krenimo na veliko putovanje koje je podnožje! CSS-Tricks je uvijek imao sjajno podnožje i ovaj dizajn neće biti iznimka. Nije čisto "

S našim dizajnom za podnožje koji je spreman za rad u Photoshopu, možemo ga početi ugrađivati ​​u našu statičnu HTML i CSS maketu. Prvi korak je davanje "

Imamo još jednu BSA zonu koja se integrira na web mjesto. Ovaj bi trebao biti malo lakši jer već imamo JavaScript na mjestu i to je samo "

Imamo maketu kako želimo da naše zone BuySellAds izgledaju, pa krenimo u stvarnost. Web stranica BuySellAds pruža kôd koji nam treba "

Jedino što sada nedostaje zaglavlju naših carinskih foruma je dio koji zapravo kaže "Forumi"! Nick je ilustrirao ruku koja drži znak koji je značio "

Sad kad točno znamo s kojim zonama radimo, vraćamo se u Photoshop i ismijavamo kako želimo da ove oglasne zone izgledaju. Imamo presedan za "

Kao što znate, neki od oglasa na CSS-trikovima su nekako "samostalni", poput glavnog sponzora na Treehouseu. Uzeo sam to jer je to samo jedan "