segunda-feira, 18 de outubro de 2010

Text-shadow - colocando sombreado em textos

A propriedade text-shadow do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e parágrafos.

Essa propriedade requer quatro informações: deslocamento horizontal, deslocamento vertical, desfoque da sombra e cor do sombreado.

Exemplo: text-shadow: –4px 4px 3px #999999

O primeiro valor coloca o sombreado 4 pixels à esquerda do texto. O segundo valor, coloca o sombreado 4 pixel abaixo do texto. O valor de 3 px define o desfoque e #999999 se refere à cor do sombreado.

Vejam um exemplo no meu blog DB Templates. Notem que o título do post possui um sombreado em cinza escuro, contrastando com a cor original que é azul:

text-shadow

Podemos usar a propriedade text-shadow em diversos locais do template, especialmente em títulos. Para encontrar a área referente  ao título de cada elemento de página, procure no HTML do template por h1, h2, h3. Exemplos:

Código dos títulos da barra lateral (sidebar):

#sidebar1 h2,#sidebar2 h2,#sidebar3 h2,#sidebar4 h2 {

Código dos títulos dos posts:

.post h3 {

Código do título do rodapé:

#footer h2 {

Para colocar o sombreado, basta adicionar a popriedade text-shadow dentro do CSS do título que você deseja alterar. Vamos usar como exemplo, o título dos posts:

.post h3 { 
color:$postTitleColor;
font:$postTitleFont;
text-decoration:none;
text-shadow: –4px 4px 3px #999999
text-align:left;
line-height:1.4em;
border-bottom:2px solid $posttitleBorderColor;
margin:0 0 20px;
padding:0 0 2px;
}

É possível trabalhar com várias sombras; basta separar os valores com uma vírgula:

text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;

text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px -5px 4px #0F0

É importante escolher a cor base do título, para combinar com o sombreado:

.post h3 {  <—título dos posts-->
color:#ffffff; <—cor do título dos posts-->
font:$postTitleFont;
text-decoration:none;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;  <—text-shadow -->

Achou complicado? Experimente usar um gerador de código CSS!

Entre em http://css3generator.com/ e procure por text-shadow no menu. Depois, é só criar e ir visualizando o efeito sombreado ;)

css3-generator text-shadow-generator

Uma outra opção: http://www.westciv.com/tools/shadows/

Atenção! Como a maioria das propriedades do CSS 3, o text-shadow ainda não é compatível com o navegador Internet Explorer.

Postado por às Nenhum comentário:
Marcadores: ,

domingo, 17 de outubro de 2010

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll). Esse efeito, em HTML, se chama textarea.
A textarea é muito útil, já que economiza espaço dentro do post.
Como colocar uma caixa de texto com barra de rolagem
Para colocar uma caixinha com scroll em seus posts, entre no editor do Blogger, clique na aba editar HTML e use as tags <textarea></textarea> no texto que deverá ficar dentro da caixa. Nas imagens abaixo, coloquei um exemplo usando o antigo editor de posts do Blogger, mas o método funciona também no editor atualizado e no Windows Live Writer. (clique sobre as imagens para ampliá-las)
Na primeira imagem, vemos a aba “editar html” contendo as tags “textarea”; já na segunda, vemos a aba “escrever”, com a caixinha já pronta:
textarea caixa
Estilizando a caixa de texto com CSS
Como vocês podem notar, a caixinha não é lá muito bonita, mas um pouco de CSS podemos mudar completamente seu visual ;)
Entre no painel do Blogger, clique em design e depois em editar HTML. Usando o Ctrl+F do teclado, procure por ]]></b:skin> dentro do HTML do template. Agora, cole o seguinte código logo acima dessa tag e salve.
/** textarea */
textarea {
border: 3px double #ccc;
background: #efefef;
width: 80%;
height: 100px;
}
Vamos para um exemplo prático? Abaixo, segue o código do Translator Widget:

Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:
/** textarea */
textarea {
border: 3px double #ccc; (espessura e cor da borda)background: #efefef; (plano de fundo da caixa)
width: 80%; (largura)
height: 100px; (altura)
}
Veja uma tabelas de cores neste link – Tabela de cores web e boa diversão.
Postado por às Nenhum comentário:
Marcadores: ,

Erros Bx ao tentar acessar o painel do Blogger

Há cerca de 1 semana, alguns usuários  não estão conseguindo fazer login e acessar o painel do Blogger. O erro que aparece é o bX-n2e48q.
O problema foi reportado no fórum oficial e a equipe do Blogger já está ciente e trabalhando para encontrar uma solução.
Erro Bx
Se você foi afetado por esse bug e deseja manter seu blog atualizado, use o Windows Live Writer para postar até que o problema seja corrigido.
Colabore com a equipe do Blogger, enviando o endereço dos blogs afetados:
Postado por às Nenhum comentário:
Marcadores:

segunda-feira, 11 de outubro de 2010

CSS - Tabela com bordas e linhas visíveis

A tabela é um recurso fantástico do HTML, já que possui a capacidade de nos dar muitas informações uando pouco espaço.
Antigamente – antes do CSS – a tabela HTML era usada até para criar o layout de um site. Hoje, o uso ficou mais restrito à exibições de ítens em forma de planilha.
A tabela em HTML puro, sem CSS, é muito, muito feia. Vejam:

célula 1 célula 2
<table border="2" cellspacing="4" cellpadding="2" width="559"><tbody>
    <tr>
      <td valign="top" width="270">célula 1</td>
      <td valign="top" width="273">célula 2</td>
    </tr>
  </tbody></table>
TABLE é a tabela toda, TR são as linhas,  TD são as colunas e célula é o conteúdo.
Aplicando um pouco de CSS, podemos transformar a tabela em algo muito mais bonito:table-cssObservem como os ítens ficaram super organizados e ocupando pouco espaço.
Abaixo temos uma tabela com bordas e linhas visíveis, que foi estilizada usando CSS
Título Título Título
item 1 item 1 item 1
item 2 item 2 item 2
Uma forma simples de “desenhar” a tabela do jeito que queremos, é usando um editor HTML. O meu preferido é o NVU Portable. (clique sobre as imagens para ampliá-las)
nvu-portable
Notem que no NVU eu posso inserir mais linhas, colunas e células com alguns cliques.
Também é possível colocar um plano de fundo nas células e na tabela e ainda dá para inserir links e formatar cores e fontes do texto da mesma forma que fazemos no editor de posts do Blogger e no Windows Live Writer.
Vamos brincar um pouquinho? Entre no NVU e acesse a aba “código-fonte”.
Cole o código abaixo e depois clique na aba “normal”.
<style type="text/css">
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid #ccc; padding-left: 5px;}
</style>
<table style="width: 550px;" class="bordasimples"
border="1" bordercolor="#cccccc"> <tbody><tr><td
style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
<td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
<td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
</tr><tr> <td>item 1</td>
<td>item 1</td>
<td>item 1</td>
</tr><tr> <td>item 2</td>
<td>item 2</td>
<td>item 2</td>
</tr></tbody></table>
A parte que coloquei em vermelho, corresponde ao CSS.
Clique com o botão direito do mouse sobre alguma célula e escolha “cor do plano de fundo” . Selecione então as cores de fundo tanto das células quanto da tabela.
nvu-table nvu-portable
Escreva os ítens dentro das células e formate o texto a seu gosto.
Para inserir um link, escreva o texto, passe o mouse sobre ele e clique no ícone “link”
Irá abrir uma nova janela. Digite o endereço do link no local indicado.link
Depois que estiver tudo pronto, clique em “código-fonte”, copie o código que está entre <body> e </body> e cole em “editar HTML” no editor de posts do Blogger.

nvu-code blogger-posts
Este método não funciona no Windows Live Writer e nem no antigo editor do Blogger.
Se você usa o WLW, cole o código abaixo no HTML do template, antes de </b:skin>
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid #ccc; padding-left: 5px;}
No NVU Portable, utilize o seguinte código para formatar sua tabela:
<table style="width: 550px;" class="bordasimples"
border="1" bordercolor="#cccccc"> <tbody><tr><td
style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
<td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
<td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td>
</tr><tr> <td>item 1</td>
<td>item 1</td>
<td>item 1</td>
</tr><tr> <td>item 2</td>
<td>item 2</td>
<td>item 2</td>
</tr></tbody></table>
Depois que a tabela estiver pronta, cole o código no “código-fonte” do Live Writer.
A princípio pode parecer um pouco confuso, mas nada que praticar não resolva ;)
Postado por às Nenhum comentário:
Marcadores:

Como retirar ou colocar sublinhado nos links

Muitas pessoas me perguntam o que fazer para retirar aquele sublinhado dos links, principalmente quando passamos o mouse sobre eles.
Os links de um blog ou site que usa CSS se dividem em:
  • a:  é o link em si
  • a:visited é o link que foi visitado
  • a:hover é o estado do link quando passamos o mouse sobre ele
  • a:active é o estado do link quando clicamos nele
links
Vamos para um exemplo prático, usando o código-fonte do Template Mínima:

a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
Para retirar o sublinhado dos links, basta mudar a palavra “underline” para “none”
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:none;
}
Agora, se você gosta do sublinhado, mas os links do seu blog estão sem underline, basta procurar a parte do template e fazer a mudança.
Como exemplo, vou pegar o código de um template meu e mudar os links da sidebar:
#sidebar1 a,#sidebar2 a,#sidebar3 a,#sidebar4 a {
color:#4c4c4c;
text-decoration:none;
}
#sidebar1 a:visited,#sidebar2 a:visited,#sidebar3 a:visited,#sidebar4 a:visited {
text-decoration:none;
color:#4c4c4c;
}
#sidebar1 a:hover,#sidebar2 a:hover,#sidebar3 a:hover,#sidebar4 a:hover {
text-decoration:underline;
color:#c33f00;
}
Para acessar estes códigos, entre no painel do Blogger> design>editar html.
Dica: use o Crtl+F do teclado para encontrar a parte que você está buscando.
Postado por às Nenhum comentário:
Marcadores: ,

Como voltar para o antigo Twitter

Não gostou do Novo Twitter e quer voltar a usar o velho e bom antigo Twitter?
É muito simples! Para deixar de usar o Novo Twitter, acesse a setinha que fica ao lado do seu nome (username) e de sua foto. Clique em leave preview e pronto!
voltar-velho-twitter
voltar-novo-twitter
Se você mudar de idéia e quiser voltar para o Novo Twitter, clique em try it now!
twitter-follow
Postado por às Nenhum comentário:
Marcadores:

quinta-feira, 7 de outubro de 2010

Sobre a série “Dicas Templates”

Há exatos 7 dias atrás, eu fiz os 3 primeiros posts da série “dicas templates”, onde eu pretendia explicar um pouco do que sei sobre personalização de templates:
Devido ao pouco interesse da parte de vocês, optei por não dar prosseguimento a essa série. Eu precisaria publicar, no mínimo, uns 10 ou 15 tutoriais que seriam ainda mais longos e trabalhosos do que eu já faço usualmente e não encontrei ânimo.
Peço desculpas ao 6 leitores que comentaram nos 3 posts inaugurais. Pra vocês, vou deixar uma série de links com sites e livros especializados no tema. Dos livros, eu fiz questão de folhear todos eles em minha última visita à uma livraria física.
Sites e blogs sobre HTML E CSS:
Livros sobre HTML e CSS (links para a Submarino)
Para quem optar pela compra de livros, eu recomendo começar pelo “CSS – O manual que faltava” e complementar com o “Desenvolvendo CSS na Web”.
Usem o Template Mínima para fazer testes e treinamentos com CSS. É pura diversão!
E pra quem não quer saber de nada disso, recomendo o DB-Produtos e Serviços.
Postado por às Nenhum comentário:
Marcadores:
Assinar: Postagens (Atom)