Videoképernyők 2025, Január

# 030: Oldalak eltüntetése a navigációhoz - CSS-trükkök

# 030: Oldalak eltüntetése a navigációhoz - CSS-trükkök

Megvan ez a nyolc legfelső szintű navigációs fül, de a Főoldal az egyetlen, amely "működik". Csak azért, hogy legyen néhány oldalunk, amivel dolgozhatunk, néhány oldalt kitesszük a következőre:

# 027: Kódszintaxis kiemelés, 1. rész - CSS-trükkök

# 027: Kódszintaxis kiemelés, 1. rész - CSS-trükkök

Ha jól emlékszem, a Google Code Prettify programmal alkalmaztam a szintaxis kiemelését a CSS-Tricks kódblokkján. Tudod, hol van egy olyan sorban, mint "

# 028: Kódszintaxis kiemelés, 2. rész - CSS-trükkök

# 028: Kódszintaxis kiemelés, 2. rész - CSS-trükkök

Most telepítettük a Prism.js-t, és működőképessé tettük. Ebben a képernyőn megtaláljuk a Holnap téma nevű témát, és beépítjük a színeit a szintaxisba "

# 026: Post tipográfia, 2. rész - CSS-trükkök

# 026: Post tipográfia, 2. rész - CSS-trükkök

Csináltunk egy kis munkát a fejléceken, de többet fogunk találni ezeken a képernyőn. A fejlécek minden webhelynek fontos szempontjai. Jól végzett "

# 025: Post tipográfia, 1. rész - CSS-trükkök

# 025: Post tipográfia, 1. rész - CSS-trükkök

Most, hogy van egy blogbejegyzés területünk, amellyel dolgozhatunk, valóban belemerülhetünk a blogbejegyzések tipográfiájába. A webhely vitathatatlanul legfontosabb tipográfiája, mivel "

# 023: A tipográfia elmozdítása a normalizálásból - CSS-trükkök

# 023: A tipográfia elmozdítása a normalizálásból - CSS-trükkök

Szerintem nagyon szép, ha van egy egyedi fájl (.scss), amely a tipográfia túlnyomó többségéhez tartozik az oldalon. A Normalizálás elég sok tipográfiával rendelkezik "

# 024: Játék tipográfiával a Typecast - CSS-trükkök

# 024: Játék tipográfiával a Typecast - CSS-trükkök

A Typecast (a forgatás idején bétaverzióban) egy nagyon ügyes webalkalmazás a webes tipográfiával való játékhoz. Remek kezelőfelületet kínál a játékhoz "

# 020: A rács befejezése és a modulok beállítása - CSS-trükkök

# 020: A rács befejezése és a modulok beállítása - CSS-trükkök

A "Ne gondold túl a rácsokat" koncepciót folytatva, csak néhány egyszerű párnázás segítségével kapunk ereszcsatornákat a rácsban. Megtartjuk a kitöltési számot "

# 022: Flexy képek (ábrák és képaláírások) - CSS-trükkök

# 022: Flexy képek (ábrák és képaláírások) - CSS-trükkök

Mielőtt néhány tipográfiai munkát végeznénk, azt gondoltam, hogy kijavítjuk a bosszantó dolgot, ahol a képek a cikk és a rácson kívül esnek el. A "

# 021: Betörés a beépíthető alkatrészekre - CSS-trükkök

# 021: Betörés a beépíthető alkatrészekre - CSS-trükkök

Most, hogy egyedi helyi tartományt futtatunk, használhatjuk a PHP-t. A "P" a MAMP-ban a "PHP" =). A PHP használata azt jelenti, hogy használhatjuk a következőket: Például: "

# 018: Projektünk használata az Iránytűvel CSS-trükkök

# 018: Projektünk használata az Iránytűvel CSS-trükkök

Írhatnánk saját Sass @mixins-t, hogy segítsünk a CSS3-as dolgokban (például a színátmenetekben), de van már Sass keretrendszer, Compass néven, amely

# 019: Egyszerű rács felépítése - CSS-trükkök

# 019: Egyszerű rács felépítése - CSS-trükkök

A webhely kialakítása nagyon rácsszerűvé válik. Moduljaink nagyon tisztán helyezkednek el egy rácsba. De a rácsok nem összetettek és furcsák? És talán mi "

# 017: Helyi URL beállítása a MAMP - segítségével CSS-trükkök

# 017: Helyi URL beállítása a MAMP - segítségével CSS-trükkök

Ebben a szupergyors képernyõben a MAMP segítségével állítunk be egy URL-t, amelyet felhasználhatunk a helyi fejlesztéshez. Ez számos okból hasznos: Linkelhetünk a következőre:

# 016: Média lekérdezések használata Sass - CSS-trükkök

# 016: Média lekérdezések használata Sass - CSS-trükkök

Bemutatjuk a @media lekérdezések fogalmát a CSS-ben. Sok minden, amit a Sass használata ebben a projektben lehetővé tesz számunkra, az az, hogy SZÁRAZ maradjon (ne ismételje meg magát). Megcsináltuk"

# 015: Ikonok hozzáadása a navigációhoz ikon betűtípussal - CSS-trükkök

# 015: Ikonok hozzáadása a navigációhoz ikon betűtípussal - CSS-trükkök

Kezdjük azzal, hogy kissé módosítjuk a logótípust, de aztán átugrunk ikonok hozzáadásával a fő navigációba. Amikor a navigációt a Photoshopban terveztük (Video "

# 014: Egyéni betűtípusok Typekit - CSS-trükkök

# 014: Egyéni betűtípusok Typekit - CSS-trükkök

Felállítottunk egy új Kitet a Typekitben a v10-hez. A márkaépítéshez egyelőre a Proxima Nova Soft programot és néhány más betűtípust fogunk használni, amelyek a HF & J betűkhöz hasonlóan mutatnak a "

# 012: CSSing a fejléc / logó - CSS-trükkök

# 012: CSSing a fejléc / logó - CSS-trükkök

Eddig a tényleges webhely egyáltalán nem hasonlít a Photoshop tervezésére. Ebben a képernyőn átgondoljuk, hogy pontosan ezt tegyük, kezdve a tetején a "

# 013: CSSing a navigációs struktúra - CSS-trükkök

# 013: CSSing a navigációs struktúra - CSS-trükkök

Néhány pozicionálási trükköt használunk a logó bal szélének és a fő tartalmi területnek a felsorolására, miközben a fejléc továbbra is a "

# 011: A CSS Alapítvány normalizálása - CSS-trükkök

# 011: A CSS Alapítvány normalizálása - CSS-trükkök

A felhasználói ügynök (alapértelmezett) CSS eltávolítása a legtöbb elemből általában jó ötlet. Ezt régóta "univerzális" alaphelyzetbe állítások vagy olyan dolgok hajtják végre, mint az Eric "

# 010: A HTML írásának megkezdése - CSS-trükkök

# 010: A HTML írásának megkezdése - CSS-trükkök

A Photoshop-makett nézegetése közben elkezdünk írni HTML-t, hogy leírjuk, mit is nézünk. Természetesen a HTML5-öt használjuk, amikor csak "

# 007: Photoshop ikonok és szöveg a navigációba - CSS-trükkök

# 007: Photoshop ikonok és szöveg a navigációba - CSS-trükkök

Kezdjük eldobni a szöveget a fő navigációban, csak azért, hogy lássuk, hogyan fog illeszkedni, hogyan működik a méretezés, a színek stb. Néhány szöveg elég szorosan illeszkedik "

# 009: Helyi fejlesztői környezet beállítása - CSS-trükkök

# 009: Helyi fejlesztői környezet beállítása - CSS-trükkök

Biztosan nem vagyunk örökre "készen" a Photoshopban ehhez a tervezéshez, de van annyi munkánk, hogy elkezdhessük ennek a tervnek a létrehozását a böngészőben. Után"

# 006: A fő navigáció fotózás - CSS-trükkök

# 006: A fő navigáció fotózás - CSS-trükkök

Elkezdjük a webhely legfelső szintű (fő) navigációjának tervezését. Az asztal méretének képernyőjével kezdjük (elismerten tetszőleges szélességgel), de "

# 005: Enyhe dimenziós érték hozzáadása - CSS-trükkök

# 005: Enyhe dimenziós érték hozzáadása - CSS-trükkök

A fejléc / márkajelző doboz alá adunk néhány extra réteget, hogy a "papírköteg" kinézetet kapjon. Nincs nagy metafora vagy bármi, csak némi látványt ad hozzá "

# 008: A modulminta photoshopping - CSS-trükkök

# 008: A modulminta photoshopping - CSS-trükkök

Az egész webhely "modulokra" épül. Minden apró dolog szó szerint egy dobozban lesz (vizuálisan és végső soron a kódban is). Mi"

# 003: Tartalmi stratégiai munkamenet - CSS-trükkök

# 003: Tartalmi stratégiai munkamenet - CSS-trükkök

Ez egy hangfelvétel egy Skype-hívásról Erin Kissane és jómagam között. Erin írta a tartalmi stratégiáról szóló könyvet, így szerencsés voltam, hogy segítséget kaptam és "

# 004: A Photoshop, a háttér textúra és a fő márkaépítés - CSS-trükkök

# 004: A Photoshop, a háttér textúra és a fő márkaépítés - CSS-trükkök

A böngészőben történő tervezés fantasztikus és minden, de a Photoshop alkalmazással a legkreatívabb vagyok, amikor a legnagyobb szükségem van rá: amikor az üres vászonnal nézek szembe. "

# 001: Tartalomkészlet készítése - CSS-trükkök

# 001: Tartalomkészlet készítése - CSS-trükkök

Üdvözöljük! Ez elég nagy út lesz, és mint minden út, ez is egyetlen lépéssel indul. Első lépésünk a "

# 002: Újratervezési célok meghatározása - CSS-trükkök

# 002: Újratervezési célok meghatározása - CSS-trükkök

Ez az újratervezés nem csak az újratervezés kedvéért. Minden elképzelhető módon szeretnék fejleszteni a webhelyen, amellyel javíthatja a webhelyet. Az egyik"

35: Az SVG optimalizálása eszközökkel - CSS-trükkök

35: Az SVG optimalizálása eszközökkel - CSS-trükkök

Beszéltünk már az SVG kézzel történő optimalizálásáról. Manuálisan dönt a részletekről és arról, hogy milyen dolgokat lehet kombinálni vagy eltávolítani. Ebben"