Utilizando o PHP para criar variáveis no CSS
Fala galera,
Achei uma forma bem útil de criar variável em CSS utilizando o PHP para isso, pode não ser a melhor solução já que se pode utilizar o LESS para isso, mas para alguém que já programa com PHP fica muito mais fácil de fazer, fora que não precisa ficar dando build toda vez antes de usar, mas vamos ao exemplo.
Primeiro criamos a página a index.php
E depois como referenciado pelo HTML o arquivo style.php, que é o arquivo que ficará no lugar do style.css
O exemplo acima ele muda toda a aparência da table dependendo do domínio da página, mas também pode ser utilizada para diversos fins, como sites que tenham várias áreas como jornais, que tem a coluna de esportes, outra de noticias e anúncios, poderíamos utilizar uma variável de cor base para fazer um tema para cada seção.
O exemplo também está no meu GitHub do Blog
Retirei essa ideia do post do Chris Coyier no css-tricks
É isso ai pessoal, qualquer coisa comenta ai ;)
Achei uma forma bem útil de criar variável em CSS utilizando o PHP para isso, pode não ser a melhor solução já que se pode utilizar o LESS para isso, mas para alguém que já programa com PHP fica muito mais fácil de fazer, fora que não precisa ficar dando build toda vez antes de usar, mas vamos ao exemplo.
Primeiro criamos a página a index.php
<!DOCTYPE HTML>
<html lang='pt-br'>
<head>
<title>Variavél em CSS utilizando PHP</title>
<meta name="description" content="Teste utilizando o PHP para criar váriaveis no CSS">
<meta name="keywords" content="CSS,PHP">
<meta name="author" content="André Betiolo">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel='stylesheet' type='text/css' href='style.php'/>
<style type="text/css"></style>
</head>
<body>
<table>
<caption>Teste utilizando o PHP para criar váriaveis no CSS</caption>
<thead>
<th>Nome</th>
<th>Valor</th>
</thead>
<tbody>
<tr>
<td>André</td>
<td>10</td>
</tr>
<tr>
<td>Maria</td>
<td>9</td>
</tr>
<tr>
<td>João</td>
<td>8</td>
</tr>
</tbody>
</table>
</body>
</html>
E depois como referenciado pelo HTML o arquivo style.php, que é o arquivo que ficará no lugar do style.css
<?php
//Header dizendo que é CSS
header("Content-type: text/css; charset: UTF-8");
//Diferenciando as cores da aplicação por dominio
$dominio= $_SERVER['HTTP_HOST'];
//Quando for localhost faço algo
if ($dominio == "localhost") {
$corBackgroundTable = "#ECECEC";
$corBackgroundThead = "#BDD7FF";
$corDasLetras= "#000";
}else{
//Quando for produção faço outra coisa
$corBackgroundTable = "#FA858A";
$corBackgroundThead = "#BDD7FF";
$corDasLetras= "#666";
}
?>
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
table{
margin-left:25%;
width: 50%;
-webkit-box-shadow: 0 1px 2px #888;
box-shadow: 0 1px 2px #888;
border-radius: .3em;
background: <?php echo $corBackgroundTable?>;
color: <?php echo $corDasLetras?>;
}
thead{
background: <?php echo $corBackgroundThead?>;
}
O exemplo acima ele muda toda a aparência da table dependendo do domínio da página, mas também pode ser utilizada para diversos fins, como sites que tenham várias áreas como jornais, que tem a coluna de esportes, outra de noticias e anúncios, poderíamos utilizar uma variável de cor base para fazer um tema para cada seção.
O exemplo também está no meu GitHub do Blog
Retirei essa ideia do post do Chris Coyier no css-tricks
É isso ai pessoal, qualquer coisa comenta ai ;)
Bacana sua iniciativa, preciso voltar a mexe com PHP pois foi a linguagem q mais me interessei e acabei deixando de lado.
ResponderExcluirEdilson
A ideia é justamente essa, quando acho bacana algo, posto para que outras pessoas também caso tenham uma necessidade parecida vejam como da de ser feito.
Excluir