Видео скринкасты 2024, Декабрь

Пока что настоящий веб-сайт совсем не похож на наш дизайн в Photoshop. В этом скринкасте мы подробно рассказываем об этом, начиная с "

Мы создали новый комплект в Typekit для v10. Для брендинга мы сейчас будем использовать Proxima Nova Soft и некоторые другие шрифты, которые максимально похожи на шрифты HF&J в нашем "

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

Мы представляем концепцию запросов @media в CSS. Многое из того, что позволяет нам использовать Sass в этом проекте, - это оставаться СУХИМИ (не повторяться). Мы сделали"

В этом супер-быстром скринкасте мы используем MAMP для настройки URL-адреса, который мы можем использовать для локальной разработки. Это полезно по ряду причин: мы можем ссылаться на "

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

Мы могли бы написать собственный Sass @mixins, чтобы помочь с CSS3 (например, с градиентами), но уже существует фреймворк Sass под названием Compass, который:

Теперь, когда у нас есть собственный локальный домен, мы можем использовать PHP. «P» в MAMP означает «PHP» =). Использование PHP означает, что мы можем использовать include. Например: Наш "

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

Продолжая концепцию «Не переусердствуйте с сетками», мы получаем желоба в сетке, просто используя некоторые простые отступы. Мы сохраняем номер заполнения "

Typecast (в бета-версии на момент съемок) - действительно отличное веб-приложение для игры с веб-типографикой. Это отличный интерфейс для игры "

Я думаю, что очень хорошо иметь отдельный файл (.scss), предназначенный для подавляющего большинства типографских материалов на сайте. В Normalize довольно много типографики "

Теперь, когда у нас есть область для сообщений в блоге, с которой можно работать, мы действительно можем заняться типографикой сообщений в блоге. Пожалуй, самая важная типографика на сайте, поскольку она "

Мы немного поработали над заголовками, но мы рассмотрим их подробнее в этом скринкасте. Заголовки - чертовски важный аспект любого сайта. Сделано отлично,"

Мы только что установили Prism.js и все заработало. В этом скринкасте мы находим тему под названием Tomorrow Theme и добавляем ее цвета синтаксису "

Насколько я помню, я использовал Google Code Prettify, чтобы применить подсветку синтаксиса к блоку кода в CSS-Tricks. Вы знаете, где в строке вроде "

У нас есть восемь вкладок навигации верхнего уровня, но «работает» только «Главная». Чтобы у нас было несколько страниц для работы, мы убираем некоторые страницы для "

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

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

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

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

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

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

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

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

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

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

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

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

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