Ruanceli - WebDeveloper

Pixel Perfect é um plugin para Firebug, que permite a sobreposição de uma elemento em qualquer HTML desenvolvido. Dessa forma você pode ver facilmente as diferenças entre o layout desenvolvido e o html final em pixels.

Você pode utilizar a opacidade do overlay para ver melhor ou desativar totalmente o desenho abaixo. Para dar um exemplo, você pode colocar um menu novo sobre um antigo para ver se cabe ou não.

Link para o Plugin Pixel Perfect

O Google Font Directory permite que você navegue por fontes disponíveis através da API do Google Font.
Todas as fontes no diretório estão disponíveis para uso em seu site sob uma licença open source e publicadas nos servidores do Google. Você pode usá-las em qualquer projeto, não comercial ou comercial.

Você não precisa fazer nenhuma programação, tudo que você precisa fazer é adicionar um link especial de estilo ao seu documento HTML, e em seguida, fazer referência a fonte no seu CSS. A API do Google Font é compatível com o Google Chrome 4.249.4 +, Firefox 3.5 +, Safari 3.1 + 6 + Andie.
No entanto, o Google Font API não é suportado no iPhone, IPAD, iPod, ou Android.

Link do Projeto: http://code.google.com/webfonts

WebDesignerWall um dos melhores sites sobre desenvolvimento web, recentemente publicou este tutorial de como decorar imagens e galeria de imagens sem a necessidade de editar os arquivos.

A dica é bastante simples, basta você inserir uma tag extra <span> e aplicar um background na imagem para criar o efeito de sobreposição.

CSS para Lista de Perguntas e Respostas, excelente para montar FAQs com estilo

CSS:

#preguntas {width: 450px;margin: 15px auto;}
dl {margin: 20px;border-left: 1px solid #999;padding-left: 10px;}
dt {font-size: 2.0em;margin-bottom: 10px;}
dt span {font-style: italic;font-size: 1.3em;}
dd {font-size: 1.4em;margin-left: 20px;margin-bottom: 10px;}

Estrutura HTML:

Pregunta 2:
Por que las personas aprietan el control remoto con mas fuerza, cuando se esta quedando sin pilas?

Esta es unan pregunta un poco comica, pero admitan que todos terminamos haceindo lo mismo.

Via: Xyberneticos

CSS Tricks um excelente web site de dicas e tutorias sobre css, publicou recentemente um tutorial, em que mostra como criar um topo com o estilo do digg, inclusive com as funcionalidades.
Visualize o Demo ou Download do Arquivo

Caixa de mensagem são elementos úteis par mostra mensagem de status antes ou durante um requisição especifica do usuário.
Então por isso Antonio Lupetti reuniu uma coleção de alguns exemplos simples de estilos em css.

Alguns Exemplos:

Dica de Caixa de Mensagem

.caixa-mensagem{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

Caixa com Icone

.caixa-icone{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

Caixa Solida

.caixa-solida{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

Caixa de Mensagem Arredondada

 .caixa-aredonda{
background:#444444 url(img/canto-esquerdo.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.caixa-aredonda div{
background:url(img/canto-direito.png) right bottom no-repeat;
padding:4px;
}

Caixa de Dica

.caixa-dica{
background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;
}
.caixa-dica div{
background:url(img/caixa-dica.png) left bottom no-repeat;
padding-top:4px;
height:18px;
}

Fonte:Woork

É inúmera a quantidade de ferramentas que surgem para facilitar o desenvolvimento web, sejam elas para agilizar no design, na programação clientside ou até mesmo na do lado do servidor.

IzzyMenu é a sensação do momento, para quem é responsável pela programação clientside, está é uma ferramenta que promete agilizar o desenvolvimento de menus, como o nome já diz: é o jeito fácil de criar menus profissionais em CSS de forma easy(Izzy).

Esta ferramenta online permite que você crie seu menu com drop down, sem precisar escrever uma única linha de código. E o mais importante de forma gratuita.

Há muitos estilos diferentes de menu para você escolher e principalmente customizar, você pode editar praticamente tudo: fonte, background,bordas,padding,margin,link,estado de hover e etc. Após tudo você pode descarregar o menu e integra-lo ao seu site.

Via: WebAppers

MoreCSS é um script que expande as propriedade do CSS para facilitar agregar as características e efeitos que ou não tem um atributo especifico o não são aceitas por todos os navegadores.
Por exemplo, com este script é possível criar tabelas ou lista com o famoso estilo “Zebra”, abrir links em uma janela externa na forma de pop-up, agregar conteúdo antes e depois de um elemento entre outras coisas. No total são cerca de 20 funções diferentes.

Para utilizá-lo é necessário adicionar a chamada ao Script:

E depois adicionamos os novos atributos as classes que queremos aplicar o efeito.
Por exemplo, para abrir links em um nova janela, definimos no css:

.blogroll a:active {
target: popup;
target-width: 800px;
target-height: 600px;
}
      

Que terá como resultado que todos os links dentro da classe "blogroll" se abram em uma nova janela com tamanho 800*600px.

Na página de MoreCSS podemos ver todos os atributos, sua forma de uso e exemplos, assim como descarregar a última versão do script

Via: blogandweb.com

Centralizar Verticalmente com Line-height
Quando você tem um container com altura fixa, você pode utilizar a propriedade line-heigh para centralizar verticalmente o conte

line-height:24px;

Prevenir Conteúdo Distorcido com larguras fixa.
Quando você inseri um conteúdo maior que a largura fixada em um container, ele quebra o layout. Para evitar isso, você oculta parte do conteúdo, mas permite que a estrutura do seu layout permaneça intacta.

#main{overflow:hidden;}

Prevenir Quebra de Linhas em Links
Essa pequena dica irá prevenir quebra de linhas em seus links.Recomenda-se o uso dessa técnica em textos longos para evitar que links se quebrem em 2 linhas;

a{white-space:nowrap;}

Centralizando elementos de bloco horizontalmente
Para todos navegadores modernos esta linha de css é suficiente para centralizar um bloco horizontalmente

margin:0 auto;

Removendo Scrollbar Vertical de Textarea no IE
Textarea no IE tem a scrollbar vertical visível por padrão. Se você quiser remover utilize essa linha de código

textarea{overflow:auto;}

Força Quebra de Linhas em Documentos Impressos
Com esta linha de código você controla espaços quando você quer suas paginas impressas.

h2{page-break-before:always;}

Fonte:CSS Globe