Posted by on May 4, 2011 in Blog, css | 12 comments

Fala Pessoal, a dica de hoje é uma dica para desenvolvedores html/css que estão começando a aprender CSS3. Hoje em dia já tem como fazer muitas coisas bacanas apenas utilizando os atributos da nova linguagem CSS.

Para não chegarmos ao final do artigo e eu falar PESSOAL, o estilo não funciona para o IE! e te decepcionar, já falo agora :) O botão fica bacana, espaçado, com um degradee bacana, mas sem arredondados e sem o box-shadow, caso você queira ou tenha que adaptar para o IE, sugiro você conhecer o http://css3pie.com ele tende a resolver seu problema usando o htc (HTML Components) :)

HTML simples dos botões

Blog do Bernard De Luna

Blog do Bernard De Luna
Blog do Bernard De Luna

Coloquei horizontal rules entre os links só para marcar para o exemplo, em um website não vejo sentido em fazer isso.

CSS padrão usado no exemplo

* {	margin: 0;	padding: 0;	list-style: none;	border: 0;	text-decoration: none;outline:0;}
body {background:#F7F7F7; padding:100px;}
a {margin-bottom: 30px;}

CSS 1º botão – Um botão do estilo da Globo.com

Esse estilo é usado em muitos projetos lá fora, mas aqui no Brasil foi mais popularizado pela Globo.com, o Grooveshark também utiliza esse estilo para botões.

.bt {
	display: inline-block;
	height:auto;
	padding: 40px 50px;
	font:normal 36px/1.1em arial;
	border:1px solid #d0d0d0;
	border-top-color:#ececec;
	border-bottom-color:#909090;
	color:#909090;
	background:#ffff00;
	background: -moz-linear-gradient(top, #fff 60%, #e7e7e7);
	background: -webkit-linear-gradient(top, #fff 60%, #e7e7e7);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e7e7e7');
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.bt:hover {
	background:#fff;
}

Pontos a destacar: border-radius, box-shadow e linear-gradient

border-radius

Lembra quando você utilizava imagem para fazer curva por causa do layout? E depois Javascript para arredondar as pontas? Isso hoje em dia não é mais necessário para a maioria dos navegadores que agora renderizam a curva direto pelo CSS. Veja o código que precisa ser inserido:

	/* CSS3 */
	border-radius: 10px;
	/* firefox*/
	-moz-border-radius: 10px;
	/* browsers webkit: chrome, safari*/
	-webkit-border-radius: 10px;
	/* Konqueror*/
	-khtml-border-radius: 10px;

Para você que não sabia que existia um KHTML e nunca ouviu falar em konqueror, é o browser opensource usado em linux, o KHTML que deu origem ao Webkit, motor renderizador usado pelo browser safari da Apple e pelo Chrome do Google. O que muitos não sabem é que o próprio Konqueror já pode utilizar o webkit (evoluiu muito mais que o KHTML) e fica bem mais rápido, esse artigo explica melhor.

box-shadow

Sombra! Você pode adicionar sombra nos seus objetos HTML de forma bem simples!

	box-shadow: 0 2px 3px 0 #000;
  • Primeiro valor: posicionamento horizontal da sombra
  • Segundo valor: posicionamento vertical da sombra
  • Terceiro valor: Blur (névoa) da sombra
  • Quarto valor: Spread (Propagação) da sombra
  • Quinto valor: Cor da sombra

OBS1: Vale lembrar que assim como o border-radius, você pode acrescentar os prefixos “-moz” e “-webkit” para fazer o código funcionar para os motores de renderização do firefox e chrome/safari respectivamente.

RGBA Atributo alpha (opacidade) direto na cor por CSS3

	background-color: rgba(0,0,0,.2);

Ou seja, definimos os valores RGB(red green blue) e por último a opacidade.

OBS2: Você pode utilizar o valor “inset” para atribuir a sombra de maneira interna, assim como atribuir múltiplas sombras através da vírgula, como feito no botão 2.

	box-shadow: inset 0 2px 20px rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.2);

linear-gradient

Uma das coisas que eu mais gosto no CSS3 até o momento, poder aplicar degradee utilizando o gradient, seja linear ou radial.

linear-gradient(top, #fff 60%, #e7e7e7);

O interessante é que você pode através de um valor númerico após a cor definir o quanto de espaço essa cor ocupará. além de poder usar também o RGBA para fazer uma brincadeira ainda mais interessante. Para comparar a utilização das cores para o degradee, compara o botão 01 (simples) com o botão 03(avançado).

Conclusão e exemplos

Com esses novos tipos de atributos reunidos, você conseguirá garantir todo o estilo de botões e outras áreas do seu projeto web sem recorrer a imagens e layouts engessados. Para desenvolvedores avançados, isso combinado a jQuery é um prato cheio de animações e experiências que o usuário poderá viver em sua página.

Seguem o CSS dos dois botões restantes:

CSS 2º botão – Um botão 3D

.bt-02 {
	display: inline-block;
	height:auto;
	padding: 40px 50px;
	font:normal 36px/1.1em arial;
	border:1px solid #d0d0d0;
	border-top-color:#ececec;
	border-bottom-color:#909090;
	color:#909090;
	background:#fff;
	background: -moz-linear-gradient(top, #fff 60%, #e7e7e7);
	background: -webkit-linear-gradient(top, #fff 60%, #e7e7e7);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e7e7e7');
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 10px 10px rgba(0,0,0,.2), 0 7px 0px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 10px 10px rgba(0,0,0,.2), 0 7px 0px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.2);
}
.bt-02:hover {
	background:#e7e7e7;
	position:relative;
	top:5px;
	border-top-color:#909090;
	border-bottom-color:#ececec;
	-moz-box-shadow: 0 0 0 #fff;
	-moz-box-shadow: inset 0 2px 20px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 0 #fff;
	-webkit-box-shadow: inset 0 2px 20px rgba(0,0,0,.2);
}

CSS 3º botão – Um botão com cara de imagem

.bt-03 {
	display: inline-block;
	height:auto;
	padding: 40px 50px;
	font:normal 36px/1.1em arial;
	border:1px solid #d0d0d0;
	border-top-color:#ececec;
	border-bottom-color:#909090;
	color:#fff;
	background:#D5EFF7;
	background:-moz-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
	background:-webkit-linear-gradient(top, #D5EFF7 0px, #5AA2B9 51%, #4F92A7 47%, #94C9DA);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.bt-03:hover {
	background:#e3f4fa;
	background:-moz-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
	background:-webkit-linear-gradient(top, #e3f4fa 0px, #68b0c2 51%, #68b0c2 47%, #b1dce7);
}

O Front in Rio começou a divulgar o evento que será dia 4 de Junho. Além de convidá-los para ir, peço para quem tiver o interesse ir no Call4paperz para curtir a minha palestra. Quem preferir votar em outras não tem problema, tem muitos amigos com palestras boas concorrendo. Obrigado pessoal e até a próxima