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;
}
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
Link do curso: https://go.hotmart.com/X68198266R
Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits