CSS dinâmico com PHP

O CSS não permite comandos de decisão do tipo IF, WHILE ou SWITCH, por exemplo. O mais próximo disso são as Media Queries. Neste post veja CSS dinâmico com PHP.

Essa limitação é até compreensível, afinal o CSS é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação. Existem outras linguagens muito mais competentes para isso, como C#, PHP, Java e por aí vai.

Há algumas semanas eu senti a necessidade de automatizar algumas coisas no meu site. Uma delas é a textura de fundo do topo e do menu horizontal.

O CSS sozinho é incapaz disso, mas com o auxílio do PHP é possível sim “automatizar” o CSS de modo a fazer com que as texturas mudem conforme o dia da semana.

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;
	}

Cabeçalhos em CSS

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