Link estilizado para e-mails (mailto)

Meu primeiro artigo foi falando de um assunto relacionado à esse, Link estilizado. Hoje vou mostrar um exemplo para os links de e-mails: <a href="mailto:cleowd[at]gmail[dot]com">. O resultado final será esse: Better Email Links.

Relembrando: "Seletores de Atributos"

O seletor de atributo "é uma declaração em um formato que 'casa' com todos os elementos que sigam aquele formato na árvore do documento." (Maujor). Exemplo:

h1 { color:#C00C00; }

Ou seja, esse estilo será aplicado para todos os headers <h1 />.

Podem ser especificados se tiverem algum tributo:

h1[att] { color:#C00C00; }

Onde att é um atributo qualquer (title, type, align etc). No link acima do Maujor, tem uma tabela bem explicativa. Vale a pena conferir.

O que diferencia os links de e-mail?

Os links de e-mail são diferenciados porque são os únicos que começam com a palavra "mailto:", e é com esse comando que o navegador vai enviar e-mails usando um progama específico do sistema operacional do computador, como o outlook que vem integrado no windows. Podemos então usar esse diferencial para aplicar um estilo específico somente para os links de e-mails:

a[href^="mailto"] { color: #C00C00; }

Complemento

Essa técnica pode ser usada para outras tags e atributos. Isso ajuda muito, pois podemos dar estilos aos elementos sem que precise ficar inventando nomes de classes. Os pseudo-elementos podem ajudar em um efeito ainda melhor:

a[href^="mailto"]:hover:after { content: " > " attr(title); }

O estilo vai aparecer quando o mouse passar por cima do link e adicionar o > depois dele. Junto com o caractere são colocados espaços para que os textos não fiquem colados.

Nada é perfeito

Infelizmente, esse estilo não é aceito por todos os navegadores. É, estou me referindo ao IE mesmo. Inclusive o 7. Não sei quanto ao 8, mas não interfere no estilo do link, só não vai aparecer nada. Existem algumas bibliotecas js que podem ajudar a resolver esse probleminha.

Fonte: CSS-Tricks

Top 10 web design WDCSS - Abril 2008

Vou tentar postar no WDCSS todo mês os designs de sites que achei mais bonitos, criativos, interativos etc. Acompanho algumas listas de design, e procuro salvar alguns screens na minha máquina para inspiração, tendências, imagens, enfim. Essa é, na minha opnião, dos sites que eu acessei, a lista dos melhores webdesigns desse mês.

;)

• 
  

  Nome: MyBabyOurBaby

  
  

  

  
  

  URL: http://mybabyourbaby.com/

  
  


• 
  

  Nome: Beat Fly Blog

  
  

  

  
  

  URL: http://beatfly.net/

  
  


• 
  

  Nome: Wishing Well Giving

  
  

  

  
  

  URL: https://wishingwellgiving.com/

  
  


• 
  

  Nome: FREE Flash MP3 Player

  
  

  

  
  

  URL: http://flashmp3player.org/

  
  


• 
  

  Nome: KAVOON - web design studio

  
  

  

  
  

  URL: http://kavoon.com/

  
  


• 
  

  Nome: Giuseppe Zizza - Web & Graphic Designer

  
  

  

  
  

  URL: http://playlab.it/

  
  


• 
  

  Nome: Scarabeo s.r.o.

  
  

  

  
  

  URL: http://scarabeo.cz/

  
  


• 
  

  Nome: dreamwire.nl

  
  

  

  
  

  URL: http://dreamwire.nl/

  
  


• 
  

  Nome: 1stCore

  
  

  

  
  

  URL: http://1stcore.com/

  
  


• 
  

  Nome: Rainfall

  
  

  

  
  

  URL: http://rainfall.ro/

  
  

Ícones gratuitos de cartões de crédito para sites de e-commerce

Saiu um artigo na Smashing Magazine com uma lista de sites que disponibilizam ícones gratuitos de cartões de crédito, muito usados em sites de e-commerce.

O artigo está em inglês, nesse link.

Recomendo os ícones do site Zeusbox Studio. Na minha opnião, estão mais inovadores.

;)

Dica de otimização de CSS I

Vou começar uma série de artigos para otimização de códigos CSS.

Há um tempinho atrás, na empresa que eu trabalho, me pediram para reduzir o tamanho dos arquivos CSS de um sistema web. Estavam muito bagunçados, sem falar que tinha um arquivo para praticamente cada página. Cuidado com o uso excessivo de arquivos separados, é certo usá-los, mas moderadamente para que não ocupem espaço na publicação/hospedagem.

Bom, a primeira dica que eu vou dar é a de "aninhar" algumas propriedades do CSS, chama-se Declaração Única.

Abaixo tem as principais propriedades que podem ser declaradas dessa forma:

Margin e Padding

.exemplo1 { /*completo*/
margin-top:0;
margin-right:5px;
margin-bottom:10px;
margin-left:15px;
/*auto, 0, px, pt, em ou %*/
}

.exemplo1 { /*aninhado*/
margin:0 5px 10px 15px;
/*top right bottom left*/
}

.exemplo2 {
margin-top:10px;
margin-right:20px;
margin-bottom:0;
margin-left:20px;
}

.exemplo2 {
margin:10px 20px 0;
/*top right/left bottom*/
}

.exemplo3 {
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
}

.exemplo3 {
margin:0 auto;
/*top/bottom left/right*/
}

.exemplo4 {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:50px;
}

.exemplo4 {
margin:50px;
/*top/right/bottom/left*/
}

Border

.exemplo1 { /*completo*/
border-width:5px;
/*thin, thick, medium ou value
*default = medium*/
border-style:dotted;
/*solid, dashed, dotted, double etc
*default = none*/
border-color:blue;
/*nome em inglês, hex, rgb ou 0-255
*default = valor dos elementos de propriedades superiores*/
}

.exemplo1 { /*aninhado*/
border:5px dotted blue;
}

.exemplo2 {
border-right-width:2px;
border-right-style:solid;
border-right-color:#666666;
}

.exemplo2 {
border-right:2px solid #666
}

.exemplo3 {
border-top-width:3px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:2px;
}

.exemplo3 {
border-width:3px 2px;
}

Background

.exemplo1 { /*completo*/
background-color:#CCCCCC;
/*nome da cor em inglês, hex, rgb ou 0-255
*default = transparent*/
background-image:url(images/bg.gif);
/*url ou none
*default = none*/
background-repeat:no-repeat;
/*repeat, repeat-x, repeat-y ou no-repeat
*default = repeat*/
background-attachment:scroll;
/*fixed ou scroll
*default = scroll*/
background-position:top left;
/*top, right, left, bottom ou center
*default = 0% 0%*/
}

.exemplo1 { /*aninhado*/
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

.exemplo1 { /*completo*/
font-family:Verdana, Arial, Helvetica;
/*Verdana, Arial, "Times New Roman" etc
*default = fonte do navegador*/
font-size:12px;
/*xx-small, medium, x-large, value etc
*default = medium*/
font-weight:bold;
/*normal, bold, bolder, lighter, 100-900 ou inherit
*default = normal*/
font-style:italic;
/*normal, italic ou oblique
*default = normal*/
font-variant:normal;
/*normal ou small-caps
*default = normal*/
line-height:1.5;
/*normal, px, pt, em, num ou %
*default = normal*/
}

.exemplo1 { /*aninhado*/
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

List

.exemplo1 { /*completo*/
list-style-image:url(images/bullet.gif);
/*url ou none
*default = none*/
list-style-position:inside;
/*inside ou outside
*default = outside*/
list-style-type:square;
/*circle, disc, square etc
*default = disc*/
}

.exemplo1 { /*aninhado*/
list-style:square inside url(images/bullet.gif);
}

Tente usar essa dica nos seus códigos e com o tempo você acaba se acostumando a fazê-los sempre assim.

Abaixo listo alguns sites de otimização de CSS, e com o tempo, tentarei passar outros truques:

Clean CSS
Flumpcakes

Até mais.

Fonte:CSS Shorthand Cheat Sheet by Michael

E até mesmo no espaço o Firefox é o escolhido

Não podia deixar de colocar essa imagem no meu blog. Sou um pouco suspeita também né (amo a rapozinha).

Essa imagem foi capturada pelo telescópio Hubble em março de 2004.

Linda!!!!

Fontes: Newlaunches.com e CrunchGear