CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - CSS dinâmico com PHP

Por Benedito Silva Júnior - publicado em 11/07/2016


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.

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


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo