Category Archives: HTML/CSS

CSS3Pie – CSS3 no IE

Posted on by
9

Já mostrei aqui no blog como usar border-radius no IE e agora mostro uma ferramenta mais completa para ultilizar os tais recursos do CSS3 no IE, este é o CSS3Pie que permite que o IE reconheça as seguintes propriedades:

  • border-radius
  • box-shadow
  • linear-gradient as background image

Exemplo de uso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.minhaclasse{
<strong><span style="color: #339966;">/*declarando as bordas arredondadas*/</span></strong>
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;<span style="color: #339966;">
<strong>/*declarando as sombra de caixas*/</strong></span>
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
<span style="color: #339966;"><strong>/*declarando gradiente*/
</strong></span>background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
<span style="color: #339966;"><strong>/*declarando o arquivo PIE.htc para corrigir o IE*/</strong></span>
behavior: url(/PIE.htc);
.minhaclasse{
<strong><span style="color: #339966;">/*declarando as bordas arredondadas*/</span></strong>
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;<span style="color: #339966;">
<strong>/*declarando as sombra de caixas*/</strong></span>
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
<span style="color: #339966;"><strong>/*declarando gradiente*/
</strong></span>background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
<span style="color: #339966;"><strong>/*declarando o arquivo PIE.htc para corrigir o IE*/</strong></span>
behavior: url(/PIE.htc);

Perceba que não há “magica” alguma para declarar o border-radius e o box-shadow, basta usa-lá normalmente, pois o behavior: url(/PIE.htc) se encarrega de fazer isso funcionar no IE. Já no background: linear-gradient tem a necessidade de incluir o -pie-background:, porém sua sintaxe de declaração é super simples assim como da propriedade “normal” ( background: linear-gradiente(<cor do topo>, <cor de baixo>)).

Há também o suporte a mais duas propriedades que são o border-image e multiple background images, mas não vou entrar em detalhes, pois o suporte ainda é parcial.

Na pasta de download vem outros arquivos além do PIE.htc, só é nescessário declarar o próprio, porém mantenha os outros arquivos na mesma pasta.

Para baixar e ver uma demostração o CSS3Pie veja o site da ferramenta.

Usando @font-face em todos os navegadores

Posted on by
8

Há alguns meses atrás fiz um posts sobre o Google Fonts, onde mostrei uma alternativa para usar fontes diferentes das que os usuários têm em suas maquinas. Neste tutorial vamos ver como usar em todos os navegadores (inclusive o IE6 ) a nova e utilíssima propriedade @font-face do CSS3, essa propriedade tem a função de carregar fontes externas, ou seja, fontes que o usuário não tem instaladas na sua maquina. Vamos ao tutorial:

Antes de tudo precisamos de uma fonte certo?!

Eu usei a SCARFACE.ttf, se quiserem usar outra, sem problema.

Agora a sintaxe:

1
2
3
4
5

@font-face {
    font-family: 'scarface';
    src: url('scarface-webfont.eot');
    src: local('scarface'), url('scarface-webfont.ttf') format('truetype');
}
@font-face {
	font-family: 'scarface';
	src: url('scarface-webfont.eot');
	src: local('scarface'), url('scarface-webfont.ttf') format('truetype');
}

Onde

  • font-family: ‘scarface’; , é o nome dado a fonte,
  • src: url(‘scarface-webfont.eot’); , é a fonte com o formato .eot, para que o IE reconheça,
  • src: local(‘scarface’),  caso a fonte esteja instalada na maquina do usuário, então carrega-se esta fonte e não a que esta no site,
  • url(‘scarface-webfont.ttf’) format(‘truetype’); a fonte no formato truetype, reconhecida por todos os navegadores decentes :D

Legal, mas como uso a fonte agora?

Simples, use a mesma propriedade (font-family) e coloque o nome que foi definido para ela, por exemplo:

1

h1{font-family: 'scarface', arial, sans-serif;}
h1{font-family: 'scarface', arial, sans-serif;}

Veja um exemplo:

Veja o @font-face funcionando

Dicas:

É interessante usar as seguintes definições, para fazer um “reset” e evitar que apareça de forma diferente em certos navegadores.

1
2
3

font-weight: normal;
font-style: normal;
line-height:normal;
font-weight: normal;
font-style: normal;
line-height:normal;

Para converter as fontes para .eot, você pode usar o serviço online – fontsquirrel

Isso é tudo pessoal, divirtam-se!

4 ferramentas de CSS online, que vão facilitar sua vida

Posted on by
Reply

Se você (assim como eu) já utiliza algumas propriedades  CSS3, mas em contrapartida precisa adaptar o layout ao IEca 6, as ferramentas que citarei a seguir o ajudarão nas duas coisas! vamos a elas então.

IE6 css fixer:

Esta ferramenta gera os hacks para IE6 necessários para corrigir a maioria dos problemas, como  a margem duplicada quando os elementos tem float(left ou right), transparência para imagens .png, zoom:1 para elementos com position:relative, entre outras gambiarras(:D), mas atenção ela não vai resolver seus problemas em 100% dos casos, porém ajuda muito você a localizar os erros. Você pode usar um arquivo .CSS, de uma URL, do seu computador ou colar o código no campo indicado no site.

CSS3 Generator:

Gera e mostra o resultado das novas propriedades do CSS3, além dos browsers que suportam aquela nova propriedade.

Pure css menu:

Gera menus dropdown em CSS, com opção de formação de itens, cor de fundo, fonte, além de disponibilizar alguns modelos prontos e os arquivos gerados tem compatibilidade com os IEs, para obter o código é necessário se registrar.

CSS Compressor:

Compactador de arquivos .CSS que basicamente retira os espaços e quebras de linhas inúteis deixando seu arquivo .CSS mais leve, no modo avançado há a possibilidade maior de customização, como por exemplo, retirar os espaços entre os caracteres :  ;  {  } , entre os seletores e propriedade.

Usando border-radius no IE

Posted on by
29

Para aqueles que odeiam o IE (como eu!) e ficam P… da vida, quando precisam fazer aquela borda arredondada e acabam tendo que usar imagens, porque a M… do IE não aceita essa nova propriedade do CSS, podem ficar tranquilos agora, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso:

o modo de usar é muito simples:

assim como para Safari, Chrome e Firefox usamos, por exemplo:

1
2
3
4
5

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}

para usar no IE basta chamar no CSS o arquivo .htc

1
2
3
4
5
6

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
<strong>behavior:url(border-radius.htc);</strong>
}
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
<strong>behavior:url(border-radius.htc);</strong>
}

IMPORTANTE: Não esqueça de declarar a propriedade “real” border-radius e seu valor, senão o resultado será diferente.

o demo e o arquivo .htc você pode baixar neste link: http://curved-corner.googlecode.com/files/border-radius-demo.zip

e também visite o link – http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser – para mais informações e para dar parabéns para os caras :D

Até ++ pessoal

PNG transparente no IE6

Posted on by
1

Apesar de cada vez mais(e graças a Deus) o uso do IE6 está em queda, principalmente depois que o Orkut, YouTube e outros serviços “populares” avisarem que não irão mais dar suporte a esta coisa que a Micro$oft chama de Navegador de Internet, temos que fazer com que o layout funcione igual aos outros navegadores mais modernos, por uma questão muitas vezes de público-alvo, e umas das coisas que mais incomodam é o fato do IEca6 não suportar imagens PNG transparentes e acaba mostrando no lugar um “cinza-azul” que fica bem estranho pra não dizer ridiculo! Então neste post mostrarei 2 script para resolver esta situação, um para a tag img e outra para as imagens adicionadas nas CSS.

Antes de tudo adicione o seguinte comentário condicional, dentro das tag

1

<head></head>
<head></head>

, para que o script seja carregado quando o usuario estiver usando o IE6.

1
2
3
4

<!--[if IE 6]>
<script type="text/javascript" src="pngtransparentcss.js"></script>
<script type="text/javascript" src="pngtransparent.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="pngtransparentcss.js"></script>
<script type="text/javascript" src="pngtransparent.js"></script>
<![endif]-->

onde pngtransparentcss.js epngtransparent.js são os arquivos que veremos a seguir:

Vamos então ao script para a tag IMG:

  1. baixe o arquivo – pngtransparent.js;
  2. coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
  3. Pronto é só isso! caso não funcione adicione class=”png_transparent”, dentro da tag img.

Vamos agora as imagens adicionadas nas CSS:

  1. baixe o arquivo – pngtransparentcss.js;
  2. coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
  3. abra o arquivo pngtransparentcss.js, localize a linha da função DD_belatedPNG.fix e dentro das aspas simples coloque os seletores (class e id)onde estão as imagens transparentes nas CSS.

Por exemplo:
CSS:

1

#topo {background-image:url("../images/bg-transparente.png" );}
#topo {background-image:url("../images/bg-transparente.png" );}

e no Java Script:

1

pngtransparentcss.js: DD_belatedPNG.fix('#topo');
pngtransparentcss.js: DD_belatedPNG.fix('#topo');

Nota: se quiser colocar mais de um seletor, separe com “,”(virgula).
créditos dos scripts:

É isso ai pessoal, qualquer dúvida é só comentar.



Alguns exemplos de HTML5

Posted on by
4

Montei uma lista de alguns sites com exemplos do uso do HTML5, segue a lista:

Lembrando que com browsers antigos(principalmente aqueles com iniciais IE), não será possivel visualizar o conteudo, mas com o Firefox3.5, já é possivel.

Se você quiser saber mais sobre o HTML5, visite a página oficial da w3c:

http://www.w3.org/TR/2008/WD-html5-diff-20080122/