Framework CSS e XHTML para desenvolver para iPhone e iPod Touch

Postado por: Pedro Rogério em

iPhone

Os desenvolvedores interessados hoje me desenvolver para iPhone e iPod Touch podem ficar felizes pois Diego Martín Lafuente desenvolveu um framework para facilitar esse trabalho chamado: Universal iPhone UI Kit, onde você também pode ver uma prévia do Framework em funcionamento.

O Framework segue a linha de desenvolvimento de iUI, de Joe Hewitt, emulando uma aplicação nativa, evitando assim romper o perfeito equilíbrio que a Apple conseguiu em suas aplicações.

Graças a utilização do Safari no iPhone e no iPod Touch, você pode utilizar ao máximo os seletores CSS 3, juntamente com um XHTML dentro dos padrões, levando sua aplicação ao extremo em pouco tempo de desenvolvimento.

Download

Position: fixed no Internet Explorer 6

Postado por: Pedro Rogério em

Se você já precisou posicionar elementos fixos na tela, com certeza já percebeu que esse tipo de posicionamento é falho no Internet Explorer 6 e menores, mas, como sempre existe uma forma de fazer as “coisas funcionarem” no IE.

Para que position:fixed funcione no IE6 e anteriores, faremos o uso de expressões proprietárias para converter fixo em absoluto:

Browsers Standard


#elemento_fixo {
    position: fixed;
    top: 100px;
}

Internet Explorer


* html #elemento_fixo {
    position: absolute;
    top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+100+"px" : body.scrollTop+100+"px");
}

Como podem ver, o elemento que possuir o id “elemento_fixo” sempre irá ficar posicionado a 100px do topo independente do scroll da página. Existem outras formas de se obter esse mesmo resultado, mas essa é a mais simples e com certeza a mais suja. Essa dica eu retirei do site: ceslava.com /blog.

Uma idéia e visões diferentes

Postado por: Pedro Rogério em

Nesse site você pode ver como a implementação de padrões nos diferentes browsers no mercado hoje em dia é essencial. A partir de simples paddings em elementos buttons, você pode ver que cada browser prefere seguir seu padrão, até mesmo o browser mais utilizado, em cada versão, renderiza os elementos de formas diferentes.

Buttons padding demo

40 Formas de listar Planos de Pagamento

Postado por: Pedro Rogério em
Pricing Design

O que eu vejo no dia-a-dia é muito designer ainda ter aquela dificuldade de desenvolver um layout atrativo para listar planos de pagamento. Com certeza, criar um layout chamativo e ao mesmo tempo objetivo é complicado, mas no site designwalker você pode ver 40 exemplos que podem ajudar o designer da sua empresa e levar o seu negócio ao sucesso.

Pricing Design

Galeria de Efeitos Parallax

Postado por: Pedro Rogério em
Exemplo de efeito Parallax

Efeitos Parallax são aqueles efeitos utilizados para criar uma ilusão de profundidade tridimensional em ambientes 2D, muito utilizada em jogos do tipo Arcade, como o Moon Patrol e Sonic Hedgehog. Como os nossos sitemas operacionais em sua maioria são todos 2D, é possível simular essa técnica no browser para simular um ambiente 3D.

Originalmente essa técnica foi descoberta por Alex Walker e Paul Annett, onde são utilizadas várias imagens em CSS sobrepostas para simular um ambiente 3D:

Exemplo de efeito Parallax

Quer saber mais sobre o assunto? Matthias Kretschmann fez em seu site uma galeria listando 12 belos efeitos utilizando a técnica Parallax.

<update>O site CSSLab.cl fez um post interessante sobre o assunto também.</update>

Páginas:«12345678910...24»