Finalmente eu fiz um screencast… não é longo mas creio que irá ajudar alguém, principalmente quem está começando!
Previnindo sub-pixel no Photoshop from Mateus Souza on Vimeo.
Se você não entendeu o que quis mostrar com o grid, a “tradução” é: Você pode usar o grid, como pontos de navegação, assim o shape irá ter a mesma medida do grid, previnindo o sub-pixel (porque o grid tem medidas exatas… ok, você já entendeu).
Até a próxima.
Hoje vou mostrar uma dica rápida e avançada que pode te ajudar a manter seus sistema mais seguros, quando se trabalha com Ajax. Irei desenvolver encima do PHP e do jQuery, mas a dica vale para qualquer biblioteca (PHP, ASP…) e framework (jQuery, Mootools…), inclusive se for na mão mesmo, sem framework.
Quando o jQuery faz uma requisição em Ajax, é passado um cabeçalho header com a seguinte variável:
$_SERVER['HTTP_X_REQUESTED_WITH']
E a partir dai, muita gente faz até uma função para checar se a requisição é ajax e alterar o comportamento do sistema de acordo com o resultado:
/**
* Checa se é uma requisição em ajax através do cabeçalho header
* @return boolean
*/
function checkAjax(){
return (isset($_SERVER['HTTP_X_REQUESTED_WITH']))? TRUE : FALSE;
}
Até ai tudo bem… mas o que quero mostrar é porque que com o jQuery, há esse cabeçalho adicional, e como podemos adicionar novos cabeçalhos com Javascript. Vamos lá:
Novamente falando sobre CSS3, hoje vamos abordar sobre as propriedades para interface, o que irá nos ajudar e muito no desenvolvimento de layouts. Acredito que a partir de agora você realmente observará o que CSS3 trouxe de diferente. Estilizar um elemento com sombras, multiplos backgrounds e outras coisas mais é bem legal, mas CSS3 vai muito além disso… Então “vamo que vamo”, que ainda temos muito a falar antes de terminar esta série.
Você pode conhecer Interface como sendo UI (user interface/interface do usuário), que é o mesmo conceito. Em minha visão, UI ou Interface, nada mais é do que uma disposição “padrão” que visa a facilidade de uso, mesclada com a experiência que o usuário teve em outros locais, a chamada usuabilidade. Interface é um assunto muito amplo, então sem mais delongas, puxando para o nosso assunto (CSS3), interface aqui tem como objetivo, trazer um padrão comum e mais rápido à disposição do layout. Sendo um pouco mais complexo, interface é o elo de ligação – automático – entre duas necessidades: menos CSS/HTML e melhores layouts.
Temos como exemplo, que se encaixa perfeitamente no que estamos falando, a necessidade de dividir um determinado layout em partes… Fazer isto na mão envolver muito código – como acontece com grids CSS – e é cansativo. Já usando as propriedades de Interface do CSS/CSS3 você consegue o mesmo resultado, de forma rápida e simples. É justamente ai que se encaixa a interface do CSS…
$.cssHooks, basicamente é uma extensão para as funções .css() e .animate(), ou melhor dizendo, é uma forma de implementar novas propriedades a estas funções, sem a necessidade de alterar o código fonte, por isto é chamada como extensão. Com $.cssHooks, você pode criar infinitas possibilidades para se trabalhar o CSS com jQuery.
O plugin jQuery Rotate, que ilustra bem como funciona $.cssHooks. Vamos a introdução para aprender e criar nossos próprios CSS Hooks:
Novamente falando sobre CSS3, em sua série, hoje iremos ver um pouco as propriedades de texto disponíveis no CSS3. São elas:
É o box-shadow dos textos… Isto mesmo, o conceito é o mesmo, apenas a aplicação é “fechada” aos textos. Já falei sobre o box-shadow aqui, recomendo que visualize este artigo também para compreender melhor o text-shadow.
Usar text-shadow traz um número muito grande de vantagens, tanto para a interface/design do website, quanto pela facilidade de aplicação, uma vez que dispensa o uso de imagens ou Javascripts para reproduzir o mesmo efeito. Além do mais que é uma propriedade bem completa, em relação as técnicas anteriores.