Video ekraanikuva 2025, Aprill

# 030: navigeerimislehtede kustutamine - CSS-trikid

# 030: navigeerimislehtede kustutamine - CSS-trikid

Meil on see kaheksa tipptasemel navigeerimisvahekaarti, kuid Avaleht on ainus, mis "töötab". Lihtsalt selleks, et meil oleks mõned lehed tööd teha, kustutame mõned lehed

# 027: Koodisüntaksi esiletõstmine, 1. osa - CSS-trikid

# 027: Koodisüntaksi esiletõstmine, 1. osa - CSS-trikid

Niipalju kui ma mäletan, kasutasin CSS-Tricksi koodiplokil süntaksi esiletõstmise rakendamiseks rakendust Google Code Prettify. Teate, kus sellises reas nagu "

# 028: koodi süntaksi esiletõstmine, 2. osa - CSS-trikid

# 028: koodi süntaksi esiletõstmine, 2. osa - CSS-trikid

Oleme just installinud Prism.js ja töötanud. Selles ekraaniekraanis leiame teema nimega Homne teema ja integreerime selle värvid süntaksisse "

# 026: postitüpograafia, 2. osa - CSS-trikid

# 026: postitüpograafia, 2. osa - CSS-trikid

Oleme päiste osas natuke tööd teinud, kuid uurime lähemalt selle ekraanikuva ülekandeid. Päised on iga saidi oluline aspekt. Hästi tehtud, "

# 025: postitüpograafia, 1. osa - CSS-trikid

# 025: postitüpograafia, 1. osa - CSS-trikid

Nüüd, kui meil on blogipostituste ala, millega töötada, saame tõepoolest tegeleda blogipostituste tüpograafiaga. Väidetavalt on saidi kõige olulisem tüpograafia sellisena, nagu see on "

# 023: tüpograafia teisaldamine normaliseerimisest välja CSS-trikid

# 023: tüpograafia teisaldamine normaliseerimisest välja CSS-trikid

Ma arvan, et on väga tore omada individuaalset faili (.scss), mis on mõeldud valdava enamuse tüpograafia jaoks saidil. Normalize'is on üsna palju tüpograafiat "

# 024: tüpograafiaga mängimine Typecastis - CSS-trikid

# 024: tüpograafiaga mängimine Typecastis - CSS-trikid

Typecast (selle filmimise ajal beetaversioonis) on tõesti korralik veebirakendus veebitüpograafiaga mängimiseks. See annab teile suurepärase liidese mängimiseks "

# 020: Võrgu viimistlemine ja moodulite seadistamine - CSS-trikid

# 020: Võrgu viimistlemine ja moodulite seadistamine - CSS-trikid

Jätkates kontseptsiooni "Ärge mõelge seda võreid", saame rennid ruudustikusse, kasutades lihtsalt mõnda lihtsat polsterdust. Hoiame polsterduse numbrit "

# 022: paindlikud pildid (joonised ja pildiallkirjad) - CSS-trikid

# 022: paindlikud pildid (joonised ja pildiallkirjad) - CSS-trikid

Enne tüpograafiatöö tegemist mõtlesin, et parandame tüütu asja, kus pildid kõlbavad väljaspool artikli ala ja ruudustikku. Kasutades

# 021: sissemurdmine kaasaskantavatesse osadesse - CSS-trikid

# 021: sissemurdmine kaasaskantavatesse osadesse - CSS-trikid

Nüüd, kui käitame kohandatud kohalikku domeeni, saame kasutada PHP-d. MAMP-is olev "P" tähistab "PHP" =). PHP kasutamine tähendab, et saame kasutada komplekti. Näiteks: Meie

# 018: meie projekti kasutamine kompassina - CSS-trikid

# 018: meie projekti kasutamine kompassina - CSS-trikid

Võiksime kirjutada omaenda Sassi @mixins, et aidata CSS3 asju (näiteks gradiente), kuid on olemas juba olemas Sassi raamistik nimega Kompass, mis "

# 019: lihtsa võrgu ehitamine - CSS-trikid

# 019: lihtsa võrgu ehitamine - CSS-trikid

Saidi kujundus muutub väga võrgulaadseks. Meie moodulid paigutatakse võrku väga puhtalt. Kuid kas võrgud pole keerulised ja imelikud? Ja võib-olla me "

# 017: kohaliku MAMP-i URL-i seadistamine - CSS-trikid

# 017: kohaliku MAMP-i URL-i seadistamine - CSS-trikid

Selles ülikiires ekraaniekraanis kasutame MAMP-i kohaliku URL-i seadistamiseks, mida saame kasutada kohaliku arengu jaoks. See on kasulik mitmel põhjusel: saame linkida saidile "

# 016: meediumipäringute kasutamine Sassis - CSS-trikid

# 016: meediumipäringute kasutamine Sassis - CSS-trikid

Tutvustame CSS-is @media päringute mõistet. Palju sellest, mida Sassi kasutamine selles projektis võimaldab, on jääda KUIVAKS (ära korrata ennast). Me tegime"

# 015: Ikoonide lisamine navigeerimisse ikoonifondiga - CSS-trikid

# 015: Ikoonide lisamine navigeerimisse ikoonifondiga - CSS-trikid

Alustame natuke logotüübi kohandamisest, kuid seejärel liigume ikoonide lisamise juurde peamisse navi. Kui kujundasime navigeerimist Photoshopis (video "

# 014: Kohandatud fondid Typekitiga - CSS-trikid

# 014: Kohandatud fondid Typekitiga - CSS-trikid

Seadistasime Typekitis v10 jaoks uue komplekti. Brändinguks kasutame praegu Proxima Nova Softit ja mõningaid teisi fonte, mis näevad meie

# 012: CSSing päis / logo - CSS-trikid

# 012: CSSing päis / logo - CSS-trikid

Siiani pole tegelik veebisait üldse sarnane meie Photoshopi kujundusega. Selles ekraanipildis uurime just seda, alustades tipust "

# 013: CSSing navigeerimisstruktuur - CSS-trikid

# 013: CSSing navigeerimisstruktuur - CSS-trikid

Kasutame logoga vasaku serva ja peamise sisuala joondamiseks mõningaid positsioneerimisnippe, samal ajal kui päis puutub endiselt vasakusse serva

# 011: meie CSS-i fondi normaliseerimine - CSS-trikid

# 011: meie CSS-i fondi normaliseerimine - CSS-trikid

Kasutajaagendi (vaikimisi) CSS-i eemaldamine enamikust elementidest on tavaliselt hea mõte. Seda on juba ammu teinud "universaalsed" lähtestused või sellised asjad nagu Eric "

# 010: HTML-i kirjutamise alustamine - CSS-trikid

# 010: HTML-i kirjutamise alustamine - CSS-trikid

Meie Photoshopi maketti vaadates kirjutame, et hakkame HTML-i kirjutama, et kirjeldada, mida me vaatame. Muidugi kasutame HTML5 alati, kui see teeb "

# 007: Photoshopi ikoonid ja tekst navigeerimisse - CSS-trikid

# 007: Photoshopi ikoonid ja tekst navigeerimisse - CSS-trikid

Hakkame teksti peamisse navigeerimisse viskama, et näha, kuidas see sobib, töötada suuruse, värvide jms osas. Osa tekstist sobib üsna tihedalt "

# 009: meie kohaliku arenduskeskkonna seadistamine - CSS-trikid

# 009: meie kohaliku arenduskeskkonna seadistamine - CSS-trikid

Kindlasti pole me selle kujunduse jaoks Photoshopis igavesti valmis, kuid selle kujunduse alustamiseks brauseris on meil piisavalt tööd. Pärast

# 006: fotonäitus põhinavigatsioonisüsteemi - CSS-trikid

# 006: fotonäitus põhinavigatsioonisüsteemi - CSS-trikid

Alustame saidi tipptasemel (peamise) navigeerimise kujundamist. Alustame töölaua suuruse ekraaniga (tõepoolest meelevaldse laiusega), kuid oleme "

# 005: väikese mõõtmete lisamine - CSS-trikid

# 005: väikese mõõtmete lisamine - CSS-trikid

"Paberivirna" väljanägemiseks lisame peamise päise / kaubamärgi kasti alla mõned lisakihid. Ei mingit suurt metafoori ega midagi, see lihtsalt lisab visuaalset "

# 008: mooduli mustri fotohankimine - CSS-trikid

# 008: mooduli mustri fotohankimine - CSS-trikid

Kogu sait põhineb "moodulitel". Iga väike asi saab olema sõna otseses mõttes kastis (nii visuaalselt kui ka lõpuks koodis). Me "

# 003: sisustrateegia seanss - CSS-trikid

# 003: sisustrateegia seanss - CSS-trikid

See on Skype'i kõne helisalvestis Erin Kissane'i ja minu vahel. Erin kirjutas raamatu sisustrateegia kohta, nii et mul vedas, et sain tema abi ja "

# 004: alustades Photoshopist, tausttekstuurist ja põhibrändist - CSS-trikid

# 004: alustades Photoshopist, tausttekstuurist ja põhibrändist - CSS-trikid

Brauseris kujundamine on lahe ja kõik, kuid Photoshopis käivitamine hoiab mind kõige loovamana, kui seda kõige rohkem vaja on: tühja lõuendiga silmitsi seistes. "

# 001: Sisu inventeerimine - CSS-trikid

# 001: Sisu inventeerimine - CSS-trikid

Tere tulemast! See saab olema üsna teekond ja nagu kõik teekonnad, algab ka see ühe sammuga. Meie esimene samm on inventeerida natuke "

# 002: Ümberkujundamise eesmärkide seadmine - CSS-trikid

# 002: Ümberkujundamise eesmärkide seadmine - CSS-trikid

See ümberkujundus pole ümberkujundamine ainult ümberkujundamise huvides. Ma tahan saiti täiustada kõikvõimalikul viisil, mida saate saidi täiustada. Üks "

35: SVG optimeerimine tööriistadega - CSS-trikid

35: SVG optimeerimine tööriistadega - CSS-trikid

Me rääkisime juba SVG optimeerimisest käsitsi. Detailide käsitsi valimine ja seda, milliseid asju saab kombineerida või eemaldada. Selles"