Olá para todos, hoje eu vou falar de @font-face não sei se todos conhecem, mas com essa técnica vocês conseguem colocar font’s não padrões no seu site, chega de falatório e vamos começar a por a mão na massa.

Vou escolher uma font muito usada para layouts a Futura Md Bt abaixo vou fazer um html bem simples.

<h1>Testando @Font-Face</h1>

Depois de criar o código vou gerar as font’s “.eot – .svg – .ttf – .woff vocês tem que usar todos esses tipos para que funcione em todos os browsers.” , eu uso o site http://www.fontsquirrel.com/fontface/generator “atenção este site não funciona o upload da font se for linux somente em windows” .

Para fazer o uploader da font é muito simples, primeiro aperte o botão “add fonts” deixe carregar, depois selecione a opção “optimal” e por final aceite os termos de uso “Agreement” e aperte o botão “Download Your Kit”.

Depois de terminar o download é só descompactar o arquivo gerado e copiar as font’s para dentro do seu projeto, se você quiser crie uma pasta chamada font para que fique mais organizado.

Agora abra a pasta que fizemos download da font e edite o arquivo “stylesheet.css” porque dentro dele já tem o css pronto da nossa font, copie e cole no arquivo no exemplo que estamos fazendo, a única alteração que temos que fazer é colocar o caminho de onde esta nossa font veja o exemplo abaixo.

@font-face {
	font-family: 'FuturaMdBTMedium';
	src: url('font/futura_md_bt_medium-webfont.eot');
	src: url('font/futura_md_bt_medium-webfont.eot?iefix') format('eot'),
	      url('font/futura_md_bt_medium-webfont.woff') format('woff'),
	      url('font/futura_md_bt_medium-webfont.ttf') format('truetype'),
	      url('font/futura_md_bt_medium-webfont.svg#webfontZaJl2R9s') format('svg');
	font-weight: normal;
	font-style: normal;
}

Depois de criar o @font-face no css vamos criar o um estilo para o h1.

h1{
 	font-family: 'FuturaMdBTMedium';
   }

Pronto agora estamos usando uma font não padrão em nosso projeto, vocês viram como é muito simples fazer isto, bom espero que ajude vocês qualquer dúvida ou sugestão é só comentar até o proxímo post.

Exemplo: Visualizar

Arquivos: Download

Fala galera depois de muito tempo voltei a postar, hoje eu vou falar um pouco de CSS Sprite. É muito simples usar ele mas muitas pessoas tem dúvida de como usar, então vamos começar.

Primeiro de tudo vamos criar uma imagem, por exemplo eu vou fazer um menu bem simples no photoshop com os itens “Home – Quem Somos – Localização -Contato”.

Um toque para vocês sempre crie os itens com a mesma altura para facilitar depois o desenvolvimento, bem depois de criada a imagem vamos para a parte de html, vamos criar a base do que será o menu com <ul> e <li>.

<ul>
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Quem Somos" href="#">Quem Somos</a></li>
	<li><a title="Localização" href="#">Localização</a></li>
	<li><a title="Contato" href="#">Contato</a></li>
</ul>

Vamos para a parte de css o nosso menu vai começar aparecer, primeiro vamos sumir com os marcadores padrão do <ul> e depois vamos colocar os estilos na <li> e no <a> você vão ver que o estilo li e a estão juntos mas tem uma virgula separando os dois porque da virgula para quem não sabe ela quer dizer que a tag <li> e a tag <a> vão ter o mesmo estilo.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
</style>

Agora já está quase chegando a parte mais divertida do CSS Sprite vamos colocar a imagem de background do <a> e colocar as posições da imagem de cada link, primeiro de tudo vou colocar o background para todos os <a> vocês vão ver que ele vai aparecer para todos os links mas é assim mesmo fica tranquilo que vai funcionar.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}
</style>

Vamos voltar para a parte de html e colocar classes diferentes para cada <a> para nos colocarmos a largura e a posição de background de cada link.

<ul>
	<li><a class="home" href="#" title="Home">Home</a></li>
	<li><a class="quem-somos" href="#" title="Quem Somos">Quem Somos</a></li>
	<li><a class="localizacao" href="#" title="Localização">Localização</a></li>
	<li><a class="contato" href="#" title="Contato">Contato</a></li>
</ul>

Para finalizar este tutorial vou explicar como funciona o background-position vocês vão ver que ele tem dois zeros “0 0” o primeiro zero é para a posição horizontal da imagem e o segundo zero é para a posição vertical da imagem vocês vão ver que o segundo zero sempre será 0 ou -40px é porque na posição normal do link “off” ele será 0 e na posição hover ele será -40px porque a minha imagem tem 80px de altura e a metade é 40px assim quando a posição for hover ele vai dar -40px do background atual assim mostrando a imagem hover, deixa eu mostra na prática para vocês entenderem melhor.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}

	a.home{width:77px; background-position:0 0;}
	a.home:hover{background-position:0 -40px;}

	a.quem-somos{width:138px; background-position:-77px 0;}
	a.quem-somos:hover{background-position:-77px -40px;}

	a.localizacao{width:122px; background-position: -215px 0;}
        a.localizacao:hover{background-position: -215px -40px;}

	a.contato{width:90px; background-position:-337px 0;}
	a.contato:hover{width:90px; background-position:-337px -40px;}
</style>

Agora vou explicar o que fiz, eu coloquei a largura em todos os links vocês descobrem o tamanho usando o photoshop dando ctrl+t na imagem de cada botão irá mostrar o tamanho no box “informação – info” mas eu dei mais 1px na imagem para deixar uma linha branca para separá-los, agora para o background-position você descobre com a ferramenta “Marquee Tool” ou “tecla M” ai vocês pegam a distância da inicio da imagem até o inicio do botão.
Pronto agora nosso menu está finalizado, pode aparecer um pouco complicado no inicio mas depois vocês vão ver que é muito facil é só praticar, vou deixar o psd dos botões junto com o html para para download para vocês terem como referência, por favor deixem dúvidas ou sugestões, obrigado pessoal até o proxímo post.

Exemplo: Visualizar
Arquivos: Download

Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.

Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

TITULO 1
TITULO 3
TITULO 3


TEXTO 1
TEXTO 2
TEXTO 3


RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

TITULO 1
TITULO 3
TITULO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3




TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo

Olá pessoal fazia um tempo que eu não colocava nada sobre WebDesigner aqui no meu blog. Outro dia eu estava dando uma olhada e vi que a Ana postou no twitter dela falando que as pessoas quando recortão só pensão em um browser ai eu respondi “Para isso que existe CSS Condicional” então decidi fazer um post sobre isso. CSS Condicional para IE 6, 7 e 8. “na minha opinião o IE 6 deveria ter morrido faz tempo e também não tem browser melhor doque o FireFox“

Então vamos começar o que interessa eu criei um HTML bem simples com uma class chamada “padrao” em cada DIV.

<div class=”padrao”>CSS PADRÃO – VISUALIZADO NO FIREFOX</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 6</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 7</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 8</div>

depois de criada as DIV’s agora nós vamos criar um css chamado “padrao.css” e colocar ele dentro de uma pasta chamada css “eu gosto de sempre separar por pastas as coisas, tipo”css, js, imagens, etc’  ficá muito mas fácil de achar depois “

.padrao{
width:120px;   /*determina a largura da div*/
height:160px;   /*determina a altura da div*/
background:#ededed;   /*determina a cor do fundo da div*/
float:left;   /*determina que a div vai ficar a esquerda*/
border:1px solid red;   /*determina uma borda de 1px de largura na div*/
margin:10px;  /*determina que a div vai ficar 10px de distância do topo, da direita e esquerda e do rodapé*/
font-family:Arial;   /*determina a familia da fonte como Verdana, Tahoma, etc…*/
font-size:11px;   /*determina que a fonte vai ter 11px de altura*/
text-align:justify;   /*determina que a fonte vai ficar no modo de formatação justificado*/
padding:10px;   /*determinada que o texto vai ficar a 10px de distância das bordas da div que ela se encontra*/
}

depois que criado o arquivo padrao.css vamos chamar o css na página desejada, antes de fechar a tag “</head>” vamos colocar a tag “<link>”

<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />

mas presta muita atenção no caminho do CSS se você estiver com dúvida qual o caminho certo é só prestar atenção no nome da pasta e do arquivo onde ele se encontra, o meu está na pasta CSS e com o nome padrao.css  -  ” href=”css/padrao.css” “

Depois que estiver tudo OK vamos colocar os IF’s para os IE’s eles vão abaixo do

“<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />”

que acabamos de colocar, primeiro eu vou colocar do IE 8 e também já criei o arquivo css com o nome ie8.css na pasta CSS.

<!–[if gte IE 8]>
<link rel=”stylesheet” href=”css/ie8.css” type=”text/css” />
<![endif]–>

eu fiz uma pequena alteração no css padrão que criamos primeiro só para ver funcionando, mas a class ainda é .padrao no css, porque esse IF ele funciona assim, ele compara os dois CSS ele vai checando linha por linha do css se ele vê que você alterou alguma coisa ele automaticamente já pega as propriedades do novo atributo que determinamos no novo css… mas tem que ter o mesmo nome de class senão ele vai pensar que é outra coisa e vai passar direto, da uma olhada como ficou.

.padrao{
background:#F17447;
border:1px solid #AD6B00;
}

se vocês perceberam eu só coloquei os atributos que eu alterei porque não tem necessidade de manter os atributos se são iguais.

Para finalizar eu vou colocar o IF do IE 7 e do IE 6:

<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie7.css” type=”text/css” />
<![endif]–>

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”css/ie6.css” type=”text/css” />
<![endif]–>

vocês vão perguntar porque os dois estão escritos IE7 mas se prestar atenção no IF do IE6 tem um ” lt” o que isso significa, o lt é uma abreviação de “less than” isto é que esse if só vai funcionar se for “menor que o IE7″ .

para os CSS eu vou alterar só o background e a borda, criei um arquivo para cada um dentro da pasta css com os nomes:

ie7.css

.padrao{
background:#FFFBCC;
border:1px solid #E6DB55;
}

ie6.css

.padrao{
background:#94E2FF;
border:1px solid #464646;
}

Para que vocês tenhão uma idéia melhor de como ficou acessem do seu FireFox, IE 6, IE 7 e o IE 8 pra ver como que ficou as DIVs. Qualquer dúvida é só deixar um comentário que eu respondo o mais breve possível.

Visualizar -> CSS Condicional para IE 6, 7 e 8

Download -> CSS Condicional para IE 6, 7 e 8

E ai pessoal semana passada eu estava ajudando a Patricia uma menina que trabalha na Lógica Digital na parte de recorte, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliar-se sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no IE então eu fiz umas pesquisas no google até que eu achei o site html remix, então eu resolvi deixar postado aqui para ajudar todo mundo que tem essa mesma dúvida e também para que eu não esqueça mais.

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style:  -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e no IE

Olá pessoal neste post nos vamos tratar de uma coisa muito importante, “Favicons” vamos saber “O que é” e “Como colocar no seu site o blog”.

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Como transformar meu arquivo em .ico?

Nesses links abaixo são alguns sites que transformam suas imagens em extensão .ico para vocês.

http://www.favicon.cc/

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.co.uk/

E agora como colocar o favicon no meu Site ou Blog ?

Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal  “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.

<head>

<link rel=”shortcut icon” href=”http://www.meusite.com.com/favicon.ico”/>

</head>

Espero que vocês tenham gostado do post… até mais…