Manutenção e Organização do Blog

Um pequeno aviso para falar que o blog voltará com um novo design e melhor organização, além de um novo conteúdo e novas parcerias.

Substituindo Imagens ou Cores Sólidas Por Gradientes CSS3


Hoje vou mostrar como substituir imagens ou cores sólidas por códigos em gradientes (degradê para outros), recurso usado aqui no blog. Com ele é possível salvar tempo fazendo algumas coisas que só seriam possíveis com imagem antigamente, além de deixar o blog mais leve para navegadores de celular e de outros sistemas
Para começar,entre no Gerador de gradientes em Css3 e defina as cores que você pretende usar, copie o código e siga estas instruções:

Bem, agora procure uma das seguintes sentenças:
  • Background-image: Esse código é usado para links de imagem geralmente Para substituir essa sentença selecione o código da imagem desde o começo e substitua pelo código do degradê selecionado no Gerador
  • Background: Esse código geralmente é usado para códigos de cores sólidas (Exemplo: #ffffff) e imagens também para substituir faça o mesmo do Background-image mostrado acima.
Este tutorial é original do Force Design Qualquer reprodução deve ter aviso prévio e referência de origem, dúvidas comente...

Imagem ao Lado de Títulos


Bom, vou fazer um tutorial baseado no do Dicas para Blogs de como por a imagem não só ao lado de um título de postagem, mas, de qualquer outro como o do próprio Cabeçalho do blog.

Para começar, aperte CTRL+F, procure tags como h1, h2 e h3 escrito ao lado por exemplo widget-title (Título das sidebars e extensões), post-title (título do Post), e por aí.

Quando achar uma dessas tags, elas estarão ás vezes com um código de cor assim por exemplo
background: #ffffff, ou, background-color: #ffffff


No lugar de um desses códigos coloque esse código:
background-image: url(link da sua imagem);
background-repeat: no-repeat;
background-position: left top;


Caso a imagem escolhida fique desalinhada ou meio bugada, você pode por no lugar do código acima, esse código:
background-image: url(link da sua imagem); padding: 0px 0px 0px 0px;
background-repeat: no-repeat;
background-position: left top;


No lugar dos zeros você coloca outros números para alinhar melhor a imagem, sendo que:



  1. O primeiro zero alinha para cima
  2. O segundo, para a direita
  3. O terceiro, para baixo 
  4. O quarto, para a esquerda
Dúvidas, comente.



Botão Editável - PNG e CSS3

Bom, eis aqui a primeira postagem do blog em sua nova fase, um botão editável em extensão PNG, editável apenas no Adobe Fireworks(clique na imagem para baixar):


O botão apresenta gradientes e estilos de Texto editáveis ao seu gosto

Extra:
Para os mais ligados ao design apenas em linguagem CSS3 aqui está um Arquivo com códigos de gradientes e um tutorial de instalação no blogger,os códigos tem a mesma características igual a imagem (clique na imagem para baixar):


Mantenha crédito á ambos os arquivos pois são conteúdos exclusivos do blog.

Nota: Force Design



Como perceberam o blog ficou parado por um bom tempo.
Agora o blog volta com um propósito diferente com postagens voltadas ao conteúdo de design, sem as postagens de antigamente devido a queda do Megaupload.
Voltaremos com as atividades em breve.

Compartilhe

Twitter Facebook Digg Stumbleupon Favorites