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

Илюстрацията на Ник имаше три различни слоя за главите. Те са просто малко по-различни вариации. Можем да разменяме изображенията с анимация "

Докато работех по този дизайн, беше пусната jQuery 1.8. Това е само едно бързо видео, за да разчитаме на факта, че такива неща се случват, докато разработвате сайтове "

Имаме основната заглавка на галерията, но липсват малките сини човечета, които Ерика постави в оригиналната илюстрация. Бяхме говорили за това в "

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

Има седем различни основни области на сайта извън началната страница. И така, наех седем различни илюстратори да правят дизайни. Това е първото, което сме "

Досега правехме промени в кода локално, без да използваме някакъв контрол на версиите. С нарастването на сложността на този сайт, това става "

Имаме добро начало на отзивчивия дизайн. Менюто при най-малките размери на екрана се разделя на решетка 2x4. Пасва добре на екрана, но "

Добавяме малко отзивчивост към мрежата, която сме настроили за Галерията. На най-широките екрани имаме четири колони. След това започваме да добавяме "

В която ние разбрахме проблемите, които имахме с това, че оформлението на колоната се зарежда добре. Поправката беше да се премахне CSS, който правеше "

Започваме да разглеждаме оформлението на зоната на Галерията, което е нещо, което ми е на ум от началото на този процес на редизайн. Предимно "

Разполагаме с мрежата за галерията. За съжаление зареждането му е малко рязко и нестабилно. Това е така, защото CSS3 колоните са проектирани да "

Вече прекарахме малко време, за да извадим страници, така че навигацията ни да работи (Видео № 030) и можете да кликнете върху сайта, но какво има в тези под "

Има дълга традиция на анкети на CSS-трикове. Те са забавни, събират важни важни данни и увеличават връзката на хората със сайта. Ангажимент FTW! "

Спряхме с напълно прилична джаджа за анкета. Типографията е изчистена и всичко е напълно използваемо. Не беше обаче убедително или забавно. Ние "

Най-горният модул в главната странична лента на сайта принадлежи на Treehouse, като основен спонсор на CSS-Tricks. Въз основа на разговор, който имах с Райън Карсън, "

Дизайнът на търсенето работи добре, докато стигнем до нашата почивка с размер „бебешка мечка“ (малка мобилна). Там трябва да направим нещо различно. Правим малко стая "

Мисля, че за първи път от тази поредица ще добавим някои нови неща към дизайна директно, като работим в браузъра (не стартирайки в Photoshop "

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

Рекламата, която имаме на място, е чудесна за големи / настолни екрани, но започва да се проваля доста бързо на по-малки екрани. Вече имаме точки за прекъсване "

Създадохме вид на бутон в нормално състояние, но 3D бутон като този моли за "натиснато" състояние. Това, което правим, е да добавим по-тъмен цвят към "

Започваме с намерението да влезем в HTML & CSS с най-добрата реклама на Treehouse, която току-що сме проектирали, но разбира се ще излезем от релсите веднага щом започнем "

Имаме поставена надценка за рекламата на Treehouse в горната част на страницата, но имаме да свършим малко работа по стилизиране. Започваме със самата графика на дървото. Са били"

Оставихме голямо количество свободно пространство в заглавката. Още в самото начало знаех, че това ще бъде за основния спонсор на CSS-Tricks, Treehouse. В това"

Предстои ни още малко работа, за да завършим областта за търсене. Отклоняваме се само за секунда, тъй като забелязвам, че не сме добавили триизмерната "

Продължаваме там, където сме спрели във видео № 034, и продължаваме да изграждаме зоната за търсене. Този път се фокусираме върху "отвореното" състояние на търсенето, изграждането "

Правим малка почивка в работата по търсенето, за да разрешим малко вълнуващ проблем. „FOUT“ е „Flash of Unstyled Text“. Това е феномен, при който @ font-face "

След като Photoshopped това, което се надяваме да постигнем с областта за търсене, се заехме да го изградим с HTML и CSS. Вече имаме нашия шрифт на иконата "

В CSS-трикове има много съдържание. Това е едно от нещата, което прави дизайна му малко предизвикателен. Въпреки че можем да останем чисти с дизайна, ние "

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

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