Відеосюжети 2025, Січень
Ілюстрація Ніка мала три різні шари для голови. Це лише трохи різні варіації. Ми могли б поміняти зображення анімацією "
Коли я працював над цим дизайном, вийшов jQuery 1.8. Це лише коротке відео, щоб покластися на той факт, що подібні речі трапляються під час розробки веб-сайтів "
У нас є основний заголовок галереї, але в ньому бракує маленьких блакитних людей, яких Еріка розмістила на оригінальній ілюстрації. Ми говорили про це в "
Щойно ми створили спеціальний заголовок для Галереї, тому, поки ми знаходимось на, давайте продовжуватимемо додавати ще один спеціальний заголовок. цей зробив "
За межами домашньої сторінки є сім різних основних областей сайту. Отже, я найняв семи різних ілюстраторів, щоб вони займалися дизайном. Це перша ми "
До цього часу ми вносили зміни в код локально, не використовуючи жодного контролю версій. Зі збільшенням складності цього сайту це стає "
Ми добре розпочали реагувати на дизайн. Меню з найменшими розмірами екрану розбивається на сітку 2x4. Це чудово лягає на екран, але "
Ми додаємо певної реакції на сітку, яку ми створили для Галереї. На найширших екранах ми маємо це чотири стовпці. Потім ми починаємо додавати в "
У якому ми з’ясовуємо проблеми, з якими ми стикалися з гарним завантаженням макета стовпця. Виправлення полягало в тому, щоб видалити CSS, який робив "
Ми починаємо копатись у макеті зони Галереї, це те, що мені запам’яталось з початку цього процесу редизайну. В основному "
У нас є сітка для галереї. На жаль, завантаження його трохи різке та хитке. Це тому, що стовпці CSS3 призначені для "
Ми вже витратили трохи часу на видалення сторінок, щоб наша навігація працювала (Відео # 030), і ви могли клікати по сайту, але що є на цих підрозділах "
Існує давня традиція опитування на CSS-Tricks. Вони веселяться, збирають важливі важливі дані та збільшують зв’язок людей із сайтом. Заручини FTW! "
Ми зупинились із абсолютно пристойним віджетом для опитування. Типографіка чиста і все ідеально придатне для використання. Однак це було не зовсім переконливо чи весело. Ми "
Верхній модуль на головній бічній панелі сайту належить Treehouse, як основному спонсору CSS-Tricks. На основі розмови, яку я мав з Райаном Карсоном, "
Дизайн пошуку працює чудово, поки ми не дійдемо до нашого розміру "маленького ведмедика" (маленького мобільного). Ми маємо там робити щось інше. Ми робимо трохи кімнати "
Я думаю, що вперше в цій серії ми збираємось додати кілька нових речей до дизайну безпосередньо, працюючи в браузері (не починаючи з Photoshop "
Дуже вузьке стискання браузера на робочому столі може дати вам неясне уявлення про те, як працює адаптивний дизайн, але це не точне зображення "
Оголошення, яке ми розмістили, чудово підходить для великих екранів / розмірів робочого столу, але воно досить швидко починає давати збій на менших екранах. У нас вже є деякі точки зупинки "
Ми створили вигляд кнопки у звичайному стані, але така 3D-кнопка просить про стан "штовхання". Що ми робимо, це додаємо темніший колір до "
Ми починаємо з наміру перейти до HTML & CSS в найпопулярнішій рекламі на Treehouse, яку ми щойно розробили, але, звичайно ж, виходимо з колії, як тільки починаємо "
У нас є розмітка для оголошення Treehouse у верхній частині сторінки, але нам потрібно виконати певну роботу зі стилізацією. Ми починаємо з самої графіки дерева. Ми "
Ми залишили велику кількість вільного місця в заголовку. З самого початку я знав, що це буде для основного спонсора CSS-Tricks - Treehouse. У цьому"
Нам потрібно зробити ще трохи роботи, щоб закінчити область пошуку. Ми потрапляємо в сторону лише секунду, оскільки я помічаю, що ми не додали тривимірну "
Ми продовжуємо там, де зупинились у Відео № 034, і продовжуємо будувати область пошуку. Цього разу ми зосереджуємося на "відкритому" стані пошуку, побудови "
Ми робимо невелику перерву в роботі над пошуком, щоб вирішити невелику проблему. "FOUT" - це "Спалах нестильового тексту". Це явище, де @ font-face "
Тепер, коли ми зробили фотошоп, що ми сподіваємось досягти за допомогою області пошуку, ми взялися за його створення за допомогою HTML та CSS. У нас уже є наш шрифт значків "
На CSS-Tricks є багато вмісту. Це одна з речей, що робить його дизайн дещо складним. Хоча ми можемо залишатися чистою з дизайном, ми "
Ми починаємо з гри з нашим модулем допису в блозі, возитися з інтервалами. Ми також додаємо маленький кольоровий квадрат у верхньому лівому куті модуля, "
У цьому супершвидкому відео ми додаємо всі CSS, необхідні для того, щоб поточний елемент сторінки в основній навігації був виділений, коли ця сторінка "