Videozáznamy z videa 2025, Apríl

# 030: Odstránenie stránok pre navigáciu Triky CSS

# 030: Odstránenie stránok pre navigáciu Triky CSS

Máme týchto osem kariet najvyššej úrovne, ale Home je jediný, ktorý „funguje“. Len preto, aby sme mali nejaké stránky, s ktorými pracujeme, odstránime niektoré stránky pre „

# 027: Zvýraznenie syntaxe kódu, časť 1 - Triky CSS

# 027: Zvýraznenie syntaxe kódu, časť 1 - Triky CSS

Pokiaľ si dobre pamätám, použil som Google Code Prettify na zvýraznenie syntaxe v bloku kódu na CSS-Tricks. Viete, kde v riadku ako „

# 028: Zvýraznenie syntaxe kódu, časť 2 - Triky CSS

# 028: Zvýraznenie syntaxe kódu, časť 2 - Triky CSS

Práve sme nainštalovali Prism.js a dostali sme ho do prevádzky. V tomto screencaste nájdeme tému s názvom Téma zajtra a integrujeme jej farby do syntaxe.

# 026: Príspevková typografia, 2. časť - Triky CSS

# 026: Príspevková typografia, 2. časť - Triky CSS

Trochu sme urobili prácu na hlavičkách, ale viac sa budeme venovať tým, ktoré sú uvedené v tomto vysielaní. Hlavičky sú sakra dôležitým aspektom každého webu. Urobené dobre,"

# 025: Typografia príspevkov, 1. časť - Triky CSS

# 025: Typografia príspevkov, 1. časť - Triky CSS

Teraz, keď máme oblasť blogových príspevkov, s ktorou môžeme pracovať, sa môžeme skutočne pustiť do typografie blogových príspevkov. Pravdepodobne najdôležitejšia typografia na webe, aký je “

# 023: Presun typografie z normalizácie - Triky CSS

# 023: Presun typografie z normalizácie - Triky CSS

Myslím si, že je veľmi pekné mať individuálny súbor (.scss), ktorý je určený pre drvivú väčšinu typografie na webe. Normalizácia má dosť typografie “

# 024: Hra s typografiou v obsadení - Triky CSS

# 024: Hra s typografiou v obsadení - Triky CSS

Typecast (v čase tohto natáčania v beta verzii) je skutočne elegantná webová aplikácia na hranie s webovou typografiou. Poskytuje vynikajúce rozhranie na hranie sa. “

# 020: Dokončenie siete a nastavenie modulov Triky CSS

# 020: Dokončenie siete a nastavenie modulov Triky CSS

V pokračovaní konceptu „Don't Overthink It Grids“, pomocou jednoduchých výplní dostaneme odkvapy v sieti. Ponechávame si číslo výplne “

# 022: Flexy obrázky (obrázky a popisy) - Triky CSS

# 022: Flexy obrázky (obrázky a popisy) - Triky CSS

Predtým, ako urobíme nejaké práce na typografii, myslel som si, že napravíme nepríjemnú vec, keď sa obrázky rozpadajú mimo oblasť článku a mriežku. Použitím"

# 021: Vniknutie do začleniteľných častí - Triky CSS

# 021: Vniknutie do začleniteľných častí - Triky CSS

Teraz, keď prevádzkujeme vlastnú lokálnu doménu, môžeme používať PHP. „P“ v MAMP je pre „PHP“ =). Používanie PHP znamená, že môžeme používať include. Napríklad: „

# 018: Používanie nášho projektu pomocou kompasu - Triky CSS

# 018: Používanie nášho projektu pomocou kompasu - Triky CSS

Mohli by sme napísať vlastný Sass @mixins, ktorý by pomohol s vecami CSS3 (napríklad s prechodmi), ale už existuje Sass framework s názvom Compass, ktorý „

# 019: Vytvorenie jednoduchej mriežky - Triky CSS

# 019: Vytvorenie jednoduchej mriežky - Triky CSS

Dizajn stránok sa formuje do podoby veľmi mriežky. Naše moduly budú veľmi čisto rozložené do mriežky. Nie sú však mriežky zložité a čudné? A možno aj my “

# 017: Nastavenie miestnej adresy URL pomocou programu MAMP - Triky CSS

# 017: Nastavenie miestnej adresy URL pomocou programu MAMP - Triky CSS

V tomto super rýchlom vysielaní obrazovky používame program MAMP na nastavenie adresy URL, ktorú môžeme použiť na miestny vývoj. Je to užitočné z mnohých dôvodov: Môžeme vytvoriť odkaz na „

# 016: Používanie mediálnych dotazov v Sass - Triky CSS

# 016: Používanie mediálnych dotazov v Sass - Triky CSS

V CSS predstavujeme koncept otázok @media. Veľa z toho, čo nám použitie Sass v tomto projekte umožňuje, je zostať SUCHÉ (neopakujte sa). Spravili sme"

# 015: Pridávanie ikon do navigácie pomocou ikonového písma - Triky CSS

# 015: Pridávanie ikon do navigácie pomocou ikonového písma - Triky CSS

Začneme tým, že trochu upravíme typ loga, ale potom skočíme na pridávanie ikon do hlavnej navigácie. Keď sme navrhovali navigáciu vo Photoshope (video „

# 014: Vlastné písma s programom Typekit - Triky CSS

# 014: Vlastné písma s programom Typekit - Triky CSS

V serveri Typekit pre verziu 10 sme vytvorili novú súpravu. Na účely budovania značky zatiaľ budeme používať Proxima Nova Soft a niektoré ďalšie písma, ktoré sa v našom „fonte podobajú písmom HF&J“

# 012: CSSing the Header / Logo - Triky CSS

# 012: CSSing the Header / Logo - Triky CSS

Skutočná webová stránka zatiaľ vôbec nevyzerá ako náš dizajn vo Photoshope. V tomto obrazovom vysielaní sa venujeme práve tomu, čo začína od „

# 013: CSSing Navigačná štruktúra - Triky CSS

# 013: CSSing Navigačná štruktúra - Triky CSS

Pomocou niektorých pozičných trikov sme zoradili ľavý okraj loga a hlavnú oblasť obsahu, pričom hlavička sa musí stále dotýkať ľavého okraja loga „

# 011: Normalizácia našej nadácie CSS Triky CSS

# 011: Normalizácia našej nadácie CSS Triky CSS

Odstránenie CSS agenta používateľa (predvolené) z väčšiny prvkov je zvyčajne dobrý nápad. Toto sa už dlho deje pomocou „univerzálnych“ resetov alebo vecí ako Eric.

# 010: Začína sa písať HTML - Triky CSS

# 010: Začína sa písať HTML - Triky CSS

Pri prezeraní našej makety Photoshopu píšeme, že začneme písať HTML, aby sme opísali, na čo sa pozeráme. HTML5 samozrejme používame vždy, keď to vytvorí “

# 007: Photoshoppingové ikony a text do navigácie Triky CSS

# 007: Photoshoppingové ikony a text do navigácie Triky CSS

Text začneme púšťať do hlavnej navigácie, len aby sme videli, ako sa zmestí, pracujeme na jeho dimenzovaní, farbách atď.

# 009: Nastavenie nášho lokálneho prostredia pre vývojárov Triky CSS

# 009: Nastavenie nášho lokálneho prostredia pre vývojárov Triky CSS

Pre tento dizajn určite nie sme vo Photoshope navždy „hotoví“, ale máme dosť času na to, aby sme začali s vytváraním tohto dizajnu v prehliadači. Po “

# 006: Photoshopping hlavnej navigácie Triky CSS

# 006: Photoshopping hlavnej navigácie Triky CSS

Začneme navrhovať najvyššiu (hlavnú) navigáciu na webe. Začíname s obrazovkou veľkosti pracovnej plochy (s nepochybne ľubovoľnou šírkou), ale sme „

# 005: Pridanie miernej rozmernosti - Triky CSS

# 005: Pridanie miernej rozmernosti - Triky CSS

Pod hlavičku / značku pridávame niekoľko ďalších vrstiev, aby vznikol vzhľad „stohu papierov“. Žiadna veľká metafora ani nič, iba sa pridáva vizuálna stránka “

# 008: Photoshopovanie vzoru modulu - Triky CSS

# 008: Photoshopovanie vzoru modulu - Triky CSS

Celý web bude založený na „moduloch“. Každá maličkosť bude doslova v krabici (vizuálne aj nakoniec v kóde). My "

# 003: Relácia obsahovej stratégie - Triky CSS

# 003: Relácia obsahovej stratégie - Triky CSS

Toto je zvukový záznam hovoru cez Skype medzi Erin Kissane a mnou. Erin napísala knihu o obsahovej stratégii, takže som mal šťastie, že som jej pomohol a “

# 004: Počnúc Photoshopom, textúrou pozadia a hlavnou značkou Triky CSS

# 004: Počnúc Photoshopom, textúrou pozadia a hlavnou značkou Triky CSS

Navrhovanie v prehliadači je super a všetko, ale začatie vo Photoshope ma drží v mojej najkreatívnejšej, keď to najviac potrebujem: keď stojím čelom k prázdnemu plátnu. “

# 001: Inventár obsahu - Triky CSS

# 001: Inventár obsahu - Triky CSS

Vitajte! Bude to celkom dlhá cesta a ako všetky cesty, aj táto začína jediným krokom. Naším prvým krokom je inventarizácia časti „

# 002: Stanovenie cieľov v oblasti redizajnu Triky CSS

# 002: Stanovenie cieľov v oblasti redizajnu Triky CSS

Tento redizajn nie je redizajnom iba kvôli redizajnu. Chcem vylepšiť stránku všetkým možným spôsobom, ako ju môžete vylepšiť. Jeden z"

35: Optimalizácia SVG pomocou nástrojov - Triky CSS

35: Optimalizácia SVG pomocou nástrojov - Triky CSS

O optimalizácii SVG sme už hovorili ručne. Ručné rozhodovanie o detailoch a o tom, čo je možné kombinovať alebo odstrániť. V tomto"