CSS no Lanche

Digo com convicção que as CSS(Folhas de estilo em cascata) foram a melhor invenção do homem(após a invenção do Pão fatiado). Com CSS você tem total controle sob a formatação do layout, e para muitos que não sabem, é possível até gerar conteúdo através de CSS, utilizando a propriedade content, juntamente com os pseudo-elementos :after e :before. Nesse tutorial, vamos fazer o uso da propriedade :before juntamente com a propriedade content para desenvolver um Faq com CSS.

HTML

Observem a seguinte marcação HTML:

<dl>
     <dt>What is Lorem Ipsum?</dt>
     <dd>Lorem Ipsum is simply dummy text of the printing and ...</dd>
</dl>

Faremos o uso aqui de Lista de definição, onde a tag dl é o elemento container, a tag dt será usada para a pergunta e a tag dd será utilizada para a resposta. Agora observem o CSS.

CSS

dl {
	border-left:1px solid #999;
	margin:0 auto 20px;
	padding-left:10px;
	width:500px;
}
dt, dd {font-size:1.2em; margin:0 0 10px}
dt:before {
	background-color:#f7f7ef;
	content:"Pergunta";
}
dd:before {
	background-color:#dbd4b7;
	content:"Resposta";
}
dt:before, dd:before {
	display:block;
	font-size:1.2em;
	font-style:italic;
	margin:0 0 10px;
	padding:5px 10px;
	width:150px;
}

Como podem ver, os textos Pergunta e Resposta são gerados através do CSS com a utilização da propriedade content, em conjunto com o pseudo elemento :before, que fará com que esse texto venha antes das minhas perguntas e respostas. A partir daí eu posso aplicar estilos a eles da forma que quiser, e como podem ver no tutorial, aplicai largura, cor, tipo de fonte, cor de background. Infelizmente os pseudo elementos :after e :before e a propriedade content não funcionam no Internet Explorer, mas com a utilização de JavaScript, você pode conseguir com que essas propriedades funcionem facilmente.

Nesse exemplo eu utilizei uma biblioteca JavaScript desenvolvida por Dean Edwards, que faz com que várias propriedades do CSS que não funcionam no IE passem a funcionar, prometo fazer um post sobre isso.

• Exemplo do Faq.
• Download dos arquivos de exemplo.

Tooltips são aquelas informações extras que aparecem ao colocar o ponteiro do mouse sob um link, ou imagem por exemplo, e você pode aplicar estilos a esses tooltips somente com CSS, sem a utilização de qualquer JavaScript. A técnica é muito simples, e consiste na seguinte marcação HTML:

<p>Fazer <a href="#" class="tooltip">Tooltips<span>Eu sou um tooltip feito com CSS</span></a> é muito fácil.</p>

Nesse exemplo criamos uma classe no CSS chamada tooltip e será apartir dela que iremos aplicar o nosso CSS:

a:hover {background:#ffffff; text-decoration:none;} /* background-color e necessario para o IE6 */
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Essa técnica é muito simples, colocamos o texto do tooltip dentro de uma tag, que no exemplo foi utilizada a tag span, e definimos primeiramente display:none para ela, pois ela só aparecerá quando o usuário colocar o mouse sob o link. Vejam o exemplo.

Criar gráficos de barra não exige conhecimento afinado em PHP, JavaScript ou XML. Você pode simplesmente implementar uma solução simples com HTML e CSS. Com uma simples técnica, você pode montar uma tabela que ilustra todos os dados em formato de barras.

HTML

Nosso HTML se resume ao seguinte:

<div id="graphbox">
    <h2>JavaScript Frameworks</h2>
    <div class="graph"><strong class="orangebar" style="width: 55%;">Prototype: 55%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 90%;">jQuery: 90%</strong></div>
    <div class="graph"><strong class="bluebar" style="width: 75%;">Script.aculo.us: 75%</strong></div>
    <div class="graph"><strong class="orangebar" style="width: 33%;">Dojo: 33%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 98%;">Mootools: 98%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 85%;">Mochikit: 85%</strong></div>
</div>

Continuar lendo »

Trabalhar com o desenvolvimento de CSS para sites grandes, exige paciência, experiência e um pouco de cuidado, pois se o desenvolvedor não prestar atenção no que ele está fazendo, ele e quem mais estiver envolvido no projeto vai ficar totalmente perdido em um milhão de propridades CSS. Trabalhar com CSS exige organização, e em grandes projetos isso é item obrigatótio, não que em projetos pequenos isso também não seja, mas tornando seu CSS Modular, você irá trabalhar de uma forma transparente e livre de problemas.

Os sites basicamente são desenvolvidos em pequenos blocos de código, tornar o CSS modular seria desenvolver um CSS para cada seção desse bloco, para que em alterações ou atualizações futuras não hajam problemas. Mas não basta fazer isso sem planejamento, pois senão você acabaria criando arquivos CSS desnecessários simplesmente para formatar uma ou duas propriedades do código. Coisas desse tipo exigem treino e muito estudo, a partir do momento que você começa a desenvolver CSS dessa forma, ele se torna reutilizável, e aprender a utilizar herança no CSS é uma coisa que todo desenvolvedor deveria aprender.

Se ficou interessado sobre escrever código reutilizável, dê uma olhada no Slide abaixo:

| View | Upload your own

Abaixo um Slide sobre a utilização de CSS Modular:

| View | Upload your own