Screencasts video 2025, Ianuarie

Ilustrația lui Nick avea trei straturi diferite pentru capete. Sunt doar variații ușor diferite. Am putea schimba imaginile cu o animație "

În timp ce lucram la acest design, jQuery 1.8 a fost lansat. Acesta este doar un videoclip rapid pentru a vă baza pe faptul că acest lucru se întâmplă pe măsură ce dezvoltați site-uri "

Avem antetul galeriei de bază, dar îi lipsesc micii oameni albastri pe care Erica i-a pus în ilustrația originală. Am vorbit despre asta în „

Tocmai am obținut antetul personalizat pentru Galerie, așa că, în timp ce suntem la, să continuăm să adăugăm un alt antet personalizat. acesta a fost făcut de „

Există șapte zone principale ale site-ului dincolo de pagina de pornire. Așadar, am angajat șapte ilustratori diferiți pentru a face proiecte. Acesta este primul care suntem "

Până acum, am făcut modificări de cod la nivel local, fără a utiliza niciun fel de control al versiunii. Odată cu creșterea complexității acestui site, asta devine „

Avem un început bun în ceea ce privește designul receptiv. Meniul de la cele mai mici dimensiuni ale ecranului se împarte într-o grilă 2x4. Se potrivește frumos pe ecran, dar „

Adăugăm o anumită reacție la grila pe care am configurat-o pentru Galerie. La cele mai largi ecrane, îl avem setat la patru coloane. Apoi începem să adăugăm „

În care ne dăm seama de problemele pe care le aveam cu obținerea aspectului coloanei pentru a se încărca frumos. Remedierea a fost eliminarea CSS care făcea „

Începem să căutăm în aspectul zonei Galeriei, lucru care mi-a trecut în minte de la începutul acestui proces de reproiectare. Mai ales"

Avem aspectul grilei pentru Galerie. Din păcate, încărcarea acestuia este puțin bruscă și ciudată. Acest lucru se datorează faptului că coloanele CSS3 sunt concepute pentru a „

Am petrecut deja puțin timp eliminând paginile, astfel încât navigarea noastră să funcționeze (videoclipul nr. 030) și puteți face clic pe site, dar ce se află în aceste sub "

Există o lungă tradiție de sondaje pe CSS-Tricks. Sunt distractive, adună date importante importante și sporesc conexiunea oamenilor cu site-ul. Logodna FTW! "

Am rămas cu un widget de sondaj complet decent. Tipografia este curată și totul perfect utilizabil. Cu toate acestea, nu a fost tocmai convingător sau distractiv. Noi"

Modulul superior din bara laterală principală a site-ului aparține Treehouse, în calitate de sponsor principal al CSS-Tricks. Pe baza unei conversații pe care am avut-o cu Ryan Carson, "

Designul de căutare funcționează bine până când ajungem la pauza de dimensiune „ursuleț” (mobil mic). Trebuie să facem ceva diferit acolo. Ne facem loc "

Pentru că cred că prima dată în această serie, vom adăuga câteva lucruri noi la design direct lucrând în browser (nu începând cu Photoshop "

Strângerea unui browser de desktop foarte îngustă vă poate oferi un sentiment vag despre modul în care funcționează un design receptiv, dar nu este o reprezentare exactă a unui „

Anunțul pe care îl avem este excelent pentru ecranele de dimensiuni mari / desktop, dar începe să eșueze destul de repede pe ecranele mai mici. Avem deja câteva puncte de întrerupere "

Am creat aspectul unui buton în starea obișnuită, dar un astfel de buton 3D cere implorarea unei stări „împinse”. Ceea ce facem este să adăugăm o culoare mai închisă la „

Începem cu intenția de a sări în HTML și CSS Cântând anunțul de top din copac pe care tocmai l-am proiectat, dar, desigur, să fie deraiat de îndată ce începem "

Avem marcajul în loc pentru anunțul Treehouse din partea de sus a paginii, dar avem de făcut o muncă de stil. Începem cu arborele în sine. Suntem "

Am lăsat o cantitate mare de spațiu deschis în antet. Încă de la început, știam că acest lucru va fi pentru sponsorul principal CSS-Tricks, Treehouse. In acest"

Mai avem ceva de făcut pentru a termina zona de căutare. Ne retragem doar o secundă, deoarece observ că nu am adăugat dimensiunea tridimensională "

Luăm locul unde am rămas în videoclipul nr. 034 și continuăm să construim zona de căutare. De data aceasta ne concentrăm pe starea „deschisă” a căutării, construirea ”

Luăm o mică pauză de la lucrul la căutare pentru a rezolva o mică problemă negativă. „FOUT” fiind „Flash de text nestilizat”. Acesta este fenomenul în care @ font-face "

Acum, că am Photoshop, ceea ce sperăm să realizăm cu zona de căutare, ne-am apucat să o construim cu HTML și CSS. Avem deja fontul nostru pentru pictograme "

Există mult conținut pe CSS-Tricks. Acesta este unul dintre lucrurile care fac ca proiectarea să fie puțin provocatoare. Deși putem rămâne curați cu designul, noi "

Începem cu jocul cu modulul nostru de postare pe blog, jucând cu spațierea. Adăugăm și micul pătrat colorat din stânga sus a modulului, "

În acest videoclip super rapid adăugăm toate CSS necesare pentru a ne asigura că elementul de pagină curentă din navigarea principală este evidențiat atunci când pagina respectivă este "