Видео екранни предавания 2025, Юли

Дизайнът на коментари може да изглежда много прост. И това е! Но мисля, че простото е ефективно в този случай. Коментарите са толкова важна част от CSS-трикове "

Започваме да ровим във Photoshop тук и да проектираме областта за коментари. Започваме най-отгоре, което означава отделните коментари (за разлика от „

Започваме с разглеждането на някои от мрънкащите работи, които извърших зад кулисите, като разясних някои неща, които трябваше да се свършат. Като добавяне в останалата част от "

Почти сме готови да изградим началната страница на областта Snippets на сайта. Веднага започваме да променяме нещата и да вкарваме повече неща "

С дизайна на областта на фрагментите „готов“ - вече можем да преминем към някаква интерактивност (прочетете: JavaScript). Добавяме супер куцо преобръщане за връзките на "

Вече имаме дизайн на Photoshop, от който да работим за началната страница на областта Snippets. Той е много по-удобен за сърфиране, отколкото беше преди, но запазва дъгата "

Време е да се потопите в района на фрагментите! Тоест действителната област на съдържанието му. Вече имаме заглавката на място. Областта с фрагменти е доста популярна. "

В този скрийнкаст завършваме секцията „Алманах“. В Алманаха има доста ясна йерархия. Отива: Начало> Начало на алманах> Имот или селектор> "

Тук скачаме напред само малко. Това е доста изчерпателна поредица от екранизации, но това е само около 40 часа и разбира се този действителен проект "

Вече работихме локално в локален домейн (v10.whatup). Сега е време да започнете да преминавате към WordPress. Ще продължим да работим на местно ниво "

Имаме цялото съдържание, от което се нуждаем, на тази страница и имаме заглавката на място. Сега можем да започнем CSSin 'съдържанието в дизайна, в който сме влезли "

Когато започнем да работим в WordPress, ще бъде най-добре, ако вземем точно копие на базата данни на живо, за да работим локално. Някои уебсайтове имат неща като „

След като се преборихме с правилното съдържание на началната страница на Алманаха, можем да разгледаме някои реални стилове с CSS. Решихме да отидем "

В този екран се справяме до голяма степен с оранжевия „Photostar“, който доминира в долния колонтитул. Правим звездата в отделен файл във Photoshop, за да можем да направим "

Хедърът за Alamanc влезе, този път от Джовани Дифетеричи. Използваме много техники, които вече сме установили, за да започнем "

Появи се илюстрацията на потребителски заглавки за раздела за видеоклипове, този път от Alyssa Nassner. Прекарваме малко време в организиране на файла Photoshop и "

В тази последна скринкаст за изграждане на долния колонтитул работим върху долния долен колонтитул, където са областите CodePen и ShopTalk. Трябва да променим HTML a "

В този скрийнкаст се фокусираме върху линиите под връзките в горната част на долния колонтитул. Ние се спъваме, за да разберем кои неща трябва да "

Главата на откъсите влезе, този път от Рейгън Рей. Прекарваме малко време във Photoshop, този път разбъркваме малко нещата, за да сме сигурни, че "

Със създадената HTML структура за долния колонтитул имаме това, от което се нуждаем, за да започнем да оформяме и да получим този долен колонтитул като този, който сме проектирали във Photoshop. "

Това е последната от работата на Photoshop, която ще направим специално за долния колонтитул, преди да преминем към действителното му изграждане. В този скрийнкаст ние "

Работим върху създаването на дизайн за долния колонтитул в Photoshop. Бързо напомняне: Работя във Photoshop, защото там се чувствам по-креативен, преди да прескоча "

В този скрийнкаст стигаме до още някой бизнес на Photoshoppin, излагайки най-долния долен колонтитул с връзки към двата ми най-големи проекта, CodePen "

Започваме голямото пътешествие, което е долният колонтитул! CSS-Tricks винаги е имал голям изискан долен колонтитул и този дизайн няма да бъде изключение. Не е чисто "

С нашия дизайн на долния колонтитул, готов за използване във Photoshop, можем да започнем да го изграждаме в статичния си HTML и CSS макет. Първата стъпка е даването "

Имаме друга зона на BSA, която да се интегрира в сайта. Това трябва да е малко по-лесно, защото вече разполагаме с JavaScript и това е просто "

Имаме макет на това как искаме да изглеждат зоните ни BuySellAds, така че нека да го изградим реално. Уебсайтът BuySellAds предоставя кода, от който се нуждаем "

Единственото нещо, което сега липсва в заглавката на нашите форуми за митниците, е частта, която всъщност казва "Форуми"! Ник илюстрира ръка, която държи знак, който е имал предвид "

След като вече знаем с какви точно зони работим, се връщаме към Photoshop и се подиграваме как искаме да изглеждат тези рекламни зони. Имаме прецедент за "

Както знаете, някои от рекламите на CSS-трикове са нещо като "самоуправляеми", като основния спонсор на Treehouse. Взех това, защото е само един "