Faça o download de ações para turbinar seu Photoshop

Ações no Photoshop podem ser extremamente úteis quando você deseja realizar os mesmos efeitos em várias imagens. Tempos atrás escrevi um artigo aqui no site mostrando como criar uma ação no Photoshop.

Se você é novato em Photoshop provavelmente não sabe instalar actions, então recomendo a leitura do artigo Como Instalar Actions. Artigo bem simples e muito objetivo.

O site 2expertsdesign criou uma lista de 50 ações impressionantes. Ações para aplicar diversos efeitos em imagens apenas pressionando a tecla play da paleta ações do Photoshop. Entre os efeitos você encontra ações para suavizar tom de pele, intensificar cor dos olhos, envelhecer, transformar fotos em desenho… entre muitos outros.

Confira a lista de 50 ações para photoshop.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Os melhores tutoriais de Photoshop a partir de 2010
• 22 web sites desenvolvidos com HTML5 e CSS3
• 35 tutoriais de layouts para sites no Photoshop
• Mais de 600 Brushes com efeito de luz para Photoshop
• Envelhecer fotos no Photoshop
• Competição de Photoshop – 460 euros em prêmios!
• Os 10 melhores e os 10 piores sites da Web
• Mais memória para o Photoshop

A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

A especificação da HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = "N". A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

<nav>
    <p>
        <a href="http://www.google.com.br" accesskey="G">Google</a>
        <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a>
        <a href="http://www.facebook.com" accesskey="F">Facebook</a>
    </p>
</nav>

Na HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0″.

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
	margin-left: 0.3em;
	content: "[" attr(accesskey) "]";
	}

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

Com o plugin Quick Pagination você é capaz de criar paginações rapidamente em suas listas. Ótimo para converter listas extensas em listas menores. O plugin ainda permite ajustar alguns dos seus parâmetros adicionais. Você pode especificar a navegação na parte superior, inferior ou ambos, pode também especificar o número de itens a serem exibidos.

Lembrando que para usar esse plugin você deve fazer o download da biblioteca jquery, ou carregar o arquivo a partir do site do Google.

Como usar jQuery Quick Pagination

Exemplo de marcação HTML

<ul class="pagination1">
	<li>1 - Item 1 de 25</li>
    <li>2 - Item 2 de 25</li>
    <li>3 - Item 3 de 25</li>
    <li>4 - Item 4 de 25</li>
    <li>5 - Item 5 de 25</li>
    <li>6 - Item 6 de 25</li>
....

Criando três exemplo de paginação

<script type="text/javascript">
$(document).ready(function() {
	$("ul.pagination1").quickPagination();
	$("ul.pagination2").quickPagination({pagerLocation:"both"});
	$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
});
</script>

Primeiro exemplo
Opção padrão mostrando 10 itens da lista e navegação na parte inferior.

Segundo exemplo
Mostrando 10 itens da lista e navegação na parte superior e inferior.

Terceiro Exemplo
Especificados 3 itens na lista e navegação na parte superior e inferior.

Referências:

• http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/
• http://archive.plugins.jquery.com/project/quick_paginate

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Forte abraço e até a próxima!

Isso vai interessar você também

• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Como criar um layout de 3 colunas com CSS
• 50 ações incríveis para turbinar seu Photoshop
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas

HTML5 evoluiu bastante e tem uma série de novidades entre elementos e atributos para formulários. Nesse artigo mostro um pouco sobre validação dos campos de um formulário. Acredito que em um futuro próximo os desenvolvedores não precisaram escrever o código de validação de formulário em JavaScript, por exemplo, já que os navegadores serão capazes de fazer tudo isso para nós.

Atributo required

Utilizamos esse atributo para informar ao navegador que um elemento do formulário é de preenchimento obrigatório, ou seja, o usuário não consegue enviar o formulário se não preencher o campo com o atributo required. Seu uso é exclusivo com os elementos input, select e textarea.

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

    <form method="post" action="">
    <label for="nome">Nome: </label><input id="nome" type=text required name=nome>
    <input type=submit value="OK">
    </form>

Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente.

type=”email”

Atributo type de um input com a opção igual a email significa definir o campo para receber um endereço de e-mail válido. A forma de validação não verifica se o e-mail digitado realmente existe, mas sim se o formato está correto. Exemplo de um formato de email aceito: teste@teste.com.

<form method="post" action="">
    <label for="email">E-mail: </label><input id="email" type=email required name=email>
    <input type=submit value="OK">
    </form>

Alerta para o usuário caso não seja digitado nada no campo input.

Alerta para o usuário caso não seja digitado um formato de e-mail no campo input.

Um recurso CSS3 pode ser usando para identificar se o elemento do formulário recebeu ou não um dado válido. Esse recurso é o pseudoclasse :valid e :invalid

Assim que o usuário digitar um dado válido, o navegador altera o pseudoclasse de :invalid para :valid. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usuário digitar um formato de e-mail o campo é alterado para verde.

Veja o CSS:

    #email:valid {background:#006600;color:#fff }
    #email:invalid {background:#990000; color:#fff}

type=”url”

Um campo input com type igual a url recebe apenas url’s no seu formato correto, ou seja, http://www.site.com, http://www.site.com.br etc.

    <form method="post" action="">
    <label for="site">Site: </label><input id="email" type=url required name=site>
    <input type=submit value="OK">
    </form>

Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inválido.

pattern = “Expressão”

Com uso do atributo pattern você pode exigir que o usuário digite valores em um padrão feito com expressão regular, ou seja, o que for digitado no compo input deverá satisfazer a expressão regular criada pelo desenvolvedor.

Explicarei o atribudo criando uma expressão para entrada de um número de telefone. O valor inserido no campo de input deverá iniciar com (xx) logo terá um espaço em branco com uma sequência de quatro dígitos, um traço, e para terminar mais uma sequência de quatro dígitos, ficando assim: (xx) xxxx-xxxx.

Abaixo o código para criar a condição descrita acima.

<form>
   <label>Telefone: <input required name="tel" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
  </form>

\([0-9]{2}\) usuário deve digitar dois números de 0 até 9 entre parênteses.

[\s][0-9]{4}-[0-9]{4} um espaço e duas sequência de números divididas por um traço.

Em HTML5 há um valor para o atributo type que é o tel. Ao utilizar esse valor não há máscara de formatação ou validação, já que não há um padrão para números de telefones. Ele serve apenas para informar que o valor do campo é um número de telefone.

Abaixo outro exemplo utilizando o atributo pattern, agora validando CEP

<form>
   <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
</form>

novalidate=”novalidate”

Quando presente dentro do elemento form, especifica que os elementos do formulário não devem ser validados quando submetidos mesmo que tenham em seu type atributos iguais a email, url, etc.

<form action=" " novalidate="novalidate">
  <label>nome: <input name="nome" required></label>
  <label>email: <input name="email" type="email" required></label>
  <input type="submit" name="action" value="Enviar">
</form>

No exemplo acima mesmo que o usuário clique no botão enviar sem preencher os campos com required o formulário será submetido. Isso porque passamos o valor novalidate="novalidate".

Compatibilidade entre navegadores

Pelos testes que fiz a validação funcionou perfeitamente nos navegadores Chrome, Opera e Firefox em suas últimas versões. Navegadores como Safari e Internet Explorer não foram capazes de reconhecer tais elementos da HTML5.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

propriedade margin

A propriedade margin do CSS define as dimensões das margens de um elemento CSS. Elas compõem as áreas verticais e horizontais entre os elementos. Caso os elementos não tenham margens em torno deles, eles vão encostar uns nos outros. Alguns elementos têm margens por padrão, ou seja, mesmo que você não adicione margem o elemento já é criado com margens. Cito como exemplo os elementos de cabeçalhos h1, h2… h6.

Abaixo um exemplo das margens em CSS

A propriedade margin em CSS define o espaço exterior entre os elementos. Compreende também o espaçamento entre os elementos e tela do navegador do usuário, por exemplo, o desenvolvedor deseja que um elemento fique a 20px do topo da página do usuário.

Como definir margens em CSS

As margens podem ser aplicadas nos quatros lados de um elemento HTML. Superior, direita, inferior e esquerda.

• margin -top: espaçamento para a parte superior;
• margin -right: espaçamento para o lado direito;
• margin -bottom: espaçamento para a parte inferior;
• margin -left: espaçamento para o lado esquerdo.

Esta propriedade CSS, assim como outras, aceita a sintaxe abreviada.

Margens iguais nos quatro lados do elemento.
margin: 30px;

Margem superior e inferior de 10px. Margem esquerda e direita de 15px.
margin: 10px 15px;

Margem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.
margin: 10px 15px 20px;

Margem superior de 5px. Margem direita de 10px. Margem inferior de 15px. Margem esquerda de 20px;
margin: 5px 10px 15px 20px;

Propriedade padding em CSS

A propriedade do CSS padding define o espaçamento entre o conteúdo e a borda de um elemento HTML. Esta borda por padrão não aparece para o usuário. É a área que delimita um elemento HTML. É o espaço horizontal e vertical em torno da área de conteúdo de um elemento, por exemplo, espaçamento entre as bordas de uma div e o parágrafo contido dentro da mesma.

Abaixo um exemplo da propriedade CSS padding

Repare que a propriedade padding ao contrário da propriedade margin define o espaçamento interno do elemento. NO exemplo acima com uso do padding conseguimos posicionar o texto dentro do elemento.

Como definir padding em CSS

Igual a propriedade margin podemos definir espaçamento diretamente para um lado do elemento:

• padding-top: espaçamento para a parte superior;
• padding-right: espaçamento para o lado direito;
• padding-bottom: espaçamento para a parte inferior;
• padding-left: espaçamento para o lado esquerdo.

A propriedade CSS padding , assim como outras e margin, aceita a sintaxe abreviada também.

Espaçamentos iguais nos quatro lados do elemento.
padding: 30px;
Margem superior e inferior de 10px. Margem esquerda e direita de 15px.
padding: 10px 15px;
Margem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.
padding: 10px 15px 20px;

Abaixo um exemplo mais completo

Concluindo, a margem define o espaço fora de seu box em relação a outros elementos, exemplo, espaço entre divs, espaço entre um elemento h2 e um parágrafo, etc. Já o padding define o espaço entre o elemento e o seu conteúdo, exemplo, distância da borda da div e seu conteúdo. Espero que com este arigo vocês tenham compreendido a diferença das duas propriedades, podendo assim utilizar de forma mais eficaz as duas propriedades.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Nenhum post relacionado

Os 50 melhores icones de 2011

Quem desenvolve layouts para web sites ou interface de softwares sabe a importância dos ícones para representar categorias, áreas, ações dos usuários (inserir, excluir notícias…).

O site creativenerds postou uma excelente coleção dos 50 melhores conjuntos de ícones de 2011. Todos os ícones podem ser baixados gratuitamente utilizados em sites pessoais, comerciais, trabalhos, etc.

Veja a coleção de ícones.

Isso vai interessar você também

• Nenhum post relacionado

<div class="container">
	<div class="box"><div class="cover_pan"></div>
</div>

Aplicamos no elemento marcado com a class box uma imagem de fundo (404.png). Ela funcionará como uma máscara.

body {color: #fff; margin: 0;background: url(img/texture.png) repeat;}
.container {width: 960px;margin:50px auto; text-align: center; font: 13px/22px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #000;}
.box {
	background: url(img/404.png) no-repeat 0 0;
	border-bottom: 5px solid #000;
	height: 343px;
	margin-bottom: 25px;
 	padding-bottom: 50px;
}

O código CSS abaixo é responsável por fazer grande parte da animação. Definimos a imagem que será rolada no fundo, nesse caso a imagem covers.jpg, definimos o tempo da animação e que a mesma será de forma contínua, ficará em um loop infinito.

.cover_pan{
	background: #fff url(img/covers.jpg) repeat 1055px bottom;
	height: 343px;
	margin-left:1px;
	overflow: hidden;
	position: relative;
	width:99.5%;
	z-index: -1;

	-moz-animation-name: pan;
	-moz-animation-duration:40s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	-webkit-animation-name: pan;
	-webkit-animation-duration:40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

Esta é uma das implementações mais simples do código que você terá que aplicar. Estamos deslizando a posição de fundo. Cover_pan da direita para a esquerda.

@-moz-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

@-webkit-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

Você pode baixar arquivos usados neste tutorial para estudar.
Artigo Original.
Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• Suporte dos navegadores para propriedades CSS3
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS

Elemento section

A seção (elemento SECTION ) é uma parte mais genérica de um documento. É geralmente usado para conter outras partes de sua página. Como o próprio nome diz, ele pode conter qualquer tipo de conteúdo. Em um sentido mais amplo do termo, este elemento é uma versão mais semântica de uma div (que significa “divisão”). Outro uso comum deste elemento está relacionado a estrutura do conteúdo. O objetivo desse elemento é marcar uma seção da página. Seção pode ser um grupo de conteúdo de um assunto específico.

Artigo sobre Como usar o elemento SECTION do HTML5.

Exemplo:

<section id="ch1">
  <header>
    <hgroup>
      <h1>Titulo</h1>
      <h2>Descrição</h2>
    </hgroup>
  </header>
  <!--conteúdo-->
  <footer>
    <!--rodapé -->
  </footer>
</section>

Elemento article

Ao contrário de seção, artigo é um componente mais específico. Sua finalidade é envolver os principais conteúdos do seu documento em seções lógicas. Entradas de blog, artigos, o conteúdo da página podem ser incluídos dentro deste elemento. Combinado com o elemento SECTION, que completa a estrutura geral de um documento HTML5.

Exemplo usando os dois elementos.

<section id="ch1">
  <header>
    <hgroup>
      <h1>Título</h1>
      <h2>Descrição</h2>
    </hgroup>
  </header>
  <article>
    <!--conteúdo-->
  </article>
  <footer>
    <!--rodapé-->
  </footer>
</section>

Podemos usar esses elementos da seguinte forma também:
Observe o uso do elemento hgroup que serve para agrupar os elementos de H1 a H6

<article>
 <hgroup>
   <h1>Título do artigo</h1>
   <h2>subtítulo do artigo</h2>
 </hgroup>
   <p>parágrafo...</p>
 <section>
  <h3>Título da primeira seção</h3>
  <p>Conteúdo da primeira seção</p>
 </section>

 <section>
  <h3>Título da segunda seção</h3>
  <p>Conteúdo da segunda seção</p>
 </section>
</article>

Isso vai interessar você também

• Nenhum post relacionado

CSS3 continua a ganhar a cada dia mais e mais popularidade, está presente na maioria dos sites de quem trabalha com web, apesar de ainda dizerem ser cedo para aprender e aplicar as CSS3, já que as propriedades e seletores não são totalmente suportadas por todos os navegadores.

Eu acredito que já pode ser utilizada, até porque a cada dia os navegadores estão mais compatíveis com as propriedades e seletores CSS3. Para dar uma idéia do que podemos conseguir com a nova versão das CSS, dê uma olhada nessas úteis ferramentas online utilizadas para gerar código CSS3.

CSS3 Button Maker

Ferramentas CSS3 Tricks

Crie um botão usando apenas CSS. Através dos botões, barras deslizantes contidas no painel principal do site você vai escolhendo o estilo desejado do botão. Em seguida você pode copiar o código fonte e usar em seus projetos

CSS3 Generator

Ferramentas CSS3, Tricks Generator

Selecione em uma lista a propriedade CSS3 desejada, preencha alguns parâmetros da propriedade selecionada e pronto, o aplicativo mostra o código gerado para você copiar e colar no arquivo de estilos do seu site. A visualização das mudanças é imediata.

CSS3 Please

Ferramentas CSS3 Please, edite as principais propriedades CSS3

Aqui você pode editar os valores das principais propriedades CSS3 que estão sublinhadas. Depois é só copiar e colar no seu arquivo de estilos CSS. O bom é que quando você alterar a propriedade por exemplo, -moz-box-shadow o aplicativo atualiza automaticamente a propriedade -webkit-box-shadow.

CSS3 Gradient Generator

Ferramentas CSS3, crie seu próprio Gradiente

Muitos não sabem, mas é possível criar efeitos de gradientes usando CSS. Veja esse simples gerador de gradiente CSS3.

CSS3 Transforms

Ferramentas CSS3 Westciv

Com essa ferramenta você pode fazer diversas transformações no conteúdo, tais como, rotação e inclinação. Ele também gera o código correspondente ao efeito escolhido.

CSS3 Selectors Test

Ferramentas CSS3 Selectors Test

Faça testes de seletores CSS3. A ferramenta executa automaticamente um grande número de testes que determinam se o seu navegador é compatível com um grande número de seletores CSS. Caso não seja compatível com um seletor especial, o mesmo é destacado. Você pode clicar em cada seletor CSS para ver os resultados, incluindo um pequeno exemplo e uma explicação para cada um dos testes.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• 10 efeitos com propriedades CSS3
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Suporte dos navegadores para propriedades CSS3
• Como criar um layout de 3 colunas com CSS
• Mostrar legenda ao passar o mouse sobre imagens
• Gerador online de gradiente CSS3
• Alterando cor da seleção padrão do texto com CSS3
• Exemplos de menus em CSS
• Comentários condicionais para o Internet Explorer