Vaizdo įrašų ekranai 2025, Sausis

# 060: Tinkinta forumų antraštė, 2 dalis (greitosios medijos užklausos) - CSS-gudrybės

# 060: Tinkinta forumų antraštė, 2 dalis (greitosios medijos užklausos) - CSS-gudrybės

Niko iliustracijoje buvo trys skirtingi galvos sluoksniai. Tai tik šiek tiek skirtingi variantai. Vaizdus galėtume sukeisti animacija "

# 056: „jQuery Mid-Stream“ versijų atnaujinimas - CSS-gudrybės

# 056: „jQuery Mid-Stream“ versijų atnaujinimas - CSS-gudrybės

Kai dirbau prie šio dizaino, buvo išleistas „jQuery 1.8“. Tai tik greitas vaizdo įrašas, kuriame pasikliaujama tuo, kad tokie dalykai vyksta kuriant svetaines "

# 058: Galerijos tinkinta antraštė, 2 dalis (su „Reverso Media“ užklausomis) - CSS-gudrybės

# 058: Galerijos tinkinta antraštė, 2 dalis (su „Reverso Media“ užklausomis) - CSS-gudrybės

Mes turime pagrindinę galerijos antraštę, tačiau trūksta mažų mėlynų žmonių, kuriuos Erica įdėjo į originalią iliustraciją. Mes apie tai kalbėjome

# 059: Tinkinta forumų antraštė, 1 dalis - CSS-gudrybės

# 059: Tinkinta forumų antraštė, 1 dalis - CSS-gudrybės

Ką tik gavome tinkintą „Galerijos“ antraštę, taigi, kol pasieksime, toliau tęskime kitą tinkintą antraštę. šį padarė “

# 057: Galerijos tinkinta antraštė, 1 dalis - CSS-gudrybės

# 057: Galerijos tinkinta antraštė, 1 dalis - CSS-gudrybės

Už pagrindinio puslapio yra septynios skirtingos pagrindinės svetainės sritys. Taigi, pasamdžiau septynis skirtingus iliustratorius kurti. Tai pirmas mes "

# 055: Statinio maketo įtraukimas į versijų valdymą - CSS-gudrybės

# 055: Statinio maketo įtraukimas į versijų valdymą - CSS-gudrybės

Iki šiol kodą keisdavome vietoje nenaudodami jokios versijų kontrolės. Didėjant šios svetainės sudėtingumui, tai tampa "

# 054: „Bakstelėkite ir parodykite“ mobilioji navigacija - CSS-gudrybės

# 054: „Bakstelėkite ir parodykite“ mobilioji navigacija - CSS-gudrybės

Mes gerai pradedame reaguojantį dizainą. Mažiausio ekrano dydžio meniu suskirstomas į 2x4 tinklelį. Jis puikiai tinka ekrane, bet "

# 053: Interaktyvūs galerijos stulpeliai - CSS-gudrybės

# 053: Interaktyvūs galerijos stulpeliai - CSS-gudrybės

Galerijoje sukurtą tinklelį mes šiek tiek reaguojame. Plačiuose ekranuose jį nustatėme keturiuose stulpeliuose. Tada mes pradedame pridėti "

# 052: Sklandžiai įkraunama galerija, 2 dalis - CSS-gudrybės

# 052: Sklandžiai įkraunama galerija, 2 dalis - CSS-gudrybės

Mes išsiaiškinome problemas, su kuriomis susidūrėme, kad stulpelių išdėstymas būtų gerai įkeltas. Taisymas buvo pašalinti CSS, kuris padarė „

# 050: galerijos tinklelio sukūrimas - CSS-gudrybės

# 050: galerijos tinklelio sukūrimas - CSS-gudrybės

Mes pradedame gilintis į galerijos srities išdėstymą, kuris man sukosi galvoje nuo šio pertvarkymo proceso pradžios. Daugiausia"

# 051: Sklandžiai įkraunama galerija, 1 dalis - CSS-gudrybės

# 051: Sklandžiai įkraunama galerija, 1 dalis - CSS-gudrybės

Galerija turi tinklelio išdėstymą. Deja, jo pakrovimas yra šiek tiek staigus ir nerangus. Taip yra todėl, kad CSS3 stulpeliai yra skirti

# 049: Antraštių ir skyrių pašalinimas - CSS-gudrybės

# 049: Antraštių ir skyrių pašalinimas - CSS-gudrybės

Mes jau praleidome šiek tiek laiko, kad pašalintume puslapius, kad mūsų naršymas veiktų (vaizdo įrašas Nr. 030) ir jūs galėtumėte spustelėti svetainėje, bet kas yra tose dalyse "

# 047: Apklausos modulio kūrimas, 1 dalis - CSS-gudrybės

# 047: Apklausos modulio kūrimas, 1 dalis - CSS-gudrybės

Yra sena CSS-Tricks apklausų tradicija. Jie yra įdomūs, renka gerus svarbius duomenis ir stiprina žmonių ryšį su svetaine. Užsiėmimas FTW! "

# 048: apklausos modulio kūrimas, 2 dalis CSS-gudrybės

# 048: apklausos modulio kūrimas, 2 dalis CSS-gudrybės

Mes palikome visiškai padorų apklausų valdiklį. Tipografija yra švari ir viskas puikiai tinka. Tačiau tai nebuvo visai įtikinantis ar įdomus. Mes"

# 046: lankstūs šoninės juostos skelbimai - CSS-gudrybės

# 046: lankstūs šoninės juostos skelbimai - CSS-gudrybės

Viršutinis pagrindinės svetainės šoninės juostos modulis priklauso „Treehouse“, kaip pagrindiniam „CSS-Tricks“ rėmėjui. Remiantis pokalbiu, kurį turėjau su Ryanu Carsonu “,

# 043: Interaktyvi paieška - CSS-gudrybės

# 043: Interaktyvi paieška - CSS-gudrybės

Paieškos dizainas veikia gerai, kol pasiekiame „kūdikio meškos“ (mažo mobiliojo) dydžio pertrauką. Mes ten turime padaryti kažką kitaip. Mes padarome kambarį "

# 045: „Hot Link“ moduliai - CSS-gudrybės

# 045: „Hot Link“ moduliai - CSS-gudrybės

Manau, kad pirmą kartą šioje serijoje mes pridėsime keletą naujų dalykų tiesiai į dizainą dirbdami naršyklėje (neprasidėję „Photoshop“)

# 044: Reaguojantys „Real Emulator“ pakeitimai - CSS-gudrybės

# 044: Reaguojantys „Real Emulator“ pakeitimai - CSS-gudrybės

Labai siaurai nuspaudus darbalaukio naršyklę, galite neaiškiai suprasti, kaip veikia reaguojantis dizainas, tačiau tai nėra tikslus „

# 042: reaguoja į populiariausių treehouse skelbimų - CSS-gudrybės

# 042: reaguoja į populiariausių treehouse skelbimų - CSS-gudrybės

Mūsų sukurtas skelbimas puikiai tinka dideliems / darbalaukio dydžio ekranams, tačiau mažesniuose ekranuose jis pradeda gana greitai sugesti. Jau turime keletą lūžių taškų "

# 038: mygtuko būsenų pridėjimas - CSS-gudrybės

# 038: mygtuko būsenų pridėjimas - CSS-gudrybės

Sukūrėme mygtuko išvaizdą įprastoje būsenoje, tačiau toks 3D mygtukas prašo „pastumtos“ būsenos. Tai, ką darome, yra pridėti tamsesnę spalvą "

# 040: viršutinio treehouse skelbimo kūrimas, 1 dalis - CSS-gudrybės

# 040: viršutinio treehouse skelbimo kūrimas, 1 dalis - CSS-gudrybės

Pradedame nuo ketinimo pereiti į HTML ir CSSį viršų „Treehouse“ skelbimą, kurį ką tik sukūrėme, bet, žinoma, iškart paleidžiame nuo bėgių, kai tik pradėsime “

# 041: viršutinio treehouse skelbimo kūrimas, 2 dalis - CSS-gudrybės

# 041: viršutinio treehouse skelbimo kūrimas, 2 dalis - CSS-gudrybės

Puslapio viršuje turime „Treehouse“ skelbimo žymėjimą, tačiau turime atlikti tam tikrą stiliaus darbą. Pradedame nuo pačios medžio grafikos. Mes

# 039: „Photoshop“ populiariausias treehouse skelbimas - CSS-gudrybės

# 039: „Photoshop“ populiariausias treehouse skelbimas - CSS-gudrybės

Antraštėje palikome daug laisvos vietos. Nuo pat pradžių žinojau, kad tai bus pagrindinis CSS-Tricks rėmėjas Treehouse. Šiame"

# 037: Pastatų paieška, 3 dalis - CSS-gudrybės

# 037: Pastatų paieška, 3 dalis - CSS-gudrybės

Mes turime šiek tiek daugiau dirbti, kad užbaigtume paieškos sritį. Mes patekome į šalį vos sekundę, nes pastebiu, kad nepridėjome trimačio "

# 036: Pastatų paieška, 2 dalis - CSS-gudrybės

# 036: Pastatų paieška, 2 dalis - CSS-gudrybės

Vaizdo įraše Nr. 034 tęsiame ten, kur baigėme, ir toliau kuriame paieškos sritį. Šį kartą daugiausia dėmesio skirsime „atvirai“ paieškos būklei, statybai “

# 035: „Typekit FUT“ prevencija - CSS-gudrybės

# 035: „Typekit FUT“ prevencija - CSS-gudrybės

Truputį pertraukiame dirbdami paiešką, kad išspręstume nedidelį dalyką. „FOUT“ yra „nestilingo teksto blykstė“. Tai reiškinys, kai @ font-face "

# 034: Pastatų paieška, 1 dalis - CSS-gudrybės

# 034: Pastatų paieška, 1 dalis - CSS-gudrybės

Dabar, kai „Photoshopp“ pasirinkome tai, ką tikimės pasiekti naudodami paieškos sritį, ėmėmės jos kurti naudodami HTML ir CSS. Mes jau turime savo piktogramos šriftą "

# 033: „Photoshopp“ paieška - CSS-gudrybės

# 033: „Photoshopp“ paieška - CSS-gudrybės

CSS-Tricks yra daug turinio. Tai vienas iš dalykų, dėl kurio dizainas tampa šiek tiek sudėtingas. Nors mes galime išlikti švarūs dėl dizaino, mes

# 032: Tinklelio reagavimas - CSS-gudrybės

# 032: Tinklelio reagavimas - CSS-gudrybės

Pradedame nuo žaidimo su savo tinklaraščio įrašų moduliu, blaškydamiesi tarpais. Viršutiniame kairiajame modulio kampe taip pat pridedame mažą spalvotą kvadratą "

# 031: dabartinis navigacijos paryškinimas - CSS-gudrybės

# 031: dabartinis navigacijos paryškinimas - CSS-gudrybės

Šiame itin greitame vaizdo įraše pridedame visą CSS, būtiną norint įsitikinti, kad dabartinis puslapio elementas pagrindinėje naršymo srityje bus paryškintas, kai tas puslapis yra