Screencast video 2025, Luglio
Il design dei commenti potrebbe sembrare molto semplice. E questo è! Ma penso che semplice sia efficace in questo caso. I commenti sono una parte così importante di CSS-Tricks "
Iniziamo a scavare in Photoshop qui e progettiamo l'area dei commenti. Iniziamo dall'alto, ovvero i singoli commenti stessi (al contrario del "
Iniziamo osservando alcuni dei lavori più pesanti che ho fatto dietro le quinte, mettendo a punto alcune cose che dovevano essere fatte. Come aggiungere il resto di "
Siamo abbastanza vicini al completamento della creazione della home page dell'area Snippets del sito. Immediatamente, iniziamo a modificare le cose e inserire più cose in "
Con il design per l'area dei frammenti "fatto", possiamo ora passare a una certa interattività (leggi: JavaScript). Aggiungiamo un rollover super debole per i link su "
Ora abbiamo un design Photoshop su cui lavorare per la home page dell'area Snippet. È molto più navigabile di prima, ma mantiene l'arcobaleno "
È ora di tuffarsi nell'area Snippets! Cioè, l'effettiva area del contenuto di esso. Abbiamo già l'intestazione a posto. L'area dei frammenti è piuttosto popolare. "
In questo screencast concludiamo la sezione Almanacco. C'è una gerarchia abbastanza chiara nell'Almanacco. Va: Home> Almanac Home> Proprietà o selettore> "
Facciamo un balzo in avanti solo un po 'qui. Questa è una serie di screencast piuttosto completa, ma sono solo 40 ore circa e ovviamente questo vero progetto "
Abbiamo già lavorato a livello locale su un dominio locale (v10.whatup). Ora è il momento di iniziare a passare a WordPress. Continueremo a lavorare a livello locale "
Abbiamo tutto il contenuto di cui abbiamo bisogno sull'output di questa pagina e abbiamo l'intestazione a posto. Ora possiamo avviare CSS inserendo il contenuto nel design che stiamo realizzando "
Quando iniziamo a lavorare in WordPress, sarà meglio se prendiamo una copia esatta del database live con cui lavorare localmente. Alcuni siti web hanno cose come "
Ora che abbiamo lottato per ottenere il contenuto corretto sulla homepage di Almanac, possiamo scavare in uno stile reale con CSS. Abbiamo deciso di andare "
In questo screencast ci occupiamo principalmente del "Photostar" arancione che domina il piè di pagina. Creiamo la stella in un file separato in Photoshop, così possiamo creare "
E 'arrivato il colpo di testa di Alamanc, questa volta di Giovanni Difeterici. Utilizziamo molte tecniche che abbiamo già stabilito per iniziare "
L'illustrazione dell'intestazione personalizzata per la sezione video è arrivata, questa volta da Alyssa Nassner. Dedichiamo un po 'di tempo all'organizzazione del file Photoshop e "
In questo screencast finale di costruzione del piè di pagina, lavoriamo sul piè di pagina in basso dove si trovano le aree CodePen e ShopTalk. Dobbiamo cambiare l'HTML a "
In questo screencast ci concentriamo sulle linee sotto i collegamenti nella parte superiore del piè di pagina. In un certo senso inciampiamo per capire quali cose dovrebbero "
La testa dei frammenti è arrivata, questa volta da Reagan Ray. Questa volta trascorriamo un po 'di tempo in Photoshop mescolando un po' le cose per essere sicuri di "
Con la struttura HTML per il piè di pagina in atto, abbiamo ciò di cui abbiamo bisogno per iniziare ad applicare lo stile e ottenere questo piè di pagina simile a quello che abbiamo progettato in Photoshop ".
Questo è l'ultimo lavoro di Photoshop che faremo specificamente per il piè di pagina prima di passare alla sua costruzione effettiva. In questo screencast noi "
Stiamo lavorando alla creazione di un design per il piè di pagina in Photoshop. Promemoria rapido: lavoro in Photoshop perché mi sento più creativo prima di saltare "
Passiamo ad altre attività di Photoshoppin in questo screencast, presentando il piè di pagina più in basso con i link ai miei altri due più grandi progetti, CodePen "
Ci imbarchiamo nel grande viaggio che è il footer! CSS-Tricks ha sempre avuto un grande footer di fantasia e questo design non farà eccezione. Non è puramente "
Con il nostro design per il piè di pagina tutto pronto per l'uso in Photoshop, possiamo iniziare a costruirlo nel nostro mockup HTML e CSS statico. Il primo passo è dare "
Abbiamo un'altra zona BSA da integrare nel sito. Questo dovrebbe essere un po 'più semplice perché abbiamo già JavaScript in atto ed è solo "
Abbiamo un modello di come vogliamo che siano le nostre zone BuySellAds, quindi iniziamo a costruirlo per davvero. Il sito web di BuySellAds fornisce il codice di cui abbiamo bisogno "
L'unica cosa che manca ora dall'intestazione dei forum doganali è la parte che in realtà dice "Forum"! Nick ha illustrato una mano che tiene un cartello che significava "
Ora che sappiamo esattamente con quali zone stiamo lavorando, torniamo a Photoshop e simuliamo il modo in cui vogliamo che appaiano queste zone pubblicitarie. Abbiamo un precedente per "
Come sapete, alcuni degli annunci su CSS-Tricks sono un po '"autogestiti", come lo sponsor principale di Treehouse. L'ho preso perché è solo un singolo "