Video ekrāna apraides 2025, Aprīlis

# 030: Lapu izspiešana navigācijai - CSS-triki

# 030: Lapu izspiešana navigācijai - CSS-triki

Mums ir šīs astoņas augšējā līmeņa navigācijas cilnes, taču tikai sākumlapa "darbojas". Lai mums būtu dažas lapas, ar kurām strādāt, mēs dažas lapas izdzēšam "

# 027: Kodu sintakses izcelšana, 1. daļa - CSS-triki

# 027: Kodu sintakses izcelšana, 1. daļa - CSS-triki

Cik atceros, es izmantoju Google Code Prettify, lai sintakses izcelšanu pielietotu CSS-Tricks kodu blokā. Jūs zināt, kur tādā rindā kā "

# 028: Kodu sintakses izcelšana, 2. daļa - CSS-triki

# 028: Kodu sintakses izcelšana, 2. daļa - CSS-triki

Mēs tikko esam instalējuši Prism.js un saņēmuši darbu. Šajā ekrānuzņēmumā atrodam tēmu ar nosaukumu Tomorrow Theme un iesakām tās krāsas sintaksē "

# 026: Pasta tipogrāfija, 2. daļa - CSS-triki

# 026: Pasta tipogrāfija, 2. daļa - CSS-triki

Mēs esam paveikuši nelielu darbu pie galvenēm, taču mēs sīkāk izpētīsim tos, kas atrodas šajā ekrāna pārraidē. Galvenes ir ļoti svarīgs jebkuras vietnes aspekts. Darīts labi, "

# 025: Post tipogrāfija, 1. daļa - CSS-triki

# 025: Post tipogrāfija, 1. daļa - CSS-triki

Tagad, kad mums ir pieejama emuāra ziņu zona, mēs patiešām varam iekļūt emuāra ziņojumu tipogrāfijā. Varbūt vissvarīgākā vietnes tipogrāfija, kāda tā ir "

# 023: Tipogrāfijas pārvietošana ārpus Normalizēt - CSS-triki

# 023: Tipogrāfijas pārvietošana ārpus Normalizēt - CSS-triki

Manuprāt, ir ļoti patīkami, ja vietnē ir atsevišķs fails (.scss), kas domāts lielākajai daļai tipogrāfijas. Normalizēt ir diezgan daudz tipogrāfijas "

# 024: Spēle ar tipogrāfiju Typecast - CSS-triki

# 024: Spēle ar tipogrāfiju Typecast - CSS-triki

Typecast (šīs filmēšanas laikā beta versijā) ir patiešām veikls tīmekļa lietotne spēlēšanai ar tīmekļa tipogrāfiju. Tas nodrošina lielisku saskarni spēlēšanai "

# 020: Režģa pabeigšana un moduļu iestatīšana - CSS-triki

# 020: Režģa pabeigšana un moduļu iestatīšana - CSS-triki

Turpinot jēdzienu "Nepārdomājiet to režģus", mēs saņemam notekas, kas notiek režģī, vienkārši izmantojot dažus vienkāršus polsterējumus. Mēs saglabājam polsterējuma numuru "

# 022: Elastīgi attēli (attēli un attēli) - CSS-triki

# 022: Elastīgi attēli (attēli un attēli) - CSS-triki

Pirms mēs veicam dažus tipogrāfijas darbus, es domāju, ka mēs izlabosim kaitinošo lietu, kur attēli sabojājas ārpus raksta zonas un režģa. Izmantojot “

# 021: Ielaušanās iekļautās daļās - CSS-triki

# 021: Ielaušanās iekļautās daļās - CSS-triki

Tagad, kad mēs izmantojam pielāgotu vietējo domēnu, mēs varam izmantot PHP. "P" MAMP ir domāts "PHP" =). PHP izmantošana nozīmē, ka mēs varam izmantot arī. Piemēram: Mūsu

# 018: padarot mūsu projektu par kompasu - CSS-triki

# 018: padarot mūsu projektu par kompasu - CSS-triki

Mēs varētu rakstīt paši savu Sass @mixins, lai palīdzētu ar CSS3 lietām (piemēram, gradientiem), taču pastāv jau pastāvošs Sass ietvars ar nosaukumu Compass, kas "

# 019: Vienkārša režģa veidošana - CSS-triki

# 019: Vienkārša režģa veidošana - CSS-triki

Vietnes dizains veidojas ļoti līdzīgs režģim. Mūsu moduļi ļoti tīri tiks izvietoti režģī. Bet vai režģi nav sarežģīti un dīvaini? Un varbūt mēs "

# 017: Vietējā URL iestatīšana, izmantojot MAMP - CSS-triki

# 017: Vietējā URL iestatīšana, izmantojot MAMP - CSS-triki

Šajā ļoti ātrajā ekrānuzņēmumā mēs izmantojam MAMP, lai iestatītu vietrādi URL, kuru varam izmantot vietējai attīstībai. Tas ir noderīgi vairāku iemeslu dēļ: mēs varam izveidot saiti uz

# 016: Multivides vaicājumu izmantošana Sass - CSS-triki

# 016: Multivides vaicājumu izmantošana Sass - CSS-triki

Mēs ieviešam @media vaicājumu jēdzienu CSS. Daudz ko no mums ļauj izmantot Sass šajā projektā, ir palikt SAUSAI (neatkārtojiet sevi). Mēs izdarījām"

# 015: Ikonu pievienošana navigācijai ar ikonas fontu - CSS-triki

# 015: Ikonu pievienošana navigācijai ar ikonas fontu - CSS-triki

Mēs sākam mazliet pielabot logotipa veidu, bet pēc tam pāriet uz ikonu pievienošanu galvenajā navigācijas panelī. Kad mēs izstrādājām navigāciju Photoshop (Video "

# 014: Pielāgoti fonti ar Typekit - CSS-triki

# 014: Pielāgoti fonti ar Typekit - CSS-triki

Mēs uzstādījām jaunu komplektu Typekit versijā v10. Zīmolradei mēs pagaidām izmantosim Proxima Nova Soft un dažus citus fontus, kas izskatās tik tuvu HF & J fontiem mūsu "

# 012: CSSing galvene / logotips - CSS-triki

# 012: CSSing galvene / logotips - CSS-triki

Pagaidām faktiskā vietne nemaz neizskatās pēc mūsu Photoshop dizaina. Šajā ekrānuzņēmumā mēs iesakām to darīt, sākot no augšas ar “

# 013: CSSing navigācijas struktūra - CSS-triki

# 013: CSSing navigācijas struktūra - CSS-triki

Mēs izmantojam dažus pozicionēšanas trikus, lai sakārtotu logotipa kreiso malu un galveno satura apgabalu, bet galvene joprojām pieskaras loga "

# 011: Mūsu CSS fonda normalizēšana - CSS-triki

# 011: Mūsu CSS fonda normalizēšana - CSS-triki

Lietotāja aģenta (noklusējuma) CSS noņemšana no lielākās daļas elementu parasti ir laba ideja. To jau sen ir izdarījuši "universālie" atiestatījumi vai tādas lietas kā Ēriks

# 010: Sākt rakstīt HTML - CSS-triki

# 010: Sākt rakstīt HTML - CSS-triki

Apskatot mūsu Photoshop maketu, mēs rakstām sākam rakstīt HTML, lai aprakstītu to, ko mēs skatāmies. Protams, mēs vienmēr izmantojam HTML5,

# 007: Fotogrāfiju veikšanas ikonas un teksts navigācijā - CSS-triki

# 007: Fotogrāfiju veikšanas ikonas un teksts navigācijā - CSS-triki

Mēs sākam nomest tekstu galvenajā navigācijā, tikai lai redzētu, kā tas derēs, strādāsim pēc izmēru noteikšanas, krāsām utt. Daži no tekstiem ir diezgan stingri piemēroti

# 009: Vietējās izstrādātāju vides iestatīšana - CSS-triki

# 009: Vietējās izstrādātāju vides iestatīšana - CSS-triki

Mēs noteikti neesam Photoshop uz visiem laikiem "izdarīti" šim dizainam, taču mums ir pietiekami daudz jāstrādā, lai sāktu veidot šo dizainu pārlūkprogrammā. Pēc "

# 006: Fotogrāfijas veikšana galvenajā navigācijā - CSS-triki

# 006: Fotogrāfijas veikšana galvenajā navigācijā - CSS-triki

Mēs sākam izstrādāt vietnes augšējā līmeņa (galveno) navigāciju. Mēs sākam ar darbvirsmas izmēra ekrānu (protams, patvaļīgi), bet mēs esam "

# 005: neliela izmēra pievienošana - CSS-triki

# 005: neliela izmēra pievienošana - CSS-triki

Mēs pievienojam dažus papildu slāņus zem galvenes galvenes / zīmola lodziņa, lai piešķirtu "papīra kaudzei" izskatu. Neviena liela metafora vai nekas cits, tas tikai pievieno kādu vizuālu "

# 008: Moduļa modeļa koplietošana fotoattēlos - CSS-triki

# 008: Moduļa modeļa koplietošana fotoattēlos - CSS-triki

Visa vietne būs balstīta uz "moduļiem". Katra mazā lieta burtiski būs lodziņā (galu galā gan vizuāli, gan kodā). Mēs "

# 003: satura stratēģijas sesija - CSS-triki

# 003: satura stratēģijas sesija - CSS-triki

Šis ir Skype zvana starp Erinu Kissane un mani audioieraksts. Erina uzrakstīja grāmatu par satura stratēģiju, tāpēc man paveicās saņemt viņas palīdzību un

# 004: Sākot ar Photoshop, Background Texture un Main Branding - CSS-triki

# 004: Sākot ar Photoshop, Background Texture un Main Branding - CSS-triki

Dizains pārlūkprogrammā ir foršs un viss, taču, sākot ar Photoshop, es varu būt visradošākais, kad man tas visvairāk vajadzīgs: saskaroties ar tukšo audeklu.

# 001: Satura inventarizācijas veikšana - CSS-triki

# 001: Satura inventarizācijas veikšana - CSS-triki

Laipni lūdzam! Šis būs diezgan ilgs ceļojums, un tāpat kā visi braucieni, arī šis sākas ar vienu soli. Mūsu pirmais solis ir inventarizēt mazliet "

# 002: Pārprojektēšanas mērķu noteikšana - CSS-triki

# 002: Pārprojektēšanas mērķu noteikšana - CSS-triki

Šī pārveidošana nav pārveidošana tikai dizaina labad. Es vēlos uzlabot vietni visos iespējamos veidos, kā jūs varat uzlabot vietni. Viens no"

35: SVG optimizēšana ar rīkiem CSS-triki

35: SVG optimizēšana ar rīkiem CSS-triki

Mēs jau runājām par SVG optimizēšanu ar rokām. Manuāli izdarot izvēli par detaļām un to, kāda veida lietas var kombinēt vai noņemt. Šajā"