Ir para conteúdo / Skip to content

CSS Hack para Google Chrome e Safari 3.1

blog reactions Postado em: 5 de setembro de 2008 por Pedro Rogério

Uma dica rápida para aqueles que precisam aplicar CSS somente para o Google, a regra abaixo é válida e somente funciona no Google Chrome e Safari 3.1:


body:nth-of-type(1) p{
   color: #333333;
}

Para obter mais informações, visite o site evotech.net.

Zebra Tables com CSS3

blog reactions Postado em: 2 de setembro de 2008 por Pedro Rogério

Pouco a pouco os browsers já começam a dar suporte as novas funcionalidades das CSS3, está sendo assim com o Opera.

No artigo eles mostram como utilizar o pseudo-seletor nth-child, onde podemos criar tabelas estilo zebra somente com uma linha de CSS:


tr:nth-child(2n+1) {
    background-color: #99ff99;
}

No seletor devemos indicar o número de linhas em que devemos aplicar o estilo, nesse caso, a cada 2 linhas começando na posição 1 (os valores iniciam com 0). Veja aqui um exemplo.

Páginas de erro 404 personalizadas

blog reactions Postado em: 15 de agosto de 2008 por Pedro Rogério
Páginas de erro 404 personalizadas

O site PSD Creativo, disponibiliza em PSD, vários desenhos para páginas de erro 404, para você que deseja personalizar o seu site, afinal, as páginas de erros sempre são deixadas de lado.

Framework CSS e XHTML para desenvolver para iPhone e iPod Touch

blog reactions Postado em: 7 de agosto de 2008 por Pedro Rogério

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

blog reactions Postado em: 10 de julho de 2008 por Pedro Rogério

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

blog reactions Postado em: 4 de junho de 2008 por Pedro Rogério

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

Bullets e Arrows para Download

blog reactions Postado em: 3 de junho de 2008 por Pedro Rogério
Bullets and Arrows

No site Web Site Bullets você pode encontrar bullets (marcadores) e Arrows (setas) para utilizar em seu site/blog. Todas as imagens são em formato gif e com o fundo transparente.

Bullets and Arrows

Via: Utilidades para Webmasters.

40 Formas de listar Planos de Pagamento

blog reactions Postado em: 2 de junho de 2008 por Pedro Rogério
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

blog reactions Postado em: 27 de maio de 2008 por Pedro Rogério
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>

O que são Tag Clouds?

blog reactions Postado em: 15 de maio de 2008 por Pedro Rogério

Tag Clouds, ou Nuvem de Tags são listas hierarquizadas visualmente, ou seja, uma forma de apresentar os itens de um website. Mas o que são essas tags?

Tags são rótulos ou legendas onde as pessoas podem categorizar conteúdo de uma forma muito simples, utilizando qualquer palavra que faça sentido. O uso de Tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.

Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Fonte: Wikipédia.

Página 1 de 6123456»