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

E ai pessoal ontem eu esta dando uma olhada nos meus Feeds e ví umas imagens no blog geeksucks que são uns designer’s desenhando pinturas no chão…é uma imagem mais linda do que a outra, eles dão um aspecto de profundidade que fica parecendo que a pintura é real.

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

Olá pessoal eu estava dando uma olhada nos meus “Feeds” e vi essa homenagem para o Michael Jackson, vários “designers” fizeram uma “pequena” homenagem a ele que faleceu recentemente neste mês de Junho. Então vou  deixar a minha também.

Fonte: webdesignerdepot

Esse é o mais novo comercial do Guaraná Antarctica que lançou nesse mês de Junho. Presta atenção no “Godzilla” que aparece no comercial…hahahah…

Quem será ele ??? hahahah…

É isso ae… por isso que eu me orgulho da profissão que eu escolhi…hahaha… os brasileiros dominam essa área… a Havaianas foi campeã do Leão de Ouro de Cannes 2009 na categoria Design… parabens… abaixo tem a identidade visual da Havaianas…

Olá pessoal mais um post dedicado para alguém e denovo vai para o Guto mas também serve para o Fabio JR., que sempre fazem a mesma pergunta “Como faz gif animado mesmo no photoshop?”…hahaah…depois deste post se eles perguntarem denovo eu fico bravo…haahah…

Bom então vamos começar a colocar a mão na massa, primeiro precisa determinar como vai ser a animação e a arte, se vocês quiserem usar o mesmo modelo que eu vou usar é só fazer o download aqui. Eu fiz uma coisa bem simples para postar aqui é o meu logo e vou fazer ele piscar é bem simples essa animação. Abaixo tem o JPG como ele é:

Depois que você já tiver com o PSD aberto no seu Photoshop vamos exportar para o ImageReady veja no exemplo abaixo:

Depois que já exportou para o ImageReady agora vamos ativar o “Animation” é com ele que nós vamos fazer nosso gif animado ele fica no menu “Window -> Animation” vai aparecer a barra de animação na parte inferior esquerda do seu monitor. Veja no exemplo abaixo:

Agora eu vou fazer cinco copias do primeiro frame clicando no botão “duplicates current frame” ele é o segundo da direita para a esquerda. Veja no exemplo abaixo:

Estamos quase finalizando nosso gif animado, eu vou fazer uma animação bem simples. Agora no primeiro frame vou ocultar a pasta “LOGO” que esta em “Layers” que ficá no canto direito inferior do monitor você vai ver que todos os outros frames ficaram vazios mas é assim mesmo, agora no segundo frame você ativa só a primeira layer da pasta “LOGO”, no terceiro frame ativa as duas layers, na quarta deixa vazia mesmo e na quinta ativa a pasta “LOGO”. Veja como esta ficando no exemplo de baixo:

Agora para finalizar só falta determinar qual vai ser a velocidade da nossa animação, porque como padrão o ImageReady é “zero milisegundos” dá uma olhada como ficá:

Para determinar a velocidade de apresentação é só clicar na setinha que esta junto com o texto “0 sec.” que ficá abaixo do frame que você criou, clique na setinha para aparecer uma caixinha com varias “velocidades de tempos, lembrando que é milisegundos “0.1″ e segundos “1.0″“, eu vou colocar 0.5 milisegundos para minha animação, mas se vocês quiserem outras velociades é só clicar em “Other…“. Veja no exemplo abaixo:

Para exportar nosso gif animado vocês tem que clicar em “File -> Save Optimized As… ou Ctrl+Shift+Alt+S”.

Veja como ficou nosso gif animado agora sé vocês quiserem ir inventando outras formas de apresentações, efeitos, etc… é só soltar seu lado criativo…hahahahaha…

Eu sei que esse video já é bem antigo mas toda vez que eu vejo fico impressionado, como o cara consegue desenhar a Mona Lisa no Paint… meu deus já é difícil vetorizar no Photoshop imagina como foi dificil desenhar no Paint.