Já que o Natal está próximo, eu em conjunto com a Bookman Editora, iremos sortear um exemplar do livro Smashing CSS, sim, aquele famoso livro escrito por Eric Meyer, com a revisão técnica de Diego Eis.

Veja abaixo um breve resumo sobre o livro:

mashing CSS vai muito além do básico, mostrando desde a seleção das ferramentas corretas até os efeitos com CSS, as técnicas CSS3 com jQuery e o futuro com o uso de HTML5 e CSS3. Poucas pessoas na indústria podem mostrar as vantagens e desvantagens da CSS como Eric Meyer, e neste livro o autor fornece técnicas perfeitas, totalmente úteis e universalmente aplicáveis no mundo real.

Fiel à missão do Smashing Magazine (smashingmagazine.com), um dos sites de Web design mais populares do mundo, Smashing CSS é o guia prático para a construção de layouts modernos na Web.

O que você precisa fazer para participar? Basta deixar um comentário nesse post utilizando um e-mail válido, para caso você seja o vencedor eu possa entrar em contato. O formulário de comentários ficará aberto por uma semana a contar da data de publicação desse post. O sorteio será efetuado utilizando o Random.org.

Mas não fique triste, se você não for o feliz ganhador, você ainda pode comprar o livro com 20% de desconto utilizando o seguinte código: pinceladasdaweb. Mas atenção, a validade desse código é somente um mês. Boa sorte a todos os participantes.

O ganhador foi o Marcelo Oliveira.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• CSS Cookbook
• CSS3 Gradients & HTML5 Databases
• Seletores CSS com jQuery
• Peppy – Seletor JavaScript CSS3 mais rápido da Web
• CSS3 – Seletor :not()

Nesse tutorial vou ensinar aqui a criar um botão customizado para compartilhar o que você quiser no Facebook. Sua função é bem parecida com a do botão Send, com a diferença que o Send não é customizável.

Antes de tudo, você deve ter uma conta de desenvolvedor no Facebook, pois será necessário criar uma APP. Basta ir então ao Facebook Developers, clicar em Aplicativos, e tentar criar uma nova APP, caso sua conta não seja de desenvolvedor, ele lhe dará um aviso de verificação de conta, basta seguir os passos e pronto, sua conta a partir de agora é de desenvolvedor.

Estando tudo ok, vamos criar a APP para o nosso botão customizado. Em aplicativos clique em Create New App. Será abeeto um modal semelhante ao abaixo, basta preencher com o nome da sua APP e concordar com os termos do Facebook:

Se tudo ocorreu bem, sua APP foi criada, e agora vamos preencher algumas informações na APP, como na imagem abaixo:

Em Informações básicas > App Domain, coloque o domínio do site onde o botão deverá funcionar, sem o http e www. Mas atenção, esse deve ser o domínio de onde você quer que o botão funcione, se você testar o botão fora desse domínio, ele não funionará.

Logo abaixo, na seção Website, coloque novamente o domínio, agora você pode colocar o http e o www, como mostrados na imagem. Pronto, sua APP já está ok, bastando só salvar as alterações.

Vamos agora criar um arquivo HTML para testar o botão, e após basta adicionar esse código JavaScript a sua página, pode ser dentro do body mesmo:

<script type="text/javascript">
(function() {
	var e = document.createElement('script');
	e.src = document.location.protocol + '//connect.facebook.net/pt_BR/all.js';
	e.async = true;
	document.getElementById('fb-root').appendChild(e);
}());

window.fbAsyncInit = function () {
	FB.init({
		appId  : 'YOUR APP ID',
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true,  // parse XFBML
		oauth  : true // enable OAuth 2.0
	});
};
</script>

Atente-se a colocar o ID da sua aplicação onde está marcado ‘YOUR APP ID’, ele fica localizado no topo da sua aplicação. Vamos agora criar a função que irá abrir o pop-up para compartilhar o conteúdo. No meu HTML eu adicionei um botão que ao ser clicado ele abre o pop-up:

<a id="share-button" href="#" title="Facebook Share Button"><img src="facebook-share-button.jpg" alt="Facebook Share Button" title="Facebook Share Button" /></a>

Basta então agora, o JavaScript:

var el = document.getElementById('share-button');

el.onclick = function (e) {
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
}

Como podem ver, utilizei JavaScript puro para fazer o click no botão, mas você pode fazer o mesmo com jQuery, basta utilizar o seguinte código:

$('#share-button').click(function (e){
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
});

Vamos a explicação do significado de cada campo:

• method: O nome do método, configure como feed para abrir a caixa de diálogo para divulgar conteúdo.
• name: Texto da primeira linha da nossa caixa de diálogo. Pode conter no máximo 99 caracteres.
• link: A URL que deseja compartilhar.
• picture: A URL da imagem que deseja mostrar com a mensagem no seu perfil. Recomenda-se utlizar uma imagem com 90×90 pixels.
• caption: A legenda do link. Máximo de 100 caracteres.
• description: A descrição do link. Máximo de 270 caracteres.

Agora, ao clicar no botão, será aberta uma caixa de diálogo semelhante a essa:

Vocês podem testar a funcionalidade do botão nesse exemplo que criei. E não se esqueçam de dar uma passada no meu perfil no Facebook.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Hot Shop SLA – 20 anos de história
• Como criar Fan Page no Facebook
• Como criar páginas no Facebook

Responsive Design é um conceito que visa apresentar a informação de forma confortável e acessível para qualquer dispositivo, ou seja, você pode acessar um site no PC e o mesmo no iPhone, por exemplo, onde a marcação HTML continua a mesma, mas através do CSS são feitas adaptações no layout que tornam sua navegação confortável. No momento não vou entrar muito em detalhes sobre esse assunto, só queria deixar aqui o conceito para aqueles que desconhecem essa técnica.

O intuito desse post é mostrar o conceito de Responsive Design aplicado a Slideshows, como você pode ver nos mesmos listados abaixo:

Blueberry

Plug-in para jQuery experimental voltado para layouts fluidos.

FlexSlider

Slideshow com opções de fade e slide, além de suporte a touch gestures.

PhotoSwipe

Slideshow criado visando especificamente os dispositivos móveis.

Slides

Mais um plugin para jQuery com recursos de looping e reprodução automática.

Responsive jQuery slideshow

Um simples slideshow desenvolvido com jQuery para demonstrar o poder do Responsive Design

Responsive Carousel

Plugin de carousel voltado para Responsive Layouts.

Elastislide

Plugin de carousel voltado para Responsive Layouts com suporte a Touche gestures.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Colunas com alturas iguais com JavaScript
• Ebook grátis de JankoAtWarpSpeed: Os melhores tutoriais
• Seletores CSS com jQuery
• Carregar botão do Google+ via Ajax
• Carregar botão Like do Facebook via Ajax

Segunda etapa de tutoriais para Facebook, o primeiro Como criar páginas no Facebook, e agora vamos focar em como criar Abas dentro do seu site, muito utiliizado para ações de uma marca, por ter contato direto com o público e devido sua facilidade em compartilhar esta notícia, este meio é muito utilizado.

Anteriormente para você criar uma aba você utilizava uma app chamada FBML, porém esta ferramenta foi descontinuada, hoje em dia para se criar uma aba utilizando iframe, você precisa basicamente criar uma app própria para o Facebook .

Com este acontecimento tivemos certos limites para se trabalhar dentro da Fan Page, o seu limite é de 520px de largura por 800px de altura. Este é o padrão para iframes dentro das páginas do Facebook, neste post vou mostrar como podemos trabalhar com altura maior do que 800px via Javascript.

Primeiramente vamos apreender como criamos nossa Fan Page.

Criando sua Fan Page:

1 – No campo de Pesquisa procure por Developer e clique no Grupo Facebook Developers, hoje pra mim o Developer Site estava com erro na Pagina não sei se esta rolando alguma alteração, porém antes era por ele que eu acessava meus Apps ou também podemos acessar pele endereço https://developers.facebook.com/apps

2 – Na tela abaixo clique no botão “+ Create New App”

3 – Nesta tela será onde você vai entrar com o Nome do seu Aplicativo, Local e aceitar os Temos do Facebook.

4 – Preencha como no exemplo abaixo e clique em Continuar:

5 – Nesta tela de Capcha preencha o campo com o texto que aparece na imagem e clique em Enviar.

6 – Na próxima tela você terá toda configuração do seu aplicativo:
Ao passa o cursor do mouse em cima do thumb da imagem você pode trocar este thumb para a imagem do seu app assim como pode alterar o ícone que ficará em sua aba.

7 – Clicando em algum link, irá abrir a modal abaixo lhe informando os formatos de imagens permitidas, tamanho das imagens em pixel e peso das imagens.

8 – Nesta tela atente-se aos principais pontos no qual devem ser preenchidos:

8.1. App Display Name – Nome do seu Aplicativo
8.2. Contact Email – Email para contato
8.3. Page Tab Name – Nome da Aba
8.4. Page Tab URL: preencher com a url a onde ficará hospedada sua pagina com a URL completa como por ex: ex: HTTP://www.meusite.com.br/aba/index.html.
8.5. Page Tab Edit URL, seguir exatamente como no item 4.
8.6. Site URL, preencher a URL somente até a pasta final onde esta hospedado a sua pagina e sempre com a “/” no final, como por ex: HTTP://www.meusite.com.br/aba/
8.7. Canva URL: seguir exatamente como no item 7.

Feito essas alterações salve.

9 – Na coluna a esquerda abaixo do menu de Configurações você vai encontrar o menu de Links Relacionados (Related links), clique em View App Profile Page.

10 – Nesta tela você estará na pagina do perfil do seu app, no canto direito você vai encontrar o link “Adicionar a minha pagina”.

11 – Uma modal será aberta onde você tera uma lista de Páginas no qual você adminstra, como no topico “Como criar Paginas no Facebook”, onde criamos a pagina Troll Face, basta clicar no link “Adicionar à página”.

Feito isto sua aba já esta disponível na sua página, vamos trabalhar agora com seu HTML e Javascript.

Montando seu HTML e Javascript

Vamos utilizar a biblioteca Javascript SDK do Facebook abaixo:

    /* O Código para redimencionamento ficará aqui. */

Ao carregar o Javascript SDK você passa a ter acesso ao FB.Canvas.setSize e FB.Canvas.setAutoResize e seus métodos. Podemos trabalhar de diversas maneiras, com conteúdo fixo ou com conteúdo flexível.

Passando o tamanho fixo desejado:

FB.Canvas.setSize({ width: 520, height: 1500 });

Trabalhando com conteúdo dinamico

FB.Canvas.setAutoResize();

Por padrão é 100ms para fazer o redimencionamento, caso queria forçar o redimencionamento mais vezes o mesmo tem que ser feito por parâmetro.

FB.Canvas.setAutoResize(20);

Seu HTML ficaria assim:

<title>FanPage para Facebook com mais de 800px de altura</title>

<script type="text/javascript" charset="utf-8">
	FB.Canvas.setSize({ width: 520, height: 10500 });
</script>

body {background: url(bg-body.png) repeat; color:#FFF; font-family: 'Days One', sans-serif; font-size:30px; height:10000px; text-align:center;}
.end {margin-top:9800px; font-size:50px}

<p>Criando uma FanPage para </p>
<p>Facebook com height maior do que 800px</p>
<p class="end">Fim</p>

Com isto temos uma Fan Page criada onde você pode trabalhar da maneira que bem entender. Estive lendo algumas recomendações onde é citado que temos sempre que usar chamadas de arquivos como css, js, direito do server onde esta hospedada sua Fan Page e não utilizando links absolutos, bem a cada dia o Facebook muda algo e é ai que temos que ficar de olho.

Disponibilizo aqui o link da fan page sem utilizar este método Página com Scroll e outro utilizando o método acima Página sem Scroll

Link para a page dentro do Facebook:

Com Scroll
Sem Scroll

Espero que tenham gostado.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Como criar um botão customizado de Share no Facebook
• Hot Shop SLA – 20 anos de história
• Como criar páginas no Facebook

Primeiramente gostaria de agradecer ao @Pedro amigo de velha data, estou entrando como colaborador e vamos ver como isto tudo vai rolar.

Meu nome é Luiz Celso mas fica somente com Celso, tenho 27 anos e trabalho com web desde os meus 19 anos, acredito que como muitos por aqui, grande parte de meus conhecimentos adquiridos foram estudando por conta, por meio da internet, blogs, etc.

Conheci o @Pedro em meados de 2008 quando decidi sair de Mogi das Cruzes (Terra do Caqui) para expandir meus horizontes, e pude conhecer o Pedrão, muita coisa do que pude conquistar hoje e sei foi graças a muitas orientações e conselhos deste cara batalhador, somente quem conhece pra dizer.

Atualmente trabalho na agência Grudaemmim como Programador Front-End, onde tenho tido a oportunidade de desenvolver varios aplicativos para redes sociais, como Facebook, Twitter, Orkut entre outros.

E é com algumas experiências que compartilho com vocês meu primeiro post:

Este é a primeira etapa de tutoriais para Facebook, sem mais conversas, vamos ao que interessa:

Para os mais distraídos, uma página de fãs é consideravelmente diferente de ter um perfil normal no Facebook. A maior limitação do perfil é que só pode ter até 5000 amigos, enquanto uma página não tem limite de fãs.

Criando sua página:

1 – No campo de pesquisa, faça uma busca por Pages, como na imagem abaixo:

2 – Clique no Botão Criar Pagina.

3 – Na sua próxima tela temos as categorias que sua pagina se encontra:

4 – Clicando em uma categoria, você terá a categoria que se encontra sua pagina e o campo para o nome da mesma, visto o termo de paginas do Facebook e clique em Começar.

5 – Na Etapa 1 você pode enviar a foto que ficará do perfil da sua pagina ou pode pular esta etapa.

6 – Na Etapa 2, você tem a opção de convidar seus amigos, importar uma lista de amigos, compartilhar sua pagina em seu perfil e curtir a pagina.

7 – Na Etapa 3 você tem como opção inserir informações básicas como Nome da Pagina e sua descrição.

8 – E por fim sua pagina criada, nesta tela você ainda terá toda configuração que foi passada acima.

Estou montando alguns post relacionados ao desenvolvimento focado para Facebook, pois não encontrei nada na internet atualizado para este assunto, pois sempre temos atualizações para o mesmo.

Espero que gostem e gostaria do Feedback de vocês.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Como criar um botão customizado de Share no Facebook
• Hot Shop SLA – 20 anos de história
• Como criar Fan Page no Facebook

Vamos pegar uma imagem diminui-la 50% transforma-la em desenho e salvar no servidor em seguida aproveitando a imagem na memória irei criar um thumbnail de 128x128px e salva-lo com um nome diferente.

Se demorar um pouco para carregar é porque o código estava abaixando a imagem via http, mas você pode salvar no servidor local e fazer os testes mais rapidamente.

< ?php
include 'pic/pic.class.php';

$image = new Pic;

if ($image->open('http://img198.imageshack.us/img198/2396/angelina2k.jpg')) {
	$image->resize('
		width:50%;
		efect:drawing;
	');

	$image->save('pic-resize.jpg');

	$image->thumbnail('
		width:128px;
		height:128px;
	');

	$image->save('pic-thumbnail.jpg');

	$image->clear(); //apago a imagem da memória
}

else
	echo "Erro ao abrir a imagem";
?>

Ou no lugar de salvar você pode simplesmente mostrar a imagem, de uma forma que todos entendam, transforamar o arquivo .php em uma imagem.

< ?php
include 'pic/pic.class.php';

$image = new Pic;

if ($image->open('http://img198.imageshack.us/img198/2396/angelina2k.jpg')) {
	$image->resize('
		width:50%;
		efect:drawing;
	');

	$image->display();

	//$image->clear(); Não é preciso usar o clear, o display faz isso automáticamente
}

else
	echo "Erro ao abrir a imagem";
?>

Então é isso, espero que ajude, você também pode conferir mais detalhes no wiki da class Pic.

Até a próxima!

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Webservice – Consulta de CEP diretamente ao site dos correios
• Ler feed de outros sites com SimplePie
• PHP Random HTML
• Endentação do código – TAB vs Espaços
• Começando com PHP – Salvando o código

Dentre os 80 a 90% de tempo de resposta, o carregamento do HTML fica a cargo de 10%, o restante do tempo os responsáveis são o CSS, JavaScript, imagens onde a maioria do tempo é gasto fazendo o download desses componentes que ainda não foram cacheados no browser. Com base nisso, Luiz Tanure acabou criando uma apresentação que ilustra os cuidados que você deve tomar no dia-a-dia no desenvolvimento web para tirar o máximo proveito das aplicações web. Aconselho você a vêla em tela cheia:

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Problemas com Ajax e Quirks mode
• Tutocle – Tutoriais para desenvolvedores web
• Responsive Slideshows
• Dicas profissionais para os iniciantes em web

Atualizado para Firefox 3, IE 8, e Google Chrome, com a utilização do livro CSS Cookbook você vai aprender a resolver os diversos problemas reais encontrados no dia-a-dia no desenvolvimento web. Este livro de receitas oferece centenas de exemplos práticos para a utilização de CSS na formatação de suas páginas web e inclui exemplos de código que podem ser utilizados imediatamente. Você encontrará exatamente aquilo o que precisa.

Cada receita explica como customizar uma solução que satisfaça as suas necessidades, e cada capítulo apresenta um modelo de design que exibe os tópicos discutidos. Você aprenderá sobre o comportamento dos navegadores mais recentes – incluindo o IE 8, Firefox 3, Safari 4 e o Google Chrome – e como conciliar as diferenças no modo em que esses navegadores exibem suas páginas web.

Organizada em um formato conveniente, de fácil utilização como referência, esta edição é uma companheira valiosa para qualquer pessoa que esteja trabalhando com CSS. Aprenda o básico, incluindo a estrutura de regras CSS:

• Trabalhe com a tipografia e o layout de suas páginas.
• Crie efeitos para imagens e outros elementos de páginas.
• Aprenda técnicas para a configuração de listas, formulários e tabelas.
• Projete uma navegação web efetiva e crie links personalizados.
• Use sua criatividade combinando CSS com JavaScript.
• Aprenda técnicas úteis de solução de problemas.
• Explore atributos do HTML5 e CSS3.
• É recomendado que se tenha familiaridade com HTML e interfaces web.

Se interessou pelo livro? Consegui um desconto para os leitores aqui do blog de 20%, basta utilizar o código: PINCELADASDAWEB. Não fique desesperado que esse código não vai expirar até o final da semana, ele é válido até o dia 31/12/10.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• CSS3 Gradients & HTML5 Databases
• Sorteio – Livro Smashing CSS
• Adobe Illustrator CS5 com suporte a HTML5/CSS3 e SVG
• CSS3 Borders & HTML5 Sections
• Novo CSS no Lanche

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Seletores CSS com jQuery
• Peppy – Seletor JavaScript CSS3 mais rápido da Web
• Sorteio – Livro Smashing CSS
• Ler Feeds com o Google JSAPI
• Aprenda mais sobre o console do Firebug

Quem é desenvolvedor Front-end sabe do famoso bug da margem dupla no IE6, mas se você nem sabia que isso existia, vamos aos fatos. No IE6, se você aplicar float a um elemento, e depois aplicar margin para o mesmo lado que foi aplicado o float, essa mesma margem fica com o valor dobrado. Exemplo, apliquei float:left a um botão e depois defini que ele terá um margin-left:100px, em qualquer browser isso será 100px, mas no IE6, isso virá 200px. Para corrigir isso basta aplicar um display:inline ao elemento que ocorre o bug e tudo fica OK.

Esse comportamento foi corrigido em versões posteriores do browser, ou quase, pois um bug semelhante ocorre no IE7, só que agora com a margem em outra direção. Vou explicar detalhadamente o bug para que vocês possam entender, e para isso, observem a marcação HTML abaixo:

<div class="box">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu nunc vel ipsum viverra blandit eu vitae risus. Nulla iaculis ante nec risus gravida adipiscing. Integer pretium nibh vitae odio feugiat volutpat. Quisque sodales pellentesque nulla ut lacinia. Quisque in neque non magna pulvinar convallis eu in mi. Ut quis pretium enim. Sed non pulvinar turpis. Aliquam vehicula odio sed turpis eleifend semper nec eu dolor.</p>
       <a href="#" title="Eu sou um link">Eu sou um link</a>
</div>

Até então, nada demais com essa marcação HTML, tudo muito simples, mas se por exemplo, eu aplicar float ao link, e definir um margin-bottom para o meu parágrafo, o link herda a margin do parágrafo. Portanto, a lógica é a seguinte, se eu tenho um elemento com float, e seu irmão (elemento antecessor no código) possui margin-bottom, o elemento com float herda o margin-bottom. Querem ver o que acontece, vejam o exemplo criado, funciona OK em qualquer browser, menos no IE7. Se você está com preguiça de abrir o IE7, veja só o que acontece na imagem abaixo:

Como podem ver, definir que meu parágrafo teria um margin-bottom:100px, ao aplicar float no link, ele também ficou com um margin-bottom de 100px. Possíveis soluções:

• Trocar margin por padding
• Remover o margin-bottom do parágrafo e aplicar margin-top ao link

No exemplo eu optei por remover a margem do parágrafo e aplicar ao link, portanto, vejam agora o exemplo sem bug. Jà havia passado por isso várias vezes e nunca havia encontrado solução, consertava isso através de “gambiarras”, mas através de um reply do Rafael Pazio no Twitter, encontrei a solução para o problema. Agora seu chefe vai ficar feliz quando você mostrar a ele que encontrou a solução para os problemas.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Como solucionar o bug de repetição de caracteres no IE
• Sorteio – Livro Smashing CSS
• Responsive Slideshows
• Dicas profissionais para os iniciantes em web
• Construíndo Web Sites de Alta Performance

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Seletores CSS com jQuery
• Sorteio – Livro Smashing CSS
• Ajax Image Gallery
• Instagr.am API
• Grayscale Images Hover com HTML5 Cross Browser

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Adobe Illustrator CS5 com suporte a HTML5/CSS3 e SVG
• CSS Cookbook
• Novo CSS no Lanche
• Radial Gradients & Web SQL Databases
• CSS3 Gradients & HTML5 Databases

Sim, é com muito prazer que anuncio que mudei o layout do meu outro blog, o CSS no Lanche. Aquele layout e logo antigo que você conhecia já estava no ar desde 2008, então, já estava mais do que na hora do site ter uma identidade visual própria.

Mas aí você me pergunta, você utilizou o mesmo layout do Pinceladas da Web? Sim, queria fazer algo que ao alguém visitar este site lembre-se quem é o dono dele. Um bom exemplo disso são os blogs da Envato, pois ao acessar os sites deles você vê que os layouts são os mesmos, a única mudança que ocorre é no logotipo. Quem acessa qualquer site deles já se lembra na hora a quem eles pertencem.

Mas agora voltando ao assunto do novo layout, essa textura no topo tem a função de simular uma toalha e o logotipo é um prato com um hambúrguer e um guardanapo ao lado, e o inventor de tudo disso foi meu amigo Thiago Dutra. Críticas e sugestões são sempre bem vindas.

Pra quem não viu o layout antigo, agora só através de screenshot:

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Adobe Illustrator CS5 com suporte a HTML5/CSS3 e SVG
• CSS Cookbook
• CSS3 Borders & HTML5 Sections
• Radial Gradients & Web SQL Databases
• CSS3 Gradients & HTML5 Databases

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Adobe Illustrator CS5 com suporte a HTML5/CSS3 e SVG
• CSS Cookbook
• CSS3 Borders & HTML5 Sections
• Novo CSS no Lanche
• CSS3 Gradients & HTML5 Databases

Via: Doctype.tv

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• CSS Cookbook
• Sorteio – Livro Smashing CSS
• Adobe Illustrator CS5 com suporte a HTML5/CSS3 e SVG
• CSS3 Borders & HTML5 Sections
• Novo CSS no Lanche