Screencast video 2025, Luglio
L'illustrazione di Nick aveva tre diversi strati per le teste. Sono solo variazioni leggermente diverse. Potremmo sostituire le immagini con un'animazione "
Mentre stavo lavorando a questo progetto, è stato rilasciato jQuery 1.8. Questo è solo un breve video per fare affidamento sul fatto che questo genere di cose accade mentre sviluppi i siti "
Abbiamo installato l'intestazione della galleria di base, ma mancano le piccole persone blu che Erica ha inserito nell'illustrazione originale. Ne avevamo parlato in "
Abbiamo appena installato l'intestazione personalizzata per la Galleria, quindi, visto che siamo a, continuiamo ad aggiungere un'altra intestazione personalizzata. questo è stato fatto da "
Ci sono sette diverse aree principali del sito oltre alla home page. Quindi, ho assunto sette diversi illustratori per realizzare i disegni. Questo è il primo che siamo "
Fino ad ora, abbiamo apportato modifiche al codice localmente senza utilizzare alcun tipo di controllo della versione. Con l'aumento della complessità di questo sito, sta diventando "
Abbiamo un buon inizio con il responsive design. Il menu alle dimensioni dello schermo più piccole si suddivide in una griglia 2x4. Si adatta bene allo schermo, ma "
Aggiungiamo un po 'di reattività alla griglia che abbiamo impostato per la Galleria. Negli schermi più ampi, lo abbiamo impostato su quattro colonne. Quindi iniziamo ad aggiungere "
In cui scopriamo i problemi che stavamo riscontrando nel caricare correttamente il layout della colonna. La soluzione consisteva nel rimuovere il CSS che creava il "
Iniziamo a scavare nel layout dell'area Gallery, che è qualcosa che ho in mente dall'inizio di questo processo di riprogettazione. Soprattutto"
Abbiamo il layout della griglia per la Galleria. Sfortunatamente il caricamento è un po 'brusco e instabile. Questo perché le colonne CSS3 sono progettate per "
Abbiamo già passato un po 'di tempo a eliminare le pagine in modo che la nostra navigazione funzioni (Video # 030) e tu puoi fare clic nel sito, ma cosa c'è in quei sottotitoli "
C'è una lunga tradizione di sondaggi sui CSS-Tricks. Sono divertenti, raccolgono buoni dati importanti e aumentano la connessione delle persone al sito. Fidanzamento FTW! "
Abbiamo interrotto con un widget del sondaggio totalmente decente. La tipografia è pulita e tutto perfettamente utilizzabile. Tuttavia, non era esattamente avvincente o divertente. Noi"
Il modulo in alto nella barra laterale principale del sito appartiene a Treehouse, in qualità di sponsor principale di CSS-Tricks. Sulla base di una conversazione che ho avuto con Ryan Carson ",
Il design della ricerca funziona bene fino a quando non arriviamo al nostro intervallo di dimensioni "baby bear" (piccolo cellulare). Dobbiamo fare qualcosa di diverso lì. Facciamo un po 'di spazio "
Perché penso che la prima volta in questa serie, aggiungeremo alcune cose nuove al design direttamente lavorando nel browser (non a partire da Photoshop "
Comprimere un browser desktop molto stretto può darti una vaga idea di come funziona un design reattivo, ma non è una rappresentazione accurata di un "
L'annuncio che abbiamo in atto è ottimo per schermi di grandi dimensioni / desktop, ma inizia a fallire abbastanza rapidamente su schermi più piccoli. Abbiamo già alcuni breakpoint "
Abbiamo creato l'aspetto di un pulsante nel suo stato normale, ma un pulsante 3D come quello richiede uno stato "premuto". Quello che facciamo è aggiungere un colore più scuro a "
Iniziamo con l'intenzione di passare all'HTML e al CSS inserendo il Top Treehouse Ad che abbiamo appena progettato, ma ovviamente falliamo non appena iniziamo "
Abbiamo il markup per l'annuncio Treehouse nella parte superiore della pagina, ma abbiamo del lavoro di stile da fare. Iniziamo con la grafica dell'albero stesso. Siamo "
Abbiamo lasciato una grande quantità di spazio libero nell'intestazione. Fin dall'inizio, sapevo che sarebbe stato lo sponsor principale di CSS-Tricks, Treehouse. In questo"
Abbiamo ancora un po 'di lavoro da fare per completare l'area di ricerca. Restiamo distratti solo per un secondo perché ho notato che non abbiamo aggiunto il tridimensionale "
Riprendiamo da dove avevamo interrotto nel Video # 034 e continuiamo a costruire l'area di ricerca. Questa volta ci stiamo concentrando sullo stato "aperto" della ricerca, costruendo "
Ci prendiamo una piccola pausa dal lavoro sulla ricerca per risolvere un piccolo problema fastidioso. "FOUT" è "Flash of Unstyled Text". Questo è un fenomeno in cui @ font-face "
Ora che abbiamo photoshoppato ciò che speriamo di ottenere con l'area di ricerca, abbiamo deciso di costruirlo con HTML e CSS. Abbiamo già il nostro carattere icona "
Ci sono molti contenuti su CSS-Tricks. Questa è una delle cose che rende il suo design un po 'impegnativo. Sebbene possiamo rimanere puliti con il design, "
Iniziamo giocando con il nostro modulo post sul blog, giocherellando con la spaziatura. Aggiungiamo anche il quadratino colorato in alto a sinistra del modulo "
In questo video super veloce aggiungiamo tutto il CSS necessario per assicurarci che l'elemento della pagina corrente nella navigazione principale venga evidenziato quando quella pagina è "