CSS3 é uma das novas tecnologias disponíveis mais legais para desenvolvedores web. Usando algumas das suas muitas características, é possível reproduzir os efeitos que você poderia ter feito anteriormente no Photoshop, com código CSS que é mais sustentável, mais rápido para carregar e legal com suas últimas tendências. Eu tava estudando o redesign do Blog para deixa-lo parecido com o abduzeedo.com, estudei backgrounds múltiplos, efeitos gradientes, sombras, transições, bordas tentando combiná-los ao novo layout do Blog. Riscando no caderno durante as aulas na universidade, procurando por estudos e exemplos legais de como usar o CSS então achei esse post no Net Tuts e decidi reposta-lo aqui.
Então aqui vão algumas ferramentas legais para quem gosta de blogs e de estudos web (:
Border Radius
Até agora, você provavelmente já ouviu falar sobre border-radius um milhão de vezes. É super fácil de usar e é suportado em todos os navegadores modernos. Se você ainda não conhece, o border radius ou raio das fronteiras é uma forma de criar cantos arredondados com CSS, sem usar imagens! Vamos dar uma olhada a sintaxe.
-webkit-border-radius: size;
-moz-border-radius: size;
border-radius: size; Existem três sintaxes que você vai precisar usar. A primeira é para os browsers baseados no WebKit, como o Safari e Google Chrome, o segundo é para os browsers baseados no Mozilla, como Firefox, e a última é a versão sem prefixo, por navegadores que suportam, inclusive IE9, Opera, Safari 5.
Aplicando um raio de 10 pixels de radius criando uma div esse é o seguinte efeito:
Muito fácil, agora vamos conhecer outra ferramenta!
Box Shadows
Box Shadow ou Sombra da Caixa é outra característica bem sustentada. Sua sintaxe é:
-webkit-box-shadow: offset_x offset_y blur_radius color;
-moz-box-shadow: offset_x offset_y blur_radius color;
box-shadow: offset_x offset_y blur_radius color;Mais uma vez temos que usar os prefixos fornecedor para Webkit e Mozilla. O primeiro e segundo parâmetros da propriedade box shadow são as posições de deslocamento a partir da esquerda e a outra coordenada é de cima do elemento. A definição de um valor positivo a essas propriedades se move a sombra para a direita e para baixo do elemento, e estabelecendo um valor negativo move a sombra para a esquerda e para cima do elemento. O blur_radius é a quantidade de desfoque que você deseja adicionar à sua sombra (você também pode construir luzes com o blur_radius). Finalmente, o último parâmetro é a cor que você quiser dar a sombra. Adicionando uma sombra para o nosso div anteriormente utilizado arredondadas irá criar um belo efeito.
-webkit-box-shadow: 5px 5px 10px #555;
-moz-box-shadow: 5px 5px 10px #555;
box-shadow: 5px 5px 10px #555;
Outro recurso elegante para box shadows CSS é a palavra-chave inset. Ao inserir a palavra-chave, a sombra será processada dentro da caixa, e não fora. Isso pode criar uma aparência agradável deprimido, especialmente para botões. Aqui está o nosso div com o exemplo ativo:
-webkit-box-shadow: 0 0 20px #333 inset;
-moz-box-shadow: 0 0 20px #333 inset;
box-shadow: 0 0 20px #333 inset;
O último recurso da box shadows que vale a pena mencionar é a possibilidade de ter múltiplas sombras no mesmo elemento. Isto é muito útil e pode eliminar a conta de marcação extra em seu HTML apenas para aplicar uma sombra adicional. Tudo que você precisa fazer para criar sombras múltipla é separá-los com vírgulas. Aqui está um exemplo:
-webkit-box-shadow: 0 0 20px #333 inset,
20px 15px 30px yellow,
-20px 15px 30px lime,
-20px -15px 30px blue,
20px -15px 30px red;
-moz-box-shadow: 0 0 20px #333 inset,
20px 15px 30px yellow,
-20px 15px 30px lime,
-20px -15px 30px blue,
20px -15px 30px red;
box-shadow: 0 0 20px #333 inset,
20px 15px 30px yellow,
-20px 15px 30px lime,
-20px -15px 30px blue,
20px -15px 30px red;
Text Shadows
Text shadow é como box shadow, só que a sombra será gerada aos texto em vez do elemento inteiro. Infelizmente esse recurso não é suportado para o IE, mas com o lançamento do IE9 espero que ele possa ser inserido de forma que todos os navegadores assim tenham suporte ao Text Shadow!
text-shadow: offset_x offset_y blur_radius color;As opções de Text shadow são as mesmas para a Box shadow, exceto que não há suporte inserção de sombras no texto. Aqui é uma demonstração simples:
color: #fff /* text color to white */
text-shadow: 0 0 50px #333; 
Tal como acontece com no Box shadow, é possível ter várias sombras de texto apenas, separando com vírgulas. Aqui está um exemplo que cria um efeito de texto em chamas.
text-shadow: 0 0 4px #ccc,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -18px 18px #f20; 
A ferramenta Text shadow é incrível, pode se fazer muito com ela, eu uso muito a ferramenta aqui no Blog, complementei com a ferramenta de transição que não tem suporte no Mozilla e nem IE apenas para os navegadores que dão suporte a WebKit.
Gradients
Gradientes são um dos mais poderosos recursos disponíveis para você se você quiser criar esses efeitos impressionantes. Embora o apoio completo para os navegadores não existe, você sempre pode dar um estilo de contingência para navegadores sem suporte. Lembre-se: Websites do not need to look the same in every browser. Existem dois tipos de gradientes que você pode criar: gradientes lineares e gradientes radiais. Como você poderia esperar, mover gradientes lineares ao longo de uma linha reta e gradientes radiais ir ao redor de um círculo.
Gradientes podem ser usados em qualquer lugar você pode ter usado uma imagem antes para o fundo, borda, imagem ou lista de marcadores.
Infelizmente para os desenvolvedores web, existem duas sintaxes diferentes: um para o Mozilla e outro para Webkit.
Sintaxe para Webkit:
Safari e Chrome ambos utilizam o motor de renderização Webkit, para que eles sempre usam a mesma sintaxe. Sua sintaxe gradiente é muito simples:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)Webkit usa a mesma sintaxe mesma para ambos os gradientes lineares e radiais. Basta alterar o tipo de parâmetro para alternar entre elas.
Sintaxe para Mozilla:
Firefox usa sintaxes distintas para gradientes linear e radial, sendo que ambos são muito diferentes da sintaxe Webkit.
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]*)
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)Vamos olhar para essas sintaxes separadamente.
Linear Gradients:
Por simplicidade, aqui está apenas uma sintaxe Webkit para gradientes linear.
-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)
-moz-linear-gradient(angle start_x start_y, stop, stop...)Na sintaxe WebKit: Os parâmentros start_x e start_y especifica a posição inicial do gradiente, e end_x e end_y especifica a posição final do gradiente. Você pode usar qualquer um dos valores de dimensão CSS padrão, incluindo percentagens, bem como as palavras-chave esquerda, cima, baixo, direita e centro como valores para esses parâmetros de posição. Stop é uma forma de você especificar as cores específicas para ser utilizado em pontos específicos ao longo do gradiente. Você pode usar muitas cores se quiser, mas você deve ter pelo menos dois: a cor inicial e final. Para cores adicionais, você pode usar a color-stop() função que permite estabelecer uma posição como uma porcentagem ou um número decimal entre 0 e 1, bem como uma cor. Por exemplo: color-stop (50%, black) criaria uma paragem de cor preta, exatamente a meio do gradiente. Ao invés de escrever 0% e 100% para as cores inicial e final, existe as funções de conveniência from() e to(). Tudo o que você tem que informar a esses comandos é a cor.
Sintaxe do Firefox: Tem muitas maneiras de realizar o mesmo objetivo. A única coisa que é estático sobre a sintaxe são as color-stop, que são apenas uma cor, seguida por uma posição como uma porcentagem. Para a posição inicial e final, você pode sair fora de 0% e 100%, e se você deixar a posição de fora de qualquer uma das paragens de outra cor, eles são distribuídos uniformemente ao longo do gradiente. Ao contrário do Webkit sintaxe, a sintaxe do Firefox não tem uma posição final, apenas uma posição de partida e um ângulo. O gradiente será executado a partir da posição inicial no ângulo especificado. Se você deixar o ângulo para fora, ele vai ficar perpendicularmente a partir desse ponto. Se você deixar de fora o ponto de partida todos juntos, o gradiente será executado a partir de cima para baixo. Esta sintaxe é uma espécie de confusão e um pouco menos flexível que a sintaxe simples do Webkit, por isso é melhor para aprender por exemplo.
Aqui está um exemplo simples de gradientes CSS em ação. Este gradiente vai do canto superior esquerdo para o canto inferior esquerdo (em outras palavras, de cima para baixo) em vermelho ao branco.
-webkit-gradient(linear, left top, left bottombottom, from(red), to(white));
-moz-linear-gradient(red, white)Definir essa propriedade como o fundo de uma div, obtemos o seguinte resultado:
Ao adicionar uma color-stop e mudando o ângulo do gradiente, podemos obter um efeito diferente.
-webkit-gradient(linear, left top, rightright bottombottom, from(red), color-stop(50%, white), to(red));
-moz-linear-gradient(left top, red, white, red);
Radial Gradients:
Aqui está a sintaxe para gradientes radiais em Webkit.
-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
outer_circle_center_x outer_circle_center_y, outer_circle_radius,
stop, stop...)E essa a sintaxe do Firefox.
-moz-radial-gradient(center_x center_y, shape size, stop, stop...)A sintaxe Webkit: um pouco mais complicada do que a sintaxe gradiente linear, mas os mesmos princípios ainda se aplicam. gradientes Radial no WebKit tem dois círculos: um círculo e um círculo de partida final. Você especifica o centro X e Y posições para cada um destes círculos junto com seus raios. Finalmente, você especificar a color-stop da mesma forma que você fez para gradientes linear.
A sintaxe Firefox: Semelhante à sintaxe para gradientes linear em que todas as suas partes, exceto o color-stop pode ser deixado de fora. Você pode especificar o centro X e Y posições do gradiente muito parecido com o círculo íntimo de coordenadas na sintaxe do Webkit, mas não há círculo exterior em Firefox. Em vez disso você pode especificar um tamanho e forma do gradiente. A forma pode ser um círculo ou uma elipse, o último dos quais atualmente não é possível criar em Webkit. O tamanho aceita muitas palavras diferentes, mas não um tamanho de pixel como você poderia esperar. Você pode ler sobre o que cada uma dessas constantes fazer no Mozilla Developer Center. Para este tutorial, vamos apenas usar os padrões. Mais uma vez, se você sair do centro de posições X e Y, eles vão ser assumido como sendo o centro do objeto que você está preenchendo com um gradiente. Se você deixar de fora a forma e tamanho, o gradiente será assumido como um círculo que enche a caixa inteira.
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
-moz-radial-gradient(white, red)Se aplicarmos esse gradiente para o fundo de uma div, é isso que teremos.
Backgrounds Múltiplos
Várias formações se torna mais fácil para criar efeitos complexos em CSS sem precisar criar marcação adicional no seu HTML. Tendo apoio, isso significa que elementos podem ter vários gradientes e fundos de imagem juntamente com a cor de fundo padrão. Não existe diferença na sintaxe de vários fundos de fundos único - apenas vírgula as separam!
Aqui está um exemplo de uma div com um fundo gradiente e um efeito agradável textura usando uma imagem:
background: url(noise.png), -webkit-gradient(linear, left top, left bottombottom, from(#999), to(#333));
background: url(noise.png), -moz-linear-gradient(#999, #333);Nós temos que declarar duas vezes, pois, como vimos, há uma sintaxe diferente gradiente para cada browser. Isto cria o seguinte efeito:
Combinando o Poder: Construindo um botão com CSS3
Agora que temos cinco grandes ferramentas à nossa disposição, vamos combiná-las para produzir um efeito ainda mais impressionante.
Existem tantos tipos diferentes de botões que você pode optar no design. Para ser simples, vamos imitar algo que já existe - o estilo Mac OS X de botão.
Vamos começar com o nosso código HTML para este demo. É realmente muito simples, apenas dois DIVs e algum texto.
<div class="panel">
<div class="button">Button</div>
</div> Agora vamos começar com o nosso estilo CSS básico. Primeiro, vamos ao painel.
.panel {
background: -webkit-gradient(linear, left top, left bottombottom, from(#bbbcbb), to(#959695));
background: -moz-linear-gradient(#bbbcbb, #959695);
background-color: #b7b9b7;
width: 100px;
}O painel é apenas um recipiente bonito para o nosso botão. Tem um gradiente que vai de cima para baixo entre as duas cores cinza bem agradável. Para os browsers que não suportam inclinações, um retorno background-color é dado.
Agora, vamos olhar para o CSS do nosso botão.
.button {
display: inline-block;
margin: 20px;
padding: 3px 6px;
font-family: 'Lucida Grande', Arial, sans-serif;
font-size: 13px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.6);
background: -webkit-gradient(linear, left top, left bottombottom, from(#fbfcfb), to(#9d9e9d));
background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
background-color: #c0c2c0;
text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}Há uma quantidade razoável de código aqui, que usa todas as ferramentas que eu descrevi acima, exceto para os fundos múltiplos. Existem várias seções para esse código, que terá um por um. As duas primeiras linhas são apenas algumas informações sobre o layout simples. Definindo o botão para display: inline-block faz com que seja automaticamente estendido para caber o conteúdo, não importa o quanto de texto você coloque no botão.
A próxima seção apresenta algumas informações de fonte para o botão. Finalmente, na terceira seção, nós começamos a usar a nossa ferramenta em primeiro lugar: o border-radius. No caso do nosso botão, damos 3px de radius. Observe que estamos usando uma cor RGBA. Isso nos permite fazer a cor parcialmente transparente, como fazemos aqui, criando uma cor acinzentada. Na próxima seção de código, criamos o fundo do botão. Aplicamos um fundo gradiente, bem como uma cor sólida para os navegadores que não suportam gradientes ainda. Em seguida, use Text shadow para dar ao texto uma aparência de como estivesse gravado no botão. Mais uma vez usamos RGBA aqui dar uma parcialmente transparente branco para o text shadow. A seção final do código cria uma box shadow. Isso não faz bem o estilo de borda, mas sim um efeito de luz ao nosso botão como se ele estivesse gravado ao fundo. Este é um truque útil - Eu uso muito. Finalmente, a última seção do código CSS é um truque legal que impede a seleção de texto nos navegadores Firefox e Webkit e define o cursor para a seta padrão ao invés do cursor de seleção de texto.
Até agora, este código faz um botão como este:
OK, mas ainda podemos mais! Vamos fazer um efeito de depressão no botão.
.button:active {
background: #B5B5B5;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
black 0px 1px 3px inset,
rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
black 0px 1px 3px inset,
rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
black 0px 1px 3px inset,
rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
}Quando o botão é pressionado, vamos mudar algumas coisas. Primeiro, vamos definir o fundo de uma cor lisa, remover o gradiente que tínhamos definido. Isto é porque nós estaremos criando o olhar deprimido com a Box shadow, em vez de um gradiente. A próxima coisa que fazemos, é definido que a sombra, ou melhor, várias sombras. A sombra em primeiro lugar na lista é a mesma que nós tinhamos no estado normal: o destaque na parte inferior do botão. A segunda e terceira sombras são as únicas que tornam o nosso botão como se estivesse pressionado. A primeira delas é uma sombra negra que está inserida estabelecidas a partir de 1px top e tem 3px de blur. A última sombra também é preta, mas um preto ligeiramente transparente que seja criado o fundo de 5px com 12px de blur. Isso cria a aparência escura no fundo do botão quando é pressionado. A última coisa que precisamos fazer quando este botão é pressionado para baixo é só diminuir a opacidade da sombra de texto por um ponto para que ele não se destaque.
É isso aí! (: Nosso botão está completo. Aqui está a versão pressionada:
Conclusão
Substituir as imagens por CSS3 tem muitos benefícios. Faz o seu trabalho como desenvolvedor web mais fácil desde que você não precise abrir o Photoshop toda vez que você precisa fazer uma alteração em sua interface. Faz o seu site ou carregar o aplicativo web mais rápido, uma vez que não precisa baixar tantas imagens pesadas. E isso permite que você crie uma experiência mais rica, interativa e conveniente para os usuários de tal forma que eles vão continuar voltando.
Vou deixar você com um pouco de inspiração de coisas que você poderia fazer com CSS3. Estes não são necessariamente os exemplos simples, mas eles mostram que é possível com um pouco de trabalho.
Essa demonstração foi criada por Jeff Batterton, é um iPhone criado com puro CSS3 - sem nenhuma imagens utilizada. É muito impressionante, utilizando gradientes CSS, a text-shadow, box-shadow, transições e transformações. Infelizmente, atualmente, ele apenas aparece corretamente em navegadores Webkit como o Safari e Chrome. Você pode tentar fazer no Firefox tentando e usando de CSS!
Outra demonstração, talvez ainda mais surpreendente foi escrito por Louis Harboe. É uma recriação de alguns dos ícones do IOS em CSS puro, muito realista! Esta demo também só funciona em navegadores baseados Webkit. Se você quiser saber mais sobre como alguns desses ícones foram reproduzidos, você pode ler no blog Louis Harboe, onde ele descreve o processo.
Postar um comentário