RuanWeb

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:

1
2
3
4
5

#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:

1
2
3
4
5
6
7
8
9

 <div id="preguntas"> 
<dl> 
<dt>
<span>Pregunta 2:</span>
Por que las personas aprietan el control remoto con mas fuerza, cuando se esta quedando sin pilas?
</dt> 
<dd>Esta es unan pregunta un poco comica, pero admitan que todos terminamos haceindo lo mismo.</dd> 
</dl> 
</div>

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:

<div class="caixa-mensagem">Dica de Caixa de Mensagem</div>

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

<div class="caixa-icone">Caixa com Icone</div>

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

<div class="caixa-solida">Caixa Solida</div>

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

<div class="caixa-aredonda"><div>Caixa de Mensagem Arredondada</div></div>

 .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;
}

<div class="caixa-dica">Caixa de Dica<div></div></div>

.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