Seguindo com a série de posts sobre CSS3, hoje vamos falar sobre bordas e sombra(border e shadow em inglês) com CSS3, mais especificamente falaremos sobre:

• border-color
• border-image
• border-radius
• box-shadow

Se você não viu o post anterior a este, é bom ver agora :

Iniciando com CSS3

A partir de agora os tutoriais desta série serão feitos em HTML5 e CSS3, então pare de usar Internet Explorer < 9. Se você ainda não conhece os seletores em CSS3, veja o artigo anterior.  Algumas propriedades só funcionam em determinados browsers, mais quando isso ocorrer vou informar .

Para não ficar perdido na sintax de cada propriedade, tente “decorar” esta pequena legenda abaixo:

[] – propriedade variante, ou seja, pode se X ou Y.

[]? – propriedade opcional.

| ou || – que dizer ou. Exemplo: X || Y (x ou y).

<> – é um valor definido pelo desenvolvedor – você.

{} –  geralmente é o número de vezes que se deve usar um determinado valor. Exemplo left{4}, seria left left left left.

Border-colors

Define a cor da borda. Neste caso as cores da borda.

Sintax: -moz-border-[top | bottom | left | right]-colors: [<cor>]* <cor> | none

Antes que atirem pedras em mim falando que border-color funciona em todos os navegadores, lembre-se que estamos falando de CSS3 e border-colors está no plural – não border-color.  Sendo assim, essa novidade só funciona no Firefox (e demais feitos com a mesma engineer – Gecko) :

div#border-colors{
	background: #CCC;
	padding: 20px;
	border: 10px solid #666;
	-moz-border-bottom-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0 #A2A2A2 #FFEFEF #770000 #4504C1;
	-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
	-moz-border-left-colors: #300 #AAA #222;
	-moz-border-right-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0;
}

O segredo por trás dessa propriedade é o tamanho – width – da borda e o n° de cores. Por exemplo, se eu tenho 5px de width, logo é “bom” eu usar cinco cores (#111 #222 #333 #444 #555). Disse “bom” porque você pode sim usar mais cores,  só que a bagunça nem você vai entender, se é que você esta entendendo agora .

As cores sempre começam de fora para dentro, ou seja #111 será a primeira cor, ou a cor mais distante do elemento e #555 será a última, ou a cor mais próxima (colada) ao elemento.  Se você usar 4px de width, com somente 2 cores(#F00 e #CCC), o primeiro pixel (1px) será na cor #F00 e os demais (3px) na cor #CCC.

Veja o exemplo | Mais detalhes

Border-Image

Basicamente usa uma imagem no lugar da cor em uma borda. Funciona em todos os navegadores com suporte a CSS3.

Sintax: [-moz- | -webkti-]?border-image: <uri> [<numero> | <porcentagem>]{4} [ / <tamanho>{1,4} ]? [stretch | repeat | round]{0,2} | none

h3 + div{
	color: #000;
	padding: 20px;
	border: 10px solid #666;
	border-width:15px;
	border-image: url(borda.png) 27 27 27 27 round round;
	-moz-border-image: url(borda.png) 27 27 27 27 round round;
	-webkit-border-image: url(borda.png) 27 27 27 27 round round;
}

Na sintax primeiramente temos a url da imagem e depois quatro números. Estes 4 números ou porcentagens, são os valores que especificam qual parte da imagem será usada para a borda, ou seja, qual parte da imagem será cortada para criar a borda. Por exemplo, tenho uma imagem e quero corta 5px dela em todos os lados, para isto eu usaria: 5 5 5 5. Os 4 números são respectivamente top, right, bottom e left . Os números são valores em px – somente px, você não pode colocar 5px ou 5em por exemplo, só é aceito 5(ou seja somente NUMEROS!!!) ou em porcentagem – ai teria de ser 5%.

Opcionalmente também podemos definir o tamanho da borda para cada lado. Para isso usamos a barra “/“, seguida das quatro medidas – uma para cada lado – que podem ser em qualquer formato, px, em, pt...apenas temos que lembrar de usar “/” para “dizer” ao CSS que estes valores são para o tamanho da borda, ou melhor dizendo border-width.

Depois, vem o modo como a imagem será tratada. Os valores são:

stretch – a imagem gerada é redimensionada (de qualquer forma) para se encaixar, distorcendo a imagem.

round – redimensiona a imagem (proporcionalmente) para que se encaixe na área, também acontece a repetição da imagem mais não em partes, se vai repetir repete a imagem por inteiro, sem corta-la.

repeat – sem segredo…repete a imagem até que se encaixe na área, mais ou menos como acontece com background-repeat. Uma boa prática é definir uma borda “reserva”, ou seja, a cor de borda e usar imagens sem transparência…assim se ocorrer algum erro no border-image a borda “reserva” entra em cena.

Alguns pontos interessantes:

• Não é bem uma borda com imagem, é mais um segundo backgrund, só que mais complicado.
• Webkit trata border-image um pouco diferente dos demais, então pode ficar complicado conseguir a mesmo resultado em todos os navegadores.
• Em alguns casos, o Opera também faz o tratamento diferente do esperado.
• Opera não rendeniza border-image se tive a barra “/” com o tamanho da borda. So não usar os valores opcionais (e a barra) que resolver o problema .
• Eu não uso border-image nem me pagando!!! Mas esta ai pra quem quer aprender e usar.

Veja o exemplo | Mais detalhes

Border-Radius

Este é o que mais uso. Faz com que a borda fique redonda (mesmo que não haja border no elemento).

Sintax: [-moz-|-webkit-]?border-radius: [<comprimento> | <porcentagem> ]{1,4} [ / [ <comprimento> | <porcentagem> ]{1,4}?

div:first-child{
	background: #EEE;
	border: 1px solid #CCC;
	padding: 20px;
	margin: 10px;
	border-radius: 25px 0 0 25px;
	-moz-border-radius: 25px 0 0 25px;
	-webkit-border-radius: 25px 0 0 25px;
}

Usar border-radius é tão simples quanto definir margin ou padding a um elemento. Obviamente são quatro posições disponíveis para “arredondamento”. As posições são divididas em top (top-left e top-right) e bottom (bottom-left e bottom-right). Na ordem certa seria: top-right, bottom-right, bottom-left e top-left.

Como acontece no border-image, há mais 4 medidas opcionais seguidas pela barra “/”. Neste caso as medidas representam um quarto da elipse para cado posição. É um recurso avançado e de difícil entendimento, por isso é importante o domínio da matemática – mais especificamente elipse –  para não ter problemas em entender como funciona “por trás” o border-radius. Não vou me ater a detalhes aqui para não tornar a leitura cansativa, mais uma vez entendido como funciona a elipse, é só relacionar e fazer alguns testes que você irá compreender rapidamente.

Se você, por obra do destino (rs) não usar esta propriedade em formato shorthand, precisará “queimar” um pouco mais de neurônios para decorar a lista no formato expandido. O chato é que para cada enginer a sintax é diferente, observe:

/*Mozilla*/
-moz-border-radius-topleft: 4px 2px;
-moz-border-radius-topright: 3px 4px;
-moz-border-radius-bottomright: 6px 2px;
-moz-border-radius-bottomleft: 3px 4px;

/*Webkit*/
-webkit-border-top-left-radius: 4px 2px;
-webkit-border-top-right-radius: 3px 4px;
-webkit-border-bottom-left-radius: 6px 2px;
-webkit-border-bottom-right-radius: 3px 4px;

/*Demais - Webkit é um pouco semelhate a este*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-left-radius: 6px 2px;
border-bottom-right-radius: 3px 4px;

Neste caso o quarto da elipse passa a ser o segundo valor em cada propriedade.

Considerações:

• Priorize o formato shorthand.
• Bordas no estilo dashed e dotted, são rendenizados formato sólido – solid.
• Valores em porcentagem não funcionam no Webkit.
• Webkit não suporta somente um valor para todos os lados, é necessário que use pelo menos 2 valores para funcionar corretamente – No Chrome funciona, mais no Safari não.
• Em alguns casos pode ser que você não consiga o mesmo resultado no Webkit mesmo usando a sintax corretamente. Para corrigir este problema, no Webkit use as medidas para cada lado em propriedades separadas.

Veja o exemplo | Mais detalhes

Box-shadow

A propriedade box-shadow adiciona uma sombra ao elemento, podendo ser por dentro(inset) ou por fora…É um efeito muito interressante  e de grande utilizade principalmente para performance do site, já que ele substitui imagens.

Sintax: [-moz-|-webkit-]?box-shadow:  <sombra> [ , <sombra ]* | none

<sombra>: inset? && [ <posicao-x> <posicao-y> <blur-radius>? <spread-radius>? <cor>? ]

:root h3 + div{
	background: #FFF;
	border: 1px solid #ddd;
	padding: 20px;
	margin: 50px;
	box-shadow: 2px 2px 2px 0 #eee;
	-moz-box-shadow: 2px 2px 2px 0 #eee;
	-webkit-box-shadow: 2px 2px 2px 0 #eee;
}

Como podemos ver acima, primeiramente temos as medidas para posicionamento X e Y, estes podem ser em qualquer formato (px, em…). Para melhor entendimento, a posição X é o mesmo que posição horizontal relativa ao elemento (lembra do eixo X e Y do plano cartesiano?).

Por exemplo, se eu tenho uma div com 500px de largura e no box-shadow eu definir 2px para a posição X, seria o mesmo que criar uma uma “segunda div” (que é o box-shadow) com a mesma largura (500px) e margin-left de 2px, ou seja ela (a “segunda div”) ficaria 2px à frente. É mais ou menos assim que funciona o posicionamento do box-shadow. Para a posição Y seria a mesma coisa, mas no eixo vertical.

Logo após as posições temos o blur-radius, que é o responsável por criar o efeito do sombreamento. Na sintax diz que este valor é opcional, com o padrão sendo 0 (zero). Se você quer o efeito de ofuscamento no sombra, você deve setar o valor para esta propriedade, caso contrário ficará uma sombra “reta”.

Ao definir o valor para maior que 0 (zero) para blur-radius, a “segunda div” que citei anteriormente será aumentada em sua largura e altura. por exemplo, se o valor de blur-radius for igual a 5px , a “segunda div” passará a ter 510px de largura e 510px de altura. Recomendo que você tenha isso sempre em mente, pois irá diferenciar no posicionamento da sombra.

Outro valor opcional é o spread-radius. Sua função é semelhante ao blur-radius…também aumenta o tamanho da sombra (a “segunda div”), só que sem criar o efeito de ofuscamento. É uma segunda propriedade, e pode ser muito útil em alguns casos.

Concluindo, para o último valor, temos a cor da sombra, aqui não há segredo. Somente vale lembrar que se houver valor para blur-radius maior que zero, então a cor na largura – ou valor – do blur-radius será enfraquecida para criar o efeito de ofuscamento.

Vamos as observações:

• No posicionamento, você também pode usar valores negativos, neste caso a sombra seria rendenizada no lado oposto ao padrão.
• Blur-radius não suporta valores negativo.
• Opera não aceita o valor inset, isto causará um erro e a propriedade será ignorada.

Veja o exemplo | Mais detalhes

Bônus 1: Apostila CSS3

No final desta série vou disponibilizar estes post em uma apostilha. Então comentem sobre a idéia, deêm sugestões e aguardem para fazer o download .

Até a próxima.

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

Não vou ficar tratando dos detalhes pois você pode encontrar os mesmos visitando o site do Linha Framework. Recomendo que baixem inicialmente a versão para desenvolvimento, pois contém demonstrações dos grids, plugins, enfim…é mais completo e melhor para iniciantes.

Fugindo um pouco do foco

Resolvi desenvolver este framework quando estava diante de um projeto mais complexo, ai já me empolguei e hoje está como você pode ver ai (no Github é mais atualizado ). Não espero rebecer os “meus parabéns” (além do mais que eu não criei este framework pensando nisso…) , pois creio que há muito a ser melhorado, e pra isso conto com a ajuda da comunidade brasileira. Se quiser críticar, seja bem vindo, mais faça um crítica conclusiva e objetiva.

Como já disse, é pra comunidade brasileira (quem sabe a gente não conquista o mundo, ashhausdha), pois a comunidade brasileira “ta fraca”…

É isso, se desejar teste o framework e crie a sua própia opinião, pra mim é uma mão na roda bem grande, mais pra você, já é outra conversa. As novidades talvez serão postadas aqui, ou quem sabe eu crio um blog só pra ele. De qualquer forma eu vou trazer alguns tutoriais e screencasts para ajudar quem deseja usar.

Quero deixar bem claro que é um framework open souce e eu não gostaria de desenvolver sozinho, se você tem amplos conhecimentos em front-end e quêr ajudar no desenvolvimento, ou fazendo tutoriais, melhorar a documentação, ou seja lá o que for, saiba que seu esforço é de grande importância.

Visite http://www.linhaframework.com, baixe e use a vontade. Aproveite e divulgue também em sua rede social.

Antes de terminar este post, quero dizer também que estou reformulando meu site já usando o linha framework…ta ficando bunitu

Até a próxima.

http://www.bestwebframeworks.com/

É o site precisávamos…uma vez selecionado a linguagem, será exibida uma tabela com pelo menos alguns pontos básicos:

• Licença;
• Requisitos;
• Recursos;
• Compatibilidade.

Quem tiver dúvidas creio que ao visitar este site terá mais certeza de qual framework precisa. Para não ficar só na dica eu vou falar os melhores na minha opinião:

PHP

O framework que mais me agrada é o Codeigniter. Lembro de quando eu nem sabia PHP e fui me meter com ele sem nem saber pra que servia, rsrs. Mesmo não sabendo nada eu fui capaz de fazer algumas coisas e recomendo. Com um pouco mais de detalhes, a documentação do Codeigniter é bem completa, simples e fácil e tem até em português (http://www.codeigniter.com.br/manual/index.html),  sua instalação é a mais rápida que já vi e o desenvolvimento é: PHP, não é necessário aprender uma nova “linguagem” como no Zend Framework enfim, na minha opinião não tem melhor.

Site Oficial Codeigniter
Codeigniter Brasil
Documentação Codeigniter em Português

Ruby

Não sou nenhum programador Ruby mais sei que o melhor e mais conhecido framework é o Ruby on Rails.  Este frameworks é usado em grandes sites como Twitter, GitHub , Basecamp, BlogsBlogs entre outros. Nem vou falar mais nada apenas visitem o site http://www.rubyonrails.pro.br/, se empolgue e tire as suas próprias conclusões.

Site Oficial Ruby on Rails (inglês)
Documentação Ruby

Javascript – JS

Se você é um leitor do meu blog já deve saber que jQuery é o frameworks que uso para programar javascript. Mesmo depois de tanto tempo usando jQuery ainda me surpreendo com a facilidade de se programar com essa biblioteca. Para você que ainda não conhece o jQuery recomendo que leia o post Introdução ao jQuery e veja também os tutorias em sua categoria.

Site Oficial jQuery
Documentação jQuery

CSS

E por último para CSS recomendo o Grid 960. O GRID 960 é uma ferramenta simples que ajuda na padronização de layouts para web. Possui arquivos (grids) para os mais famosos programas usados para criação de layouts (Photoshop, Illustrator, Fireworks, Indesign, etc…). Seu desenvolvimento é bem fácil também e ajuda bastante no desenvolvimento do layout em CSS.

Site Oficial Grid 960
Download do Grid 960

Em breve se possível estarei trazendo mais novidades sobre cada um destes frameworks e tutoriais para aprendizado. Até a próxima.

Já faz algum tempo que o CSS3 foi lançando e eu ainda não falei nada sobre ele. Pois bem, vamos dar uma introdução ao CSS3. Antes de mais nada quero deixar bem claro que nem todos os navegadores tem suporte ao CSS3, não preciso nem citar o IE6 né . Aqui vale apenas citar os que possuem suporte: Firefox 3+, Safari 4+ e Opera 9.5+. Vamos iniciar com a história do CSS:

A História do CSS

O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C. Desde então, apenas esboços foram apresentados como módulos em Junho de 1999(CSS3).

Com essa pequena intro, já percebe-se que o CSS3 vem sendo planejado a muito tempo. Chega de “papo furado” e vamos prosseguir.

Novidade do CCS3

Novidades são muitas…o melhor delas é que são úteis, hehe . Veja a lista das principais propriedades que são novidades, com o surgimento do CSS3:

Bordas

• border-color
• border-image
• border-radius
• box-shadow

Fundos

• background-origin
• background-clip
• background-size
• fazer camadas com múltiplas imagens de fundo

Cor

• cores HSL
• cores HSLA
• cores RGBA
• Opacidade

Texto

• text-shadow
• text-overflow
• Ruptura de palavras longas

Interface

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

Seletores

• Seletores por atributos

Modelo de caixa básico

• overflow-x, overflow-y

Outros

• media queries
• criação de múltiplas colunas de texto
• propriedades orientadas a discurso ou leitura automática de páginas web
• Web Fonts

Em futuros posts falarei sobre estas propriedades e também farei tutoriais (o que não pode faltar ^^). Por ordem de importância, vamos falar hoje sobre os seletores do CSS3.

Seletores CSS3

No geral, os seletores do CSS3 são estes (obs. E - letra E – é o seletor. Ex: p[atributo*="string"]):

• E[atributo*="string"]
• E[atributo$="string"]
• E[atributo^="string"]
• E~F
• :root
• :last-child
• nly-child
• :not ( )
• :empty
• :target
• :enabled
• :disabled
• :checked

Quem conhece bem o jQuery, perceberá que ele tem alguns seletores igualzinho ao CSS3, isto ocorre porque o jQuery utiliza os seletores do CSS3 também.

E[atributo*="string"]

Funciona da seguinte maneira, imagine que eu tenho uma div alinhada a esquerda:

<div align='left'></div>

Podemos estilizar esta div apenas acessando a sua propriedade, que neste caso é align=”left”. Observe que o valor é exatamente igual – left = left.

div[align*=left] {
} 

Veja o exemplo

Semelhantemente os seletores E[atributo$="string"] e E[atributo^="string"], funcionam da mesma forma, mais a diferença entre eles é, se tiver o $(cifrão) deverá terminar com o valor especificado e se tiver o ^(acento circunflexo) deverá iniciar com o valor especificado.

E~F

Este seletor faz uma combinação de dois seletores para a estilização. Exemplo, um h1 e p:

<h1></h1>
<p></p>

e o css:

h1 ~ p {
}

Neste caso o que será estilizado com css é o p. O segredo para o domínio desta seleção é a ordem dos elementos, se neste exemplo o h1 fosse depois do p o css não resultaria em nada. Observe o que estou dizendo:

<p></p>
<h1></h1>

Veja o exemplo

:root

Como o próprio nome diz, ele irá pegar o 1º elemento da página, a tag <html>. Podemos usar um css mais avançado e criar CSSs da seguinte maneira:

:root div{
}

Veja o exemplo

:last-child, nly-child e :not()

Para não cansar a leitura, vamos a uma explicação rápida. :last-child irá pegar somente o último elemento de uma lista por exemplo (<li>):

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2</li>
    	<li>Texto 3</li>
    	<li>Eu sou o ultimo texto desta lista</li>
</ul>

CSS

li:last-child{
    	background: #ddd;
    	display: block;
}

Veja o exemplo

nly-child, como o própio nome já diz, (only = único) irá buscar o elemento que é único, para exemplificar usei mais uma vez uma lista:

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2
    	    	<ul>
    	    	    	<li>Só tem um LI</li>
    	    	</ul>
    	</li>
    	<li>Texto 3</li>
    	<li>Texto 4</li>
 </ul>

CSS

li:only-child {
    	background: #ddd;
    	display: block;
}

Veja o exemplo

:not, irá “bloquear” a estilização com CSS ao elemento que tiver uma certa #id ou .classe . Neste exemplo abaixo, “bloquearemos” a classe .vermelho:

HTML

<ul id="dois">
    		<li>Texto 1</li>
		<li class="vermelho">Texto 2</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li class="vermelho">Texto 3</li>
		<li>Texto 4</li>
</ul>

CSS

    	li:not(.vermelho){
    	background: #ddd;
}

Veja o exemplo

:empty

É útil para indicar div que estão em branco (empty = em branco), ou então esconde-las, como no código abaixo:

div.box:empty {
    	display: none;
}

:target

essa eu axei interressante…imagine que você tenha links que puxar o id(#) de uma parte do site, por exemplo este link http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8#comments você percebe que no final dele existe #comments e é usando esse atributo que vamos estilizá-lo:

h2:target {
    	background:#F2EBD6;
}

:enabled, :disabled e :checked

Só se aplica a elementos do html que tenham a opção de abrir(enabled) e fechar(disabled) ou checar(checkbox), como por exemplo formulários.  Podemos estilizar como destaque alguns radios que estão desabilidatos.

<input type="text" disabled="true" />

O css seria:

input:disabled {
    	border:1px dotted #999;
    	background:#F2F2F2;
 }

o mesmo se aplica ao enabled, mais temos que somente alterar :disabled por :enabled. Ex:

input:enabled {
    	border:1px dotted #999;
    	background: #F2F2F2;
 }

E para finalizar, com o atributo :checked podemos colocar os checkbox’s que estão checados mais a frente:

<input type="checkbox" checked="checked" />

CSS:

input:checked {
    	margin-left: 20px;
}

Veja o exemplo

Depois leia também o post do Smashing Magazine que está mais amplo…
Taming Advanced CSS Selectors

Outros Post Desta Série

Prosseguindo com CSS3 – Bordas e Sombras

Até a próxima.

Demonstração / Download

Primeiro vamos ao conceito.Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta la ganhando o pão de cada dia e se depara com um menu como este…não é mais facil usar o famoso CTRL+C e CTRL+V? pois bem, este é o conceito…e acredite, sua produtividade vai aumetar e muito...chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job ta atrasado…ta bom, eu apelei mais é essa a intenção.
É claro que cada menu é diferente um do outro e tals, enfim…o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui…outro ali…e voala…menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

• PDF

2. HTML Cheat Sheet

• PDF
• PNG

3. HTML Character Entities Cheat Sheet

• PDF
• PNG

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

• PDF
• PNG

6. CSS Cheat Sheet

• PDF
• HTML

7. CSS Shorthand Cheat Sheet

• PDF

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

• PDF
• PNG

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

• PDF

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

• PDF

17. mootools 1.2 cheat sheet

• PDF

18. jQuery Cheatsheet

• PNG

19. jQuery 1.2 Cheat Sheet

• PDF

20. jQuery Visual Map – PNG

Variados

21. RGB Hex Colour Chart

• PDF
• PNG

22. The Web Developer’s SEO Cheat Sheet

• PDF

23. The WordPress Help Sheet

• PDF

Alias vamos ao creditos:
Six Revision – Excelente site, apesar de ser em inglês…recomendo a todos

Até a próxima.

Intrudução
É comum haver confusões entre IDs e Classes, utilizados e necessários em XHTML, CSS e Javascript. Há muitos tutoriais na internet explicando alguns pontos básicos e algumas dicas, que não são o suficiente. Resultado: as dúvidas persistem e a diferença entre ID e Classe ainda não é “desvendada”. Vamos acaber com esse mitério de uma vez por todas…

IDs e classes são “anzóis”

Precisamos definir uma propriedade(estilos) para os elementos da pagina. Para isso, usamos e IDs e Classes.

Por exemplo:

<ul id="nav">

Isso dá a oportunidade de visar e aplicar especificamente as propriedades para esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como:

<div id="footer">

Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma:

<ul class="sidebar-box">

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. O CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?

IDs são únicos

• Cada elemento pode ter apenas um ID;
• Cada página pode ter apenas um elemento com aquele ID.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.

Atenção: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento. A validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Adiante, mais razões pelas quais um ID deve ser único.

Classes não são únicas

• Você pode usar a mesma classe para vários elementos;
• Você pode usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. Tomemos como uma exemplo uma página com vários “widgets“:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? É possível aplicar mais de uma classe a um elemento:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class, juntamente com o nome da classe que já está lá. As diferentes classes são delimitadas por espaços e a maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares, o que é muito mais do que realmente é preciso).

Não existem padrões de IDs e Classes em nenhum navegador

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento.

Isso é algo que intriga quem é iniciante. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. Então você mexe em outro site, com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim…

Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos.

Códigos de Barra e Números de Série

Talvez códigos de barra e números de série sejam uma boa analogia. Tome um iPod, numa loja. Na embalagem há um código de barras. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Todos esses iPods têm exatamente o mesmo tipo de código de barras.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. O número de série não informa o preço. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID.

IDs têm uma funcionalidade especial nos navegadores

Classes não tem funcionalidades especiais no browser, mas IDs têm um truque muito especial na manga: um “valor de hash” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada – rolar para baixo -, também.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Com isso, o navegador sabe até quando rolar.

Elementos podem ter ambos, ID e Classes

Não é nada ruim você usa ambos, ID e classes em um único elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no WordPress:

<li id="comment-27299" class="item">

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo WordPress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.

CSS sem limites

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. O CSS não se importa, faça o que quiser.

Javascript se importa

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. É uma função nativa no jQuery. Veja que tal função não existe para IDs. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil…

Se você não precisa deles, não os use

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Entretanto, você deve usá-los com critério e semanticamente.

Isto significa evitar coisas do tipo:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

Já sabemos: este elemento é um link, é um elemento âncora. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (”a”).

Evite este tipo de coisa, também:

<div id="coluna-direita">

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. Descreva o contexto do elemento, não onde está ou como se parece. Um ID “barra-lateral” seria melhor.mais isso não tem tanta importacia, eu prego o seguinte: se você entende o que fez e ta certo, então faça a sua maneira…

Ta bom né, agora vamos aos creditos:
Eu é claro, e tambem ao site CSS tricks de onde foi retirado parte desse post…espero que tenham gostado e entendido (ficou meio técnico o post).

Até a proxima.

Hoje vou postar algumas dicas de CSS, pra ajudar novos designers e até os mais experientes, são dicas simples porem eficazes, vamos as dicas:

Pare com div1, div2…

Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada, e quando você for corrigir algum erro, sei la só vai queimar o neurônios sem precisão . Da mesma maneira, barra_azul não faz muito sentido: se você mudar a cor do site, onde vai estar a barra azul? Prefira nomes explicativos, como menu ou barra_links.

Cuidado com Maiúsculas e minúsculas

Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.

Declaração id x class

Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (ex. #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .postagems).

Use a mesma declaração entre vários elementos comuns

Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula, assim diminui o a linha de código e agiliza bastante:

h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}

Organize-se e lembre da hierarquia

Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!), preste atenção viu .

Use comentários

Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz, é só adicionar/* para abrir um comentário e */ para fechar.ex

#menu ul li a
       /* aba normal */
       {background: #444; color: #FFF; border: 1px #FFF solid;}

#menu ul li a:hover{
       /* aba selecionada*/
       {background: #FFF; color: #F00; border: #F00 1px solid;}</pre>

Declare as unidades

Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador, uma coisa simples como essa pode pesar e muiito na sua imagem na web.

Bom é so isso e até a próxima.

Vamos recriar o efeito usado no site Dragon Interactive, vai ficar igualzinho, até em inglês:),não vou entrar em detalhes só vou mostrar como funciona e o código, pois acho que você já deve estar cansado de alguns processos utilizados em tutoriais anteriores e já deve saber como fazer.Mas se você é novo aqui no site e tal, veja meus tutoriais mais antigos é bem fácil, basta clicar aqui.

Demostração:
Aqui

HTML:

<ul id="navigation">
    <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
    <li class="highlight"><a href="#" class="services"><span>Services</span></a></li>
    <li class="highlight"><a href="#" class="portfolio"><span>Portfolio</span></a></li>
    <li class="highlight"><a href="#" class="about"><span>About</span></a></li>
    <li class="highlight"><a href="#" class="contact"><span>Contact</span></a></li>
</ul>

CSS

#navigation {
  list-style: none;
}

#navigation li {
  float: left;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
	position: relative;
	display: block;
	background: url(images/dragon-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}

#navigation a.services {
  background-position: -102px -140px;
  width: 115px;
}

#navigation .highlight a.services:hover,
#navigation a.services .hover {
  background-position: -102px -280px;
}

#navigation a.portfolio {
  background-position: -217px 0;
  width: 120px;
}

#navigation .highlight a.portfolio:hover,
#navigation a.portfolio .hover {
  background-position: -218px -280px;
}

#navigation a.about {
  background-position: -337px 0;
  width: 100px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -339px -280px;
}

#navigation a.contact {
  background-position: -437px 0;
  width: 115px;
}

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -440px -280px;
}

jQuery

 $(function () {
        if ($.browser.msie && $.browser.version < 7) return;

        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);
                    });
                });

    });

Se você quiser ver o vídeo do cara que recrio esse efeito – pois não foi eu – veja logo abaixo:

Ver video (Versão em flash)

IE6 – Se você usa o IE6 é recomendável ver este video (Versão em flash)

Qualquer dúvida posta um comentário.

2. Function free icon set Download
Uma ótima coleção por Liam McKay.

3. Pixelicious Download
150 ícones legais

4. Social Web Button Download
Uma coleção de ícones sociais, bom para blogs

5. Sweetie Pack Download
Sweetie Pack é simples e bonito com 100 ícones.

6. FeedIcons Download
Set para feed

7. Mini Icons Download

8. Tango Icons Set Download
Esse eu gostei pra caramba, é até usado no site do ubuntu se não me engano.

10. Aquaticus Social Icons Download
Mais ícones sociais para download (60×60, 48×48, 24×24, 16×16):