Screencast video 2025, Luglio

# 111: Creazione del thread dei commenti - Trucchi CSS

# 111: Creazione del thread dei commenti - Trucchi CSS

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 "

# 110: Discussione commento Photoshopping - Trucchi CSS

# 110: Discussione commento Photoshopping - Trucchi CSS

Iniziamo a scavare in Photoshop qui e progettiamo l'area dei commenti. Iniziamo dall'alto, ovvero i singoli commenti stessi (al contrario del "

# 108: Creazione di singoli frammenti Pagina - Trucchi CSS

# 108: Creazione di singoli frammenti Pagina - Trucchi CSS

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 "

# 106: Area dei frammenti di costruzione, parte 3 (HTML e CSS) - Trucchi CSS

# 106: Area dei frammenti di costruzione, parte 3 (HTML e CSS) - Trucchi CSS

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 "

# 107: Building Snippets Area, Part 4 (JavaScript) - Trucchi CSS

# 107: Building Snippets Area, Part 4 (JavaScript) - Trucchi CSS

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 "

# 104: Area frammenti di costruzione, parte 1 (HTML e CSS) - Trucchi CSS

# 104: Area frammenti di costruzione, parte 1 (HTML e CSS) - Trucchi CSS

Ora abbiamo un design Photoshop su cui lavorare per la home page dell'area Snippet. È molto più navigabile di prima, ma mantiene l'arcobaleno "

# 103: Area frammenti di Photoshopping - Trucchi CSS

# 103: Area frammenti di Photoshopping - Trucchi CSS

È 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. "

# 102: Stile dell'almanacco, parte 3 - Trucchi CSS

# 102: Stile dell'almanacco, parte 3 - Trucchi CSS

In questo screencast concludiamo la sezione Almanacco. C'è una gerarchia abbastanza chiara nell'Almanacco. Va: Home> Almanac Home> Proprietà o selettore> "

# 101: Stile dell'almanacco, parte 2 - Trucchi CSS

# 101: Stile dell'almanacco, parte 2 - Trucchi CSS

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 "

# 078: Passaggio a WordPress, creazione di un tema - Trucchi CSS

# 078: Passaggio a WordPress, creazione di un tema - Trucchi CSS

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 "

# 105: Area dei frammenti di costruzione, parte 2 (HTML e CSS) - Trucchi CSS

# 105: Area dei frammenti di costruzione, parte 2 (HTML e CSS) - Trucchi CSS

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 "

# 079: Spostamento del database live in locale - Trucchi CSS

# 079: Spostamento del database live in locale - Trucchi CSS

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 "

# 100: Stile dell'almanacco, parte 1 - Trucchi CSS

# 100: Stile dell'almanacco, parte 1 - Trucchi CSS

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 "

# 072: CSS del piè di pagina, parte 2 - Trucchi CSS

# 072: CSS del piè di pagina, parte 2 - Trucchi CSS

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 "

# 075: intestazione personalizzata per l'almanacco - Trucchi CSS

# 075: intestazione personalizzata per l'almanacco - Trucchi CSS

E 'arrivato il colpo di testa di Alamanc, questa volta di Giovanni Difeterici. Utilizziamo molte tecniche che abbiamo già stabilito per iniziare "

# 076: intestazione personalizzata per la sezione video - Trucchi CSS

# 076: intestazione personalizzata per la sezione video - Trucchi CSS

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 "

# 074: CSS del piè di pagina, parte 4 - Trucchi CSS

# 074: CSS del piè di pagina, parte 4 - Trucchi CSS

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 "

# 073: CSS del piè di pagina, parte 3 - Trucchi CSS

# 073: CSS del piè di pagina, parte 3 - Trucchi CSS

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 "

# 077: intestazione personalizzata per frammenti - Trucchi CSS

# 077: intestazione personalizzata per frammenti - Trucchi CSS

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 "

# 071: CSS del piè di pagina, parte 1 - Trucchi CSS

# 071: CSS del piè di pagina, parte 1 - Trucchi CSS

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 ".

# 069: Photoshopping del piè di pagina, parte 4 - Trucchi CSS

# 069: Photoshopping del piè di pagina, parte 4 - Trucchi CSS

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 "

# 067: Photoshopping del piè di pagina, parte 2 - Trucchi CSS

# 067: Photoshopping del piè di pagina, parte 2 - Trucchi CSS

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 "

# 068: Photoshop nel piè di pagina, parte 3 - Trucchi CSS

# 068: Photoshop nel piè di pagina, parte 3 - Trucchi CSS

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 "

# 066: Photoshopping del piè di pagina, parte 1 - Trucchi CSS

# 066: Photoshopping del piè di pagina, parte 1 - Trucchi CSS

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 "

# 070: HTML del piè di pagina - Trucchi CSS

# 070: HTML del piè di pagina - Trucchi CSS

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 "

# 065: Aggiunta di annuncio della barra laterale BuySellAds - Trucchi CSS

# 065: Aggiunta di annuncio della barra laterale BuySellAds - Trucchi CSS

Abbiamo un'altra zona BSA da integrare nel sito. Questo dovrebbe essere un po 'più semplice perché abbiamo già JavaScript in atto ed è solo "

# 064: Implementazione delle zone BuySellAds - Trucchi CSS

# 064: Implementazione delle zone BuySellAds - Trucchi CSS

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 "

# 061: intestazione personalizzata per i forum, parte 3 - Trucchi CSS

# 061: intestazione personalizzata per i forum, parte 3 - Trucchi CSS

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 "

# 063: Mocking up BuySellAds Zones - Trucchi CSS

# 063: Mocking up BuySellAds Zones - Trucchi CSS

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 "

# 062: Uno sguardo alla configurazione corrente di BuySellAds - Trucchi CSS

# 062: Uno sguardo alla configurazione corrente di BuySellAds - Trucchi CSS

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 "