O objetivo do artigo publicado no site jankoatwarpspeed.com é lhe orientar sobre como criar um formulário de contato utilizando background ou imagem de fundo em todos os campos. Veja como fica o resultado final. Neste exemplo o formulário lembra um cartão postal feito de papel.

Usando sua criatividade é possível colocar qualquer tipo de imagem pano de fundo. O modelo utiliza html e CSS e o exemplo pronto está sendo oferecido gratuitamente para download no final do artigo.

Tenho certeza que esse vai para o seu favoritos. Se você procura fazer uma tabela bonitinha em sua página ( tablelessmaníacos, estou falando de tabela mesmo hein ) agora isso não será mais problema.

Apresento a vocês 98 estilos diferentes de construção de tabelas, de diferentes cores e tipos. Basta clicar, visualizar e pegar o código. Simples, não?

Para visualizar os 98 estilos, clique aqui.

Neste artigo publicado em woork.blogspot.com (tradução) você encontrará os códigos HTML e CSS para criar um formulário sem uso de qualquer tabela. Tem muita gente não gosta de usar tabelas em seus sites. O fato é que criar formulários em tabelas html é bem mais rápido e prático. Mas a forma rápida de fazer as coisas na maioria não é a melhor forma. Para quem não gosta de perder tempo e prefere o CSS estas dicas são perfeitas.

O site 3point7designs.com publicou um artigo com 10 belos exemplos de estilos de fonte e espaçamentos para colocar no seu site. Os códigos de cada CSS estão a sua disposição juntamente com um exemplo. Quase todos os estilos tipográficos utilizam fontes comuns a todos os computadores como o Verdana, Lucida Grande, Helvetica, Arial, Georgia, etc.

Os espaçamentos das fontes é que vão dar um toque de elegancia a cada estilo.

Quer fazer aquelas bordinhas arredondadas, dando uma diferenciada naquela caixinha de destaque, utilizando CSS? Então conheça essa solução bem simples, o Spiffy Corners, que dá o CSS prontinho pra você fazer suas bordas arredondadas.

Clique aqui para testar.

O site www.13styles.com oferece 13 estilos de menu desenvolvidos em html e css para download gratuitamente.

Quando você trabalha com CSS pode utilizar dois tipos de unidade de medida: Unidade relativa e Unidade absoluta. As unidades relativas são medidas através de percentagem (%), pixel (px), ex e em. As unidades absolutas são os point (pt), pica (pc), milímetro (mm), centímetro (cm) e polegada (in)

Os valores das unidades relativas “em” é tomado em relação ao tamanho da fonte (’font-size’) herdada. Já o px é tomado em relação ao equipamento que estamos usando na exibição (monitor de diversos tamanhos, celular, palm, etc)

O javascript do site riddle.pl/emcalc/ pode lhe ajudar a transformar pixels em unidade “em”. Clique primeiro na aba chamada “setings” para definir o tamanho default da fonte e clique em salvar. Depois utilize o script para converter pixels em “em”.

A ferramenta on-line oferecida no site www.designerplaything.co.uk/designer-plaything.html permite construir seu estilo CSS visualmente. Você vai fazendo as configurações e mudanças nos menus laterais e visualizando o resultado em tempo real. O código CSS é construido automaticamente no final da página. O desenvolvedor do serviço ainda permite que você faça o download do script aqui

Se você quer limpar o seu CSS e formatá-lo bonitinho mas não tá afim de pegar no rodo e no balde com água e sabão, essa é uma boa dica. Você coloca o CSS de um lado e ele sai do outro bem mais limpinho e arrumado.

Quer fazer o teste? Então clique aqui.

Uma dica bacana, vai que você está procurando por menu em CSS no formato aba, topei com este site que possui 11 diferentes menus bonitinhos no formato de aba em diferentes cores. Pode interessar a você.

Veja, clicando aqui. E faça o download deles aqui.

Você sabia que as cores html possui nomes? É sim, cada cor hexadecimal tem seu nome e que funciona em qualquer navegador. Por exemplo, ao invés de você colocar color: #00FA9A coloque color: MediumSpringGreen que vai dar no mesmo. Para você saber todos os nomes e decorá-los assim como você decorou toda a tabuada, clique aqui e veja toda a lista.

PORÉM, se você quiser que seu site seja validado pelo W3C, seguindo os padrões, saiba que apenas as cores a seguir são validadas utilizando seus nomes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.

Neste artigo publicado no site css-tricks.com você aprenderá a criar um efeito de fade-in em textos do seu site. Neste exemplo você poderá ver duas palavras “Reveal Spoiler >>” com fundo vermelho. Clique sobre elas para ver o texto aparecendo lentamente. Usando um pouco de criatividade este recurso pode ser útil para destacar algumas informações do seu site. No artigo você encontrará um link chamado Download Files onde poderá baixar um arquivo zip com html, css os javascripts utilizados no exemplo.

O site cssglobe publicou um artigo com 4 técnicas CSS para criar links de texto, links em imagens e links através de botões com efeito 3D. O resultado do botão é uma bonita figura de botão projetado na página que com o passar do mouse se move para baixo. Veja o exemplo. Outro CSS interessante é o que lhe permite adicionar miniaturas de imagens no site que são ampliadas automaticamente quando o visitante passa o mouse sobre elas. Veja o exemplo. O site fornece a dica completa do código CSS que você deve utilizar e um arquivo para download com todos os exemplos.

Você sempre quis saber como colocar uma sombra numa imagem, utilizando apenas CSS? Saiba através do Dinamic Drive, que já foi inclusive indicado aqui no Avante,

Na realidade você pode colocar sombras não só em imagens mas em caixinhas também. Para saber como fazer essa proeza, basta clicar aqui.

Neste artigo publicado pelo site webdesignerwall você aprenderá como adicionar degradê em textos utilizando CSS. Isto vai lhe poupar de criar imagens com textos para títulos de suas páginas. O estilo de fontes com degradê que dão a impressão de que são feitas de material metálico está na “moda”. Existem algumas vantagens em utilizar textos no lugar de imagens:

1) É mais fácil atualizar um texto do que uma imagem.

2) O Google e outros sites de busca não reconhecem textos dentro de imagens.

3) Seu site fica mais leve. É menos um imagem para carregar.

4) Perfeito para sites dinâmicos criados em PHP e outras linguagens.

Veja uma demonstração. Para download. Veja a versão original e a traduzida.

Este tutorial do site css-tricks.com ensina como criar uma marca do lado dos links que foram clicados e visitados pelos usuários do seu site. Ele utiliza apenas CSS para adicionar o pequeno símbolo do lado do link. Veja a versão traduzida para o português pelo Google.

O site xhtml-css.com oferece uma ferramenta on-line grátis que verifica os códigos XHTML e CSS do seu site. Ele mostra um relatório completo com todos os erros encontrados. Clicando em cada erro você pode visualizar detalhes do mesmo e como fazer a correção.

Na hora de visualizar informações em forma de gráfico muitos desenvolvedores partem para soluções feitas em flash ou utilizando linguagens de programação que geram gráficos consumindo muitos recursos do servidor. Uma forma leve e rápida de criar gráficos online é utilizando CSS.

Uma solução grátis para download oferecida pelos site cssglobe.com/post/1272/pure-css-data-chart para criar gráficos utilizando apenas CSS. Você pode acessar um demo aqui.