Видео скринкасты 2025, Январь

На иллюстрации Ника было три разных слоя голов. Это просто немного разные вариации. Мы могли бы заменить изображения анимацией "

Когда я работал над этим дизайном, был выпущен jQuery 1.8. Это всего лишь небольшое видео, чтобы убедиться в том, что подобные вещи происходят во время разработки сайтов "

У нас есть основной заголовок галереи, но в нем отсутствуют маленькие синие человечки, которые Эрика поместила на исходную иллюстрацию. Мы говорили об этом в "

У нас только что есть настраиваемый заголовок для галереи, поэтому, пока мы находимся, давайте продолжим добавлять еще один настраиваемый заголовок. это было сделано "

Помимо главной страницы, на сайте есть семь различных основных областей. Итак, я нанял семь разных иллюстраторов для создания дизайна. Это мы первые "

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

У нас хорошее начало адаптивного дизайна. Меню на самых маленьких экранах разбивается на сетку 2х4. Он хорошо помещается на экране, но "

Мы добавляем некоторую отзывчивость к сетке, которую мы создали для галереи. На самых широких экранах у нас установлено четыре столбца. Затем мы начинаем добавлять "

В котором мы выясняем проблемы, с которыми мы столкнулись с правильной загрузкой макета столбца. Исправление заключалось в удалении CSS, из-за которого "

Мы начинаем копаться в макете области Галереи, о чем я думал с самого начала этого процесса редизайна. По большей части"

У нас есть сетка для галереи. К сожалению, загрузка немного резкая и неустойчивая. Это потому, что столбцы CSS3 предназначены для "

Мы уже потратили немного времени на создание заглушек для страниц, чтобы наша навигация работала (видео № 030), и вы могли перемещаться по сайту, но что находится на этих подменю?

Опросы по CSS-Tricks имеют давнюю традицию. Они веселые, собирают важные важные данные и увеличивают количество пользователей, посещающих сайт. Вступление FTW! "

Мы закончили с вполне приличным виджетом для опроса. Типографика чистая, и все удобно. Однако это было не совсем интересно или весело. Мы"

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

Дизайн поиска работает нормально, пока мы не перейдем к размеру нашего "медвежонка" (маленький мобильный). Мы должны там сделать что-то другое. Мы освобождаем место "

Я думаю, что впервые в этой серии мы собираемся добавить некоторые новые вещи в дизайн напрямую, работая в браузере (не начиная с Photoshop "

Сжатие настольного браузера очень узко может дать вам смутное представление о том, как работает адаптивный дизайн, но это не точное представление о "

Рекламное объявление, которое у нас есть, отлично подходит для экранов большого размера / рабочего стола, но оно довольно быстро начинает давать сбой на экранах меньшего размера. У нас уже есть несколько точек останова "

Мы создали вид кнопки в ее обычном состоянии, но такая 3D-кнопка требует "нажатого" состояния. Что мы делаем, так это добавляем более темный цвет к "

Мы начинаем с намерением перейти на HTML и CSS, используя только что созданную рекламу Top Treehouse, но, конечно же, мы сорвемся с рельсов, как только начнем "

У нас есть разметка для объявления Treehouse в верхней части страницы, но нам нужно поработать над стилем. Начнем с самого дерева. Мы"

В шапке мы оставили много свободного места. С самого начала я знал, что это будет для главного спонсора CSS-Tricks, Treehouse. В этом"

Нам нужно еще немного поработать, чтобы завершить поиск. Мы отвлеклись на секунду, так как я заметил, что мы не добавили трехмерный "

Мы продолжаем с того места, где остановились на видео № 034, и продолжаем расширять зону поиска. На этот раз мы сосредоточимся на "открытом" состоянии поиска, построении "

Мы делаем небольшой перерыв в работе над поиском, чтобы решить небольшую проблему. «FOUT» - это «Вспышка не стилизованного текста». Это явление, когда @ font-face "

Теперь, когда мы сделали фотошопы, чего мы надеемся достичь с помощью области поиска, мы приступили к ее созданию с помощью HTML и CSS. У нас уже есть наш иконочный шрифт "

На CSS-Tricks много контента. Это одна из вещей, которая делает его дизайн немного сложным. Хотя мы можем оставаться чистыми с дизайном, мы "

Мы начинаем с игры с нашим модулем сообщений в блоге, возясь с пробелами. Мы также добавляем маленький цветной квадрат в верхнем левом углу модуля "

В этом супер-быстром видео мы добавляем весь CSS, необходимый, чтобы убедиться, что текущий элемент страницы в основной навигации выделяется, когда эта страница "