CSS dinâmico com PHP

Usar CSS dinâmico com PHP permite que estilos se adaptem ao conteúdo ou às preferências do usuário de forma automática. Com PHP, é possível gerar CSS com base em variáveis, condições e interações, o que torna o design mais flexível e dinâmico.

Exemplo básico de CSS dinâmico com PHP

Para começar, crie um arquivo PHP que envia cabeçalhos para que o navegador o interprete como CSS. Em seguida, você pode utilizar variáveis e lógica condicional para personalizar o estilo.

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

$backgroundColor = "#f4f4f4";
$fontSize = "16px";
$padding = "10px";
?>

body {
    background-color: <?= $backgroundColor ?>;
    font-size: <?= $fontSize ?>;
    padding: <?= $padding ?>;
}

Passo a passo

1. Configuração de cabeçalhos: Use header("Content-type: text/css"); para que o navegador interprete o arquivo como CSS.
   
   
2. Variáveis dinâmicas: Declare variáveis PHP que controlam propriedades CSS, como cores, fontes e espaçamentos.
   
   
3. Condições e lógica: Personalize o CSS com base em parâmetros, permitindo alterações automáticas para temas escuros/claro, por exemplo.

Uso na página HTML

Para aplicar o estilo dinâmico, inclua o arquivo PHP como se fosse um CSS padrão:

<link rel="stylesheet" href="estilos_dinamicos.php">

Esse método é poderoso para sistemas que precisam adaptar a interface de acordo com as configurações de usuário ou dados específicos.

Outro exemplo prático

Antes de qualquer coisa é preciso renomear o aquivo .css para .php, inclusive na linha de instrução onde o arquivo é chamado. Veja:

<link rel="stylesheet" type = "text/css" href="layout.php" />

Após isso editamos o arquivo renomeado, neste caso o layout.php, e acrescentamos algumas instruções PHP antes das instruções em CSS:

        <?php

	// Define que o arquivo terá a codificação de saída no formato CSS
	header("Content-type: text/css");

	// Array com os dias da semana
	$diasemana = array('domingo', 'segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado');

	// Aqui usamos a data atual ou qualquer outra data no formato Y-M-D (2016-05-19)
	$data = date('Y-m-d');

	// Variável que recebe o dia da semana (0 = domingo, 1 = segunda, 2 = terca ...)
	$diasemana_numero = date('w', strtotime($data));

	//muda cor de fundo do topo e do menu de acordo com o dia sa semana 
	switch($diasemana[$diasemana_numero]) {
	case "domingo":
		$imagem_fundo_topo =  "url(fundo_topo-violeta.png)";
		$imagem_fundo_menu =  "url(fundo_menu-violeta.png)";
		break;
	case "segunda":
		$imagem_fundo_topo =  "url(fundo_topo-vermelha.png)";
		$imagem_fundo_menu =  "url(fundo_menu-vermelha.png)";
		break;	   
	case "terca":
		$imagem_fundo_topo =  "url(fundo_topo-laranja.png)";
		$imagem_fundo_menu =  "url(fundo_menu-laranja.png)";
		break;	   
	case "quarta":
		$imagem_fundo_topo =  "url(fundo_topo-amarela.png)";
		$imagem_fundo_menu =  "url(fundo_menu-amarela.png)";
		break;	
	case "quinta":
		$imagem_fundo_topo =  "url(fundo_topo-verde.png)";
		$imagem_fundo_menu =  "url(fundo_menu-verde.png)";
		break;
	case "sexta":
		$imagem_fundo_topo =  "url(fundo_topo-azul.png)";
		$imagem_fundo_menu =  "url(fundo_menu-azul.png)";
		break;
	case "sabado":
		$imagem_fundo_topo =  "url(fundo_topo-indigo.png)";
		$imagem_fundo_menu =  "url(fundo_menu-indigo.png)";
		break;
	default:
		$imagem_fundo_topo =  "url(fundo_topo-cinza.png)";
		$imagem_fundo_menu =  "url(fundo_menu-cinza.png)";
	}
	?>

	#topo 
	{
		width:400px; 
		height:110px; 
		background-image: <?php echo $imagem_fundo_topo; ?>; // atribui variável aqui
		background-repeat:repeat-x; 
		padding-left:700px; 
		margin:0 auto; 
		text-align:center;
	} 
	#menu
	{
		width:400px; 
		height:33px; 
		background-image: <?php echo $imagem_fundo_menu; ?>; // atribui variável aqui
		background-repeat:repeat-x; 
		padding-left:700px; 
		margin:0 auto; 
		text-align:center;
	}

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: php css