CSS Кольори: взяти під контроль за допомогою PHP

Теги:

Original on http://www.barelyfitz.com/projects/csscolor/

Нео: Чи завжди ви дивитися на нього закодовані?

Cypher: Ну, ви повинні... є дуже багато інформації.

- Матриця

У той час як багато сайтів користуються потужною середовища програмування для створення HTML, ці ж інструменти, як правило, ігноруються, коли справа доходить до створення каскадних таблиць стилів (CSS). У цій статті описується, як взяти під контроль свої кольори в CSS за допомогою PHP. Ви дізнаєтеся, як:

  • Централізоване колір визначення за допомогою змінних.
  • Окреме подання і зміст, посилаючись на кольори, використовуючи абстрактні імена, такі як база і підсвічуванням.
  • Автоматичне створення колірного градієнта з одного кольору бази:

    -5
    -4
    -3
    -2
    -1
    0
    +1
    +2
    +3
    +4
    +5
  • Автоматична настройка контрастності кольору переднього плану, щоб вони могли подивитися на верхню частину квітів фону:

    -5
    -4
    -3
    -2
    -1
    0
    +1
    +2
    +3
    +4
    +5

Використання PHP для генерації CSS

Щоб використовувати PHP в файлі CSS:

  1. Перейменуйте style.css
    файл style.php , потім додайте наступні в початок файлу:

    <?php header("Content-type: text/css"); ?>

    Цей рядок говорить браузеру, що файл CSS замість HTML.

  2. У вашому HTML-файли, змінювати стиль посилань з style.css в style.php. Наприклад:
    <link rel="stylesheet" type="text/css"
 media="screen" href="http://www.barelyfitz.com/projects/csscolor/style.php">

Централізація Ваш колір Визначення

Я навіть не побачити код. Я тільки бачу, блондинка... брюнетка... рудий...

- Матриця

У звичайному файлі CSS, колірні коди розкидані по всій сторінці, і ті ж кольори, які використовуються в декількох місцях. Якщо у вас є талант до візуалізації шістнадцяткові коди кольорів, це може бути важко визначити, які кольори належать до яких кодів.

Наша перша мета полягає назвати колірні коди і визначити їх в одному місці. Тоді, якщо ми хочемо змінити колір, ми можемо змінити його один раз, і зміни будуть поширюватися по всій стилів.

Давайте почнемо з наступного стилів зразка:

body {
 background:#fff;
 color:#333;
}
h1, h2, h3, h4 {
 color:#00840;
}
blockquote {
 color:#008400;
}

І перетворити його в наступному:

<?php
header("Content-type: text/css");
$white = '#fff';
$dkgray = '#333';
$dkgreen = '#008400';
?>
body {
 background:<?=$white?>;
 color:<?=$dkgray?>;
}
h1, h2, h3, h4 {
 color:<?=$dkgreen?>;
}
blockquote {
 color:<?=$dkgreen?>;
}

Абстрагуючись Ваші кольору

Постарайтеся усвідомити правду... немає ложки.

- Матриця

Що робити, якщо ми хочемо, щоб наші заголовки червоний? Якби ми змінили значення $ dkgreen , то ім'я змінної, не відображає реального кольору. Крім того, якщо ми змінимо $ dkgreen , як заголовок елементів і цитати елемент буде змінювати колір.

Ми повинні змінити спосіб, яким ми називаємо нашу кольору і створювати змінні відповідно до функцією колірної замість
значення за кольором:

<?php
header("Content-type: text/css");
$pageBG = '#fff';
$pageFG = '#333';
$heading = '#a00000'
$quote = '#008400';
?>
body {
 background:<?=$pageBG?>;
 color:<?=$pageFG?>;
}
h1, h2, h3, h4 {
 color:<?=$heading?>;
}
blockquote {
 color:<?=$quote?>;
}

Для більш складних, реальних слів, наприклад, прочитати мої Case Study: абстрагування Кольори для компанії Hewlett-Packard.

Створення палітри за допомогою PHP

Ми повинні почати з цих програм співробітництва в першу чергу. Ось основні нудним лайном. Давайте зробимо щось веселіше.

- Матриця

Тепер давайте це ще один крок і використовувати PHP для створення нових кольорів. Почнемо з основний колір і колір підсвічування, а потім створює палітру світлих і темних відтінків:

-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5
-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5

Зверніть увагу, що текст не читається на деякі зразки. Давайте використовувати PHP налаштувати колір переднього плану, використовуючи колір видимість принципів рекомендований W3C:

-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5
-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5

Для визначення цих квітів в нашому файлі CSS, просто додайте наступні рядки:

<?php
include_once("csscolor.php");
$base = new CSS_Color('C9E3A6');
$highlight = new CSS_Color('746B8E');
?>

Потім, щоб використовувати кольори, зробити щось на зразок цього:

/* Use the base color, two shades darker */
background:#<?= $base->bg['-2'] ?>;

/* Use the corresponding foreground color */
color:#<?= $base->fg['-2'] ?>;

/* Use the highlight color as a border */
border:5px solid #<?= $highlight->bg['0'] ?>

Ось приклад стилю в дії.

Завантажити

Ви можете завантажити csscolor.php тут:

  • csscolor.zip