Содержание статьи
Предисловие
Этот учебник был написан в другую эпоху — перед градиентами CSS, перед тенями, до создания материала; когда основные браузерные браузеры Internet Explorer, Firefox и Chrome по-прежнему имеют номера с одной цифрой. Интернет еще не осознал важность минималистского дизайна, а веб-страницы заняли видение рекламных щитов над бумагой.
Недавно я выкопал свои старые публикации, чтобы привести их в современную эпоху на Medium. Этот учебник, в частности, является одним из первых, что я когда-либо писал. У меня было намерение переписать каждую публикацию, чтобы удалить устаревшую информацию и обратиться к новой целевой аудитории младших разработчиков и студентов. Тем не менее, никакая рефакторинг не сделает этот конкретный учебник менее устаревшим. С возможностями CSS современных браузеров никогда не должно быть другого времени для создания градиентов на сервере.
Я представляю этот учебник для двух целей:
- Логика. Хотя не следует применять принципы этого руководства к среде, ориентированной на производство, способность динамически генерировать изображения и выполнять логику кодирования по-прежнему актуальны.
- Развлечения; понимание мыслительных процессов самого себя как младшего разработчика и дизайна начала 2000-х годов. Во время оригинальной записи динамически создаваемые градиенты были большой проблемой. Шаблоны нуждались в переходах от их «призыв к действиям» и их ярких баннеров к их контенту. Дизайнеры и разработчики должны были открыть PhotoShop в любое время, когда захотят изменить цвет на своем веб-сайте; полученные градиенты и тени просто не могли быть динамически отображены браузером. Войдите в систему, создавая их на сервере.
. Хотя я решил переиздать этот учебник, я удалю любой контент, который может заставить читателя стать худшим разработчиком, и я открыт для изменений, предложенных комментариями , Тем не менее, я оставляю себя уязвимым, выставляя мышление дизайна из другого десятилетия, чтобы показать, насколько далеко мы пришли в мир развития на фронте.
Введение
Это учебник для сценарий, который я считаю незаменимым. Градиенты — это необходимый и простой инструмент веб-дизайна, обеспечивающий идеальный переход от цвета к цвету. Проблема, которую я часто нахожу, — это ограничения использования изображений на динамических шаблонах.
Это достаточно просто, чтобы добавить PHP в ваши файлы CSS, чтобы изменить основные цвета. К сожалению, это не так просто с более сложными шаблонами. Конструкции состоят из более строковых литералов в CSS. Они включают изображения, которые создаются в таких программах, как PhotoShop, а не в браузерах или веб-серверах.
По крайней мере, именно так большинство веб-разработчиков просматривают изображения. К счастью, они ошибаются. Начиная с основ, в этом учебном пособии будет показано, как создавать динамические градиенты для ваших шаблонов. Это не только экономит ваше время при создании градиентов (так как у вас не будет открытого PhotoShop), но это позволит вам использовать более широкий выбор шаблонов для ваших пользователей.
Например, вы разрешаете членам вводить свои собственные значения цвета, например, аналогично настройке профиля vBulletin. Пользователь вводит # A0A0FF для цвета фона заголовка и # 008000 для панели навигации. Но есть проблема: есть градиент, который угасает заголовок на навигационной панели. Вы не хотите, чтобы вручную создавать всевозможные комбинации цветов! Ну так что ты делаешь?
Используя статическое изображение, когда пользователь выбирает два цвета # A0A0FF и # 008000, они получат эти нежелательные результаты: [1945905]
Динамически генерируя градиент от # A0A0FF до # 008000, вместо этого будет производить: [1945905]
Вам даже не нужно было поднять палец или открыть PhotoShop для создания градиент. Он создал себя!
Настройка параметров
Первыми вещами, которые нам нужно установить при настройке динамического градиента, являются параметры, которые должны быть динамическими. Высота, цвет начала и / или цвет конца? Если какой-либо из них необходимо изменить для каждого изображения, они должны быть установлены с помощью переменной $ _ GET . В противном случае вы можете установить их статически в самом файле PHP (например, $ height = $ _GET ['height']; против $ height = 16; ).
Использование mod_rewrite для этого рекомендуется. Это не учебник mod_rewrite, поэтому я не буду предоставлять расширенный код для этого. Здесь приведена динамическая динамика всех трех переменных, где gradient.php — файл генерации градиента:
Проверка переменных для достоверности
Что-то, что недостаточно сделано в программах, это проверка допустимых значений переменных ввода пользователя. Хотя mod_rewrite использует регулярные выражения для предотвращения перенаправления фиктивных запросов, если пользователь знает URL-адрес файла gradient.php они могут вводить то, что им нравится. По этой причине, чтобы предотвратить ошибки PHP от ошибок журналов ошибок, чтобы привыкнуть к проверке ввода переменных и предотвратить ввод кода с коротким сценарием в сложных цветовых алгоритмах, мы проверяем соответствующие значения.
Рассчитайте шаги
Если бы только PHP понимал шестнадцатеричный характер, моя работа была бы проще. Перед созданием изображения необходимо вычислить три вещи: значение RGB начального цвета, значение RGB цвета конца и базовый алгоритм для определения каждого оттенка между ними.
Вот пример значений $ step :
Создать изображение
Теперь, когда вычисляются переменные, мы можем просто использовать функции изображения PHP для фактического создания и вывода изображения.
И вот он у вас есть! Градиент, который создает себя. Вот полный код:
Все готово! Просто призовите файл gradient.php когда вам нужно использовать градиент! Я даже использую его, когда градиент не является динамическим, просто потому, что он экономит столько времени, особенно при настройке цветов всего на несколько значений.
Загрузка...
