Vaizdo įrašų ekranai 2025, Sausis

# 030: Naršymo puslapių pašalinimas - CSS-gudrybės

# 030: Naršymo puslapių pašalinimas - CSS-gudrybės

Turime šiuos aštuonis aukščiausio lygio naršymo skirtukus, tačiau „Namai“ yra vieninteliai, kurie „veikia“. Kad turėtume keletą puslapių, kuriuos norėtume dirbti, kai kuriuos puslapius pašaliname "

# 027: Kodo sintaksės paryškinimas, 1 dalis - CSS-gudrybės

# 027: Kodo sintaksės paryškinimas, 1 dalis - CSS-gudrybės

Kiek pamenu, „CSS-Tricks“ kodų blokui pritaikyti sintaksės paryškinimą naudojau „Google Code Prettify“. Žinote, kur tokioje eilutėje kaip „

# 028: Kodo sintaksės paryškinimas, 2 dalis CSS-gudrybės

# 028: Kodo sintaksės paryškinimas, 2 dalis CSS-gudrybės

Ką tik įdiegėme „Prism.js“ ir pradėjome veikti. Šioje ekrano kopijoje randame temą, vadinamą „Rytojaus tema“, ir įjungiame jos spalvas į sintaksę “

# 026: Pašto tipografija, 2 dalis - CSS-gudrybės

# 026: Pašto tipografija, 2 dalis - CSS-gudrybės

Mes šiek tiek padirbėjome su antraštėmis, tačiau daugiau įsigilinsime į tuos, kurie pateikiami šioje ekrano kopijoje. Antraštės yra įprastas svarbus bet kurios svetainės aspektas. Gerai padaryta,"

# 025: Pašto tipografija, 1 dalis - CSS-gudrybės

# 025: Pašto tipografija, 1 dalis - CSS-gudrybės

Dabar, kai turime tinklaraščio įrašų sritį, mes tikrai galime patekti į tinklaraščio įrašų tipografiją. Neabejotinai svarbiausia svetainės tipografija tokia, kokia ji yra "

# 023: tipografijos perkėlimas iš normalizavimo - CSS-gudrybės

# 023: tipografijos perkėlimas iš normalizavimo - CSS-gudrybės

Manau, kad labai malonu turėti atskirą failą (.scss), skirtą daugumai tipografijos tipų svetainėje. Normalizuoti yra gana mažai tipografijos "

# 024: Žaidimas su tipografija „Typecast“ CSS-gudrybės

# 024: Žaidimas su tipografija „Typecast“ CSS-gudrybės

„Typecast“ (beta versija šio filmavimo metu) yra tikrai tvarkinga interneto programa, skirta žaisti su žiniatinklio tipografija. Tai suteikia jums puikią sąsają žaisti “

# 020: Tinklo užbaigimas ir modulių nustatymas - CSS-gudrybės

# 020: Tinklo užbaigimas ir modulių nustatymas - CSS-gudrybės

Tęsdami „Negalima pergalvoti tinklelių“ koncepcijos, gauname latakus, esančius tinklelyje, tiesiog naudodami paprastą paminkštinimą. Mes laikome užpildymo numerį "

# 022: „Flexy Images“ (paveikslai ir paveikslėliai) - CSS-gudrybės

# 022: „Flexy Images“ (paveikslai ir paveikslėliai) - CSS-gudrybės

Prieš atlikdami tipografijos darbus, maniau, kad pataisysime erzinantį dalyką, kai vaizdai sugriūna už straipsnio ir tinklelio ribų. Naudojant „

# 021: Įsilaužimas į sudėtines dalis - CSS-gudrybės

# 021: Įsilaužimas į sudėtines dalis - CSS-gudrybės

Dabar, kai vykdome pasirinktinį vietinį domeną, galime naudoti PHP. „P“ MAMP yra „PHP“ =). PHP naudojimas reiškia, kad galime naudoti „apima“. Pavyzdžiui: Mūsų

# 018: Mūsų projektas naudoja kompasą CSS-gudrybės

# 018: Mūsų projektas naudoja kompasą CSS-gudrybės

Galėtume parašyti savo pačių sukurtą „Sass @mixins“, kad galėtume padėti su CSS3 (pvz., Su nuolydžiais), tačiau egzistuoja jau egzistuojanti „Sass“ sistema, pavadinta „Kompasas“.

# 019: paprasto tinklelio sukūrimas - CSS-gudrybės

# 019: paprasto tinklelio sukūrimas - CSS-gudrybės

Svetainės dizainas yra panašus į labai tinklelį. Mūsų moduliai bus išdėstyti labai švariai į tinklelį. Bet ar tinkleliai nėra sudėtingi ir keisti? Ir galbūt mes "

# 017: vietinio URL nustatymas naudojant MAMP - CSS-gudrybės

# 017: vietinio URL nustatymas naudojant MAMP - CSS-gudrybės

Šiame itin greitame ekrano vaizde mes naudojame MAMP nustatydami URL, kurį galime naudoti vietos plėtrai. Tai naudinga dėl daugybės priežasčių: galime susieti su

# 016: Medijos užklausų naudojimas „Sass“ CSS-gudrybės

# 016: Medijos užklausų naudojimas „Sass“ CSS-gudrybės

CSS pristatome @media užklausų sąvoką. Daugelis dalykų, kuriuos mums leidžia naudoti „Sass“, yra išlikti DRY (nepakartokite savęs). Mes padarėme"

# 015: piktogramų pridėjimas prie navigacijos su piktogramos šriftu - CSS-gudrybės

# 015: piktogramų pridėjimas prie navigacijos su piktogramos šriftu - CSS-gudrybės

Pradedame šiek tiek pakoreguoti logotipo tipą, bet tada pereikite prie piktogramų pridėjimo pagrindinėje naršyklėje. Kai kūrėme naršymą „Photoshop“ (vaizdo įrašas)

# 014: Pasirinktiniai šriftai su Typekit - CSS-gudrybės

# 014: Pasirinktiniai šriftai su Typekit - CSS-gudrybės

„Typekit“ įrengėme naują rinkinį, skirtą v10. Prekės ženklui naudoti kol kas naudosime „Proxima Nova Soft“ ir kai kuriuos kitus šriftus, kurie atrodo taip arti HF ir J šriftų.

# 012: CSSing antraštė / logotipas - CSS-gudrybės

# 012: CSSing antraštė / logotipas - CSS-gudrybės

Kol kas tikroji svetainė visiškai nepanaši į mūsų „Photoshop“ dizainą. Šioje ekrano kopijoje mes užsiimame būtent tuo, pradedant nuo viršaus su „

# 013: CSSing navigacijos struktūra - CSS-gudrybės

# 013: CSSing navigacijos struktūra - CSS-gudrybės

Mes naudojame keletą padėties nustatymo gudrybių, kad išklotume kairįjį logotipo kraštą ir pagrindinę turinio sritį, o antraštė vis tiek paliečia kairįjį logotipo kraštą

# 011: mūsų CSS fondo normalizavimas - CSS-gudrybės

# 011: mūsų CSS fondo normalizavimas - CSS-gudrybės

Vartotojo agento (numatytasis) CSS pašalinimas iš daugelio elementų paprastai yra gera idėja. Tai jau seniai padarė „universalūs“ atstatymai arba tokie dalykai kaip „Erikas“

# 010: pradedama rašyti HTML - CSS-gudrybės

# 010: pradedama rašyti HTML - CSS-gudrybės

Žiūrėdami į „Photoshop“ maketą, mes rašome pradėdami rašyti HTML, kad apibūdintume tai, į ką mes žiūrime. Mes, žinoma, naudojame HTML5, kai tik jis sukuria "

# 007: Photoshop piktogramos ir tekstas į navigaciją - CSS-gudrybės

# 007: Photoshop piktogramos ir tekstas į navigaciją - CSS-gudrybės

Mes pradedame mesti tekstą į pagrindinę navigaciją, kad sužinotume, kaip jis tiks, dirbame pagal dydį, spalvas ir pan. Kai kurie tekstai tinka gana griežtai “

# 009: Vietos kūrėjų aplinkos nustatymas - CSS-gudrybės

# 009: Vietos kūrėjų aplinkos nustatymas - CSS-gudrybės

Mes tikrai amžinai „nepadarėme“ „Photoshop“ dėl šio dizaino, tačiau turime pakankamai daug dirbti, kad galėtume pradėti kurti šį dizainą naršyklėje. Po “

# 006: Pagrindinės navigacijos nuotraukų perkėlimas - CSS-gudrybės

# 006: Pagrindinės navigacijos nuotraukų perkėlimas - CSS-gudrybės

Mes pradedame kurti aukščiausio lygio (pagrindinę) svetainės navigaciją. Pradedame nuo darbalaukio dydžio ekrano (tiesa, savavališkai), bet mes

# 005: nedidelio matmens pridėjimas - CSS-gudrybės

# 005: nedidelio matmens pridėjimas - CSS-gudrybės

Po pagrindine antraštės / prekės ženklo dėžute pridedame keletą papildomų sluoksnių, kad „popieriaus šūsnis“ atrodytų. Nėra jokios didelės metaforos ar nieko, tai tiesiog prideda šiek tiek vaizdinės informacijos "

# 008: Modulio modelio fotografija - CSS-gudrybės

# 008: Modulio modelio fotografija - CSS-gudrybės

Visa svetainė bus pagrįsta „moduliais“. Kiekviena smulkmena bus tiesiogine prasme dėžutėje (tiek vizualiai, tiek galiausiai kode). Mes"

# 003: Turinio strategijos sesija - CSS-gudrybės

# 003: Turinio strategijos sesija - CSS-gudrybės

Tai yra „Skype“ skambučio tarp Erin Kissane ir mano paties garso įrašas. Erin parašė knygą apie turinio strategiją, todėl man pasisekė gauti jos pagalbą ir

# 004: pradedant „Photoshop“, „Background Texture“ ir pagrindiniu prekės ženklu - CSS-gudrybės

# 004: pradedant „Photoshop“, „Background Texture“ ir pagrindiniu prekės ženklu - CSS-gudrybės

Dizainas naršyklėje yra šaunus ir viskas, bet pradėjus dirbti „Photoshop“, kūrybiškumas išlieka toks, kai man to labiausiai reikia: kai susiduriu su tuščia drobe.

# 001: Turinio inventoriaus rinkimas - CSS-gudrybės

# 001: Turinio inventoriaus rinkimas - CSS-gudrybės

Sveiki! Tai bus gana kelionė, ir kaip ir visos kelionės, ši prasideda vienu žingsniu. Pirmasis mūsų žingsnis yra inventorizuoti „

# 002: Pertvarkymo tikslų nustatymas - CSS-gudrybės

# 002: Pertvarkymo tikslų nustatymas - CSS-gudrybės

Šis perprojektavimas nėra perprojektavimas tik dėl naujo projektavimo. Noriu patobulinti svetainę visais įmanomais būdais, kaip galite patobulinti svetainę. Vienas iš"

35: SVG optimizavimas naudojant įrankius CSS-gudrybės

35: SVG optimizavimas naudojant įrankius CSS-gudrybės

Mes jau kalbėjome apie SVG optimizavimą rankomis. Neautomatiškai pasirinkti detales ir tai, kokius dalykus galima derinti ar pašalinti. Šiame"