Archive for category CSS

HTML5 Canvas – O futuro dos gráficos na web

Com certeza você já deve ter ouvido falar por aí e muito dessa nova tag do HTML5 e suas possibilidades, mas você sabe o significado dessa nova tag?

O elemento canvas permite no HTML através de uma área determinada na página criar desenhos através de scripts, desenhar e renderizar imagens, permitindo aos desenvolvedores criarem coisas que até então eram possíveis somente com a utilização do Flash, com a vantagem de que com o uso de canvas não precisamos de nenhum plugin de terceiros instalado no navegador.

O canvas foi desenvolvido inicialmente pela Apple para uso dentro do MAC OS X, alimentando aplicações como Widgets do Dashboard e o Safari. Posteriormente foi adotado pelos browsers baseados no motor Gecko e Opera e padronizado pelo WHATWG.

Se ficou interessado em saber mais sobre o assunto, aconselho a dar uma olhada nos slides criados pelo desenvolvedor Rob Hawkes que ilustram muito bem o assunto:

 

Fonte: Pinceladas da web

, , , , , ,

Nenhum comentário.

Fontes externas no seu web site… sim agora é possível!

Salve galera!

Hoje vou publicar um artigo muito bacana sobre como carregar fontes externas no seu website, se você está cansando (ou acostumado) com as fontes que são utilizadas como padrão na internet (arial, verdana, times, georgia entre outras… poucas), se segure … sente … relaxe … e leia este artigo na integra:

@font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.

Tipografia na web sempre foi um sonho para todo designer para web. Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. A tipografia é parte importante na criação de peças gráficas e na web, isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr quebram o galho mas não são o ideal.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
     font-family: helveticaneue;
     src: url('HelveticaNeueLTStd-UltLt.otf');
}

Na primeira linha você dá um nome para a Font que você está importando. Pode ser qualquer nome.

Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
	font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o browser carrega primeiramente o texto com a font padrão do sistema e logo depois monta o texto com as fonts corretas. Nada de outro mundo para quem utiliza imagens para substituir textos. Mesmo assim, pode ser um incomodo para alguns.

Suponhamos que você queira oferecer a font para os que não a tem disponivel no sistema, mas para que o site carregue mais rápido, queira utilizar a cópia local do sistema do usuário caso ele a tenha instalado:

@font-face {
     font-family: helveticaneue;
     src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Compatibilidade
A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.

Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto do site tableless.com.br.

Fonts pagas
O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.
Espero que tenham gostado.

abraços!

Fonte: tableless.com.br
Link direto: http://www.tableless.com.br/font-face-fonts-externas-na-web


, , , , , , , , , ,

1 Comentário

CSS Cleanner – limpando de vez as maluquices dos browsers

Salve galera! hoje vou publicar um método que utilizo sempre para evitar problemas com diferenças no layout entre os browsers (é claro que só isso não resolve totalmente, lógico … não é simples assim, mas já ajuda bastante).

Nos meus desenvolvimentos eu costumo utilizar bastante um método de centralizar a minha página, fazendo com que o conteúdo fique sempre a vista do usuário, mesmo quando ele não está com a janela do navegador totalmente maximizada, para isso eu utilizo o atributo “position:absolute;” do meu elemento principal veja um exemplo abaixo:

#principal {
width:800px;
height:auto;
left:50%;
margin:0 0 0 -400px;
position:absolute;
}

Imagine que meu elemento principal tem 800 pixels de largura, e eu preciso que ele fique centralizado na página, com o atributo “left:50%” nós forçamos o elemento a ir 50% para esquerda da página independente do tamanho que ela seja, e com a margin nós puxamos ele devolta utilizando a metade do seu tamanho em largura “margin:0 0 0 -400px” (lembrando que a largura é 800px então a sua metade é justamente 400px), e por fim utilizandoo atributo “position:absolute”, forçando ainda mais o elemento a manter a posição absoluta à página… foi fácil até agora ? ai é que começa a briga entre os browsers, este caso é somente um exemplo, mas é por essas e outras que utilizo o css cleanner, que nada mais é do que um css incluindo tudo que você utiliza no seu projeto (tags) e zerando todas as suas propriedades, sem isso cada browser ira seguir um padrão e adaptar as suas tags como ele quiserem seguindo um critério próprio … exemplo: Firefox ficara diferente do Internet Explorer, que ficara diferente do Safari e assim por diante (isso mesmo começe a arrancar os seus cabelos), mas já vamos resolver isso :)

Este caso abaixo eu costumo utilizar nos meus projetos mas vocês podem adaptar da forma que acharem melhor:

*{
outline-color:invert;
outline-style:none;
outline-width:medium;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
}

uma outra forma que também utilizo quando não vou utilizar muitos elementos:


html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

bom é isso ai, espero que tenham gostado.
abraços!

, , , ,

Nenhum comentário.