Tooltips com CSS

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.

Referência HTML/XHTML, CSS e JavaScript no Firefox

O Firefox é um browser amplamente usado devido as facilidades que ele proporciona aos desenvolvedores, usuários, onde com a utilização de extensões você pode levar um nível acima o desenvolvimento web, a navegação, a experiência na Internet. Recentemente descobri mais uma extensão que pode ajudar muito nós desenvolvedores, se chama DevBoi, onde você tem a possibilidade de ler as referências sobre: HTML/XHTML, CSS, JavaScript e DOM nativos no plugin, e ainda você possui a opção de instalar mais helps como: PHP, Ptototype, Ruby on Rails e XUL.

Para ter acesso a referência basta ter o plugin instalado e apertar as teclas “CTRL + F9″, é aberta uma espécie de Sidebar em seu browser, a partir daí é só procurar o que deseja. Dica do WebResourcesDepot.

Gráficos de barra com CSS

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

CSS Modular

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:

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

Quotes com CSS

Nesse tutorial você irá aprender a mostrar quotes, ou seja, aquelas aspas em blocos de citação utilizando a tag blockquote e um simples truque de css. Vamos ao nosso HTML:

	<blockquote>Lorem Ipsum is simply dummy text of the printing...</blockquote>

Agora vamos dar algum estilo a esse blockquote:

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

No CSS definimos para que a nossa imagem close-quote.gif, independente do conteúdo, fique sempre alinhada a direita e abaixo no bloquote. Padding-left:18px e Text-indent:-18px foram utilizados para deixar espaço para que as imagens de quote apareçam e o texto não interfira. Agora para que possamos colocar a imagem de abertura do quote, vamos utilizar o pseudo-elemento :first-letter, onde iremos aplicar estilos a primeira letra de nosso texto:

blockquote:first-letter {
  background: url(open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Vejam agora o nosso exemplo em funcionamento.