Gadget das Redes Sociais em Estilo Metro UI - Versão 1
.MBD2B-social{width:285px} .MBD2B-social li{position:relative;cursor:pointer;padding:0;list-style:none} .MBD2B-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .MBD2B-social .fb{background:url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png<\/span>) no-repeat center center #1f69b3;width:140px;height:141px} .MBD2B-social .tw{background:url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png<\/span>) no-repeat center center #43b3e5;width:140px;height:70px} .MBD2B-social .gp{background:url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g 1.png<\/span>) no-repeat center center #da4a38;width:140px;height:69px} .MBD2B-social .fd{background:url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png<\/span>) no-repeat center center #e9a01c;width:282px;height:69px} .MBD2B-social li:hover .fb{background:url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png<\/span>) no-repeat center center #1f69b3} .MBD2B-social li:hover .tw{background:url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png<\/span>) no-repeat center center #43b3e5} .MBD2B-social li:hover .gp{background:url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g 2.png<\/span>) no-repeat center center #da4a38} .MBD2B-social li:hover .fd{background:url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png<\/span>) no-repeat center center #e9a01c}
Vocês já viram na web vários sites com ícones grandes de estilo limpo(clean), cores vivas, parecidos com o visual do windows 8.0.
Esta é uma tendência da Web2.0: O Estilo Metro
Esta tendência começou com o Windows e tem tomado conta dos estilos dos sites na web. Encontrei 2 definições deste estilo que podem resumir o que é o Estilo Metro (ou em inglês Metro Web Design).
O que é o Estilo Metro?
Desde que a Microsoft lançou o projeto Metro UI no Windows Phone 7, o web design metro tem sido bem utilizado para todos os produtos da Microsoft e aplicações Windows. Muitos desenvolvedores da web estão seguindo o design estilo Metro e Metro UI por sua simplicidade e elegância que ele traz visando o conteúdo do web site.
Metro é um estilo de design e linguagem desenvolvida pela Microsoft. Produtos como o Zune, Windows Phone, Xbox e Windows 8 seguem o estilo de design Metro. O principal objetivo deste estilo de design é para remover qualquer decoração extra e permitir que os usuários interajam diretamente com o conteúdo. É tudo sobre o conteúdo e a beleza da simplicidade.
Fonte: http://www.blinkux.com/metro/
As características básicas do Estilo Metro são:
O conteúdo como foco principal (Visão global);
Rapidez e Fluidez;
Mais atenção à tipografia;
Texto é a principal forma de navegação;
Cores brilhantes e vivas.
Uso de cubos coloridos e peças quadradas como elementos de navegação;
Grandes títulos de página;
Faça mais com Menos (Minimalista).
Neste artigo vou ensinar como colocar um Gadget com os links das principais Redes Sociais do momento no estilo Metro. Ou seja, limpo, bonito e fácil.
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.
Você já conhece a Versão 2 deste Gadget?
Então clique nesta imagem da versão 2 e coloque em seu blog.
Observação Importante:
Nos links dos botões das redes sociais eu acrescentei o target="_blank" que indica que a página irá abrir em outra aba. Caso queira que as páginas das redes sociais abram sobre o seu blog é só tirar. Agradeço ao leitor Nami por comentar esta dúvida quando fiz a alteração no código.