Cores Aleatórias [CSS + PHP]

Saudações! Hoje, trago um tutorial sem vídeo por enquanto, já que estou sem tempo pra renderizar um que está atrasado sobre colocar um Menu DropDown no Blogger. De qualquer forma, hoje vamos ver como fazer um sistema de cores aleatórias.

Itens necessários:

1. Servidor PHP: Recomendo o WampServer, que pode ser instalado rapido e facilmente em Windows, Linux e MAC OS.
Nota: Caso utilize Windows XP ou anterior, use o WampServer 2.4 ou anterior.
(Links no fim da postagem)
--
Além disso, usaremos rgb() ao invés de #hexadecimais.

Recomendo o uso do Aptana Studio 3 (link no final), pois ele ajuda bastante e é gratuito.

Para começar
Crie o estilo normalmente:

style.css

@charset "UTF-8";
/* Héliton Martyns */
body {
background: rgb( 255,255,255 ); /* rgb( Red, Green, Blue ); 0-255 . 255,255,255 = #FFFFFF; */
}

Defini que o fundo do body como branco.

Se você não está acostumado a usar rgb(), não tem importância, já que é o PHP quem vai fazer isso, mas sinta-se a vontade para acessar o color-hex.com, digitar sua cor hexadecimal, e ver os valores RGB junto com mais uma porrada de outras propriedades.

Ótimo. Você pode, agora, simplesmente renomear nosso style.css para style.php, mas, para não perder a coloração de sintaxe, vamos deixar assim.
Criamos agora o arquivo style.php:

style.php

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

A linha 2 indica ao navegador que aquele arquivo enviará um CSS.
A linha 4, exige o style.css, e o incorpora neste arquivo. ATENÇÃO: Se o arquivo não existir, o PHP retorna Fatal_Error, já que se trata de Require, e mata o programa.

Agora vamos começar de verdade

No style.php, vamos usar rand(); para gerar números aleatórios e os colocar em um índice de $r:

style.php

<?php
header("Content-type: text/css"); // isso retorna CSS

$r[0] = rand(0, 255); // O primeiro índice do array $r é igual à um número aleatório entre 1 e 255 (os valores RGB)
$r [1] = rand(0,255);
$r [2] = rand(0,255); // Agora já temos os 3 valores RGB.
require_once("style.css"); // Chama o CSS
?>

O array $r, também funciona assim:

$r = array( rand(0,255), rand(0,255), rand(0,255) );

Agora que ja geramos 3 números diferentes e aleatórios, vamos colocá-los no RGB.

Se você não sabe nada PHP, vou explicar algumas coisas básicas antes de prosseguirmos.

1. O PHP fica em qualquer documento que tenha a extensão .php, sendo que as únicas diferenças de um documento PHP para o HTML são:
   1.1. O PHP não é compreendido pelo navegador e exibido em texto, se não possuir um servidor que o trate (WAMP Server, XAMPP, Vertigro Serv...)
   1.2. O .html não aceita PHP, mas o PHP aceita HTML.

2. Num documento .php, o PHP fica entre <?php e ?> e esta parte não chega ao browser (fica retido pelo servidor). Já o HTML toma conta de todo o resto.

3. PHP é server-side, ou seja, atua no lado do servidor. Isso explica o item 2.

Um construtor útil do PHP é o echo, que imprime no HTML o que é passado como parâmetro. A função é declarada assim:
echo "O que deve ser escrito diretamente no HTML e no lugar onde este bloco começa";
veja um exemplo:
<a href="<?php echo "http://www.google.com"; ?>" target="_blank">Link dinâmico</a>
que é exatamente igual a
<a href="http://www.google.com" target="_blank">Link dinâmico</a>
Mas qual a utilidade?
Bem. O echo não funciona apenas com uma string declarada ali. Ele pode imprimir retorno de função, valor de variáveis, índices de array, etc.

Prossigamos então.

Já que o PHP é quem está mandando dados CSS, nosso style.css também aceita PHP, uma vez que o código PHP será jogado no style.php e executado. Então, com o array $r já armazenando nossas três posições RGB, vamos colocar:

style.css

@charset "UTF-8";
/* Héliton Martyns */
body {
background: rgb( <?php echo "{$r[0]}, {$r[1]}, {$r[2]}"; ?> ); /* rgb( Red, Green, Blue ); 0-255 . 255,255,255 = #FFFFFF;
}

Pronto. Para entender, vamos supor que a rand() retornou em nosso array:

$r[0] = 155;
$r[1] = 2;
$r[2] = 245;

então, o echo acaba ficando assim:
echo "155, 2, 245";
e vai imprimir exatamente isso no CSS, que funciona perfeitamente.

Uma forma mais simples, seria simplesmente colocar o estilo na página .php junto com o resto do site. Assim, a $r seria calculada ali e tudo feito, sem necessidade de 3 arquivos.

Agora o código completo e a explicação dele:

index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testando</title>
<?php
$r[0] = rand(0,255);
$r[1] = rand(0,255);
$r[2] = rand(0,255);
?> <!-- Acaba aqui o PHP -->
<style type="text/css">
body {
background:rgb( <?php echo "{$r[0]}, {$r[1]}, {$r[2]}"; ?> );
}
</style>
</head>
<body>

</body>
</html>

Na linha 13, é possível ver o echo em ação, manipulando as variáveis.
Pronto. Cada vez que você atualizar a página, o PHP recalcula as rand() e retorna outra cor.

Até mais!!!
LINKS
Softwares
WampServer 2.5 — ►Click Me!◄ (Clique em download)
WampSrver 2.4 (32 bits) — ►Click Me!◄ (Aguarde 5 segundos que o download começa automaticamente)
WampServer 2.4 (64 bits) — ►Click Me!◄ (Aguarde 5 segundos que o download começa automaticamente)
Aptana Studio 3 — ►Click Me!◄ (Clique em download)

Referência
• Documentação oficial PHP rand(); — ►Click Me!◄ grande parte em português
• Documentação oficial PHP header(); — ►Click Me!◄ em inglês
• Documentação oficial PHP require(); — ►Click Me!◄ em inglês
• Documentação oficial PHP echo — ►Click Me!◄ grande parte em português
• A Documentação do PHP também está no site da Polícia Civil de São Paulo, apesar de parecer estranho — ► Link '-' ◄

Conclusão
Agora sabemos que é  relativamente  fácil criar um sistema de cores aleatórias.
Agora, sejam bons revisores e comuniquem, nos comentários, qualquer erro. Seja ele de português, nos códigos, ou qualquer outro!
Dúvidas são bem-vindas!
--
Nos comentários, só não é permitido o que a lei não permite.
Autor: Héliton Martyns
Fale com o Autor: facebook.com/notileh