Cor Cinza

Estou criando um novo site que vai ter um painel administrativo. Painéis administrativos para usuários são um saco de fazer, por isso resolvi comprar um (na verdade eu ganhei um, mas digamos que eu comprei) lá no ThemeForest.net. O tema é muito bonito, mas quando eu comecei a mexer nele, descobri umas coisas meio estranhas.

As mensagens de alerta do tema possuiam a seguinte marcação:

<p class="alert"><span class="success"></span><span class="success_text">Success! Your item has successfully been added.</span></p>

Para produzir um resultado como este:

Até aí, visualmente, nada de demais. Mas olhando a marcação, existem algumas tags desnecessárias ali. O que é aquele “span” vazio com a classe “success” e por que o texto está dentro de um outro “span”? Pra responder a estas perguntinhas, basta uma olhadinha rápida nos estilos destes elementos:

p.alert {
	width: 652px;
	height: 39px;
	background: url("images/alert_bg.png") no-repeat;
}

.success {
	width: 24px;
	height: 24px;
	padding: 10px 0px 0px 15px;
	margin: 6px 0px 0px 15px;
	background: url("images/success.png") no-repeat;
	float: left;
}

.success_text {
	margin: 11px 0px 0px 5px;
	float: left;
	color: #73ae0b;
}

O resultado é bonito? Sim! Mas a lambança também é bem bonita! Como você pode ver o ícone que indica sucesso ou erro esta contido dentro do “span” vazio, e possui um float. Já o texto está num outro “span” que possui um outro float para ficar ao lado do ícone! Que bangunça, isso é realmente necessário? Eu creio que não!

Utilizar uma marcação destas é péssima pois não oferece nenhuma flexibilidade. A altura e a largura dos elementos estão definidas e qualquer texto que extrapole estas definições não ficará bem no elemento. Sentindo o cheiro de problema no ar, resolvi tentar consertar esta marcação e os estilos. Veja como ficou o html depois do tapinha:

<p class="alert success">Success! Your item has successfully been added.</p>

Uh! Bem mais simples não? Olha o resultado visual disso:

E como ficou o css? Dá só uma olhada aí:

p.alert {
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#EEEEEE;
	padding: 10px 10px 10px 40px;
}

.success {
	background: url('../../img/adm/success.png') no-repeat 8px;
	color: #73ae0b;
}

O que foi feito? Primeiro eu retirei as limitações de tamanho do elemento. Assim eles podem expandir e se reduzir de acordo com o conteúdo do elemento. Depois removi a imagem de background que dava as bordas arredondadas ao elemento. Existem muitas maneiras de se conseguir bordas arredondadas sem imagens no seu layout, mas a maioria é com javascript. A galera do blog Perishable Press criou um artigo recentemente mostrando como é possível conseguir bordas arredondadas apenas com css! E foi isso que eu fiz. Você pode dizer “Ah, mas isso não é suportado em todos os browsers, apenas nos mais recentes”, daí eu te respondo com este link AQUI! O importante é ter consciência das formas que este elemento vai tomar em browsers que não suportam estes comandos ainda.

Coloquei como cor de fundo a cor da imagem e defini alguns paddings. Depois ficou fácil, foi só colocar a imagem de background na classe “success” e posicioná-la a 8 pixels das bordas do elemento, definir uma cor para a fonte e pronto! Não ficou tudo mais lindo e flexivel e sem tags desnecessárias?

Com um pouco mais de raciocínio, a gente consegue fazer coisas muito boas com css, é só experimentar!

O próximo desafio será utilizar a técnica de “sliding doors” para os botões de submit, que também possuem um background fixo! Quando eu fizer isto, posto aqui como foi que fiz