Position: fixed no Internet Explorer 6

Postado por: Pedro Rogério em
  • 10 jul
  • 15

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
  • 4 jun
  • 2

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
  • 2 jun
  • 3
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
  • 27 mai
  • 0
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?

Postado por: Pedro Rogério em
  • 15 mai
  • 5

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.

Dock estilo MacOS com CSS Animations

Postado por: Pedro Rogério em
  • 14 mai
  • 9

O dock do MacOS é com certeza é um aparato invejado por todo sistema operacional, surgiram até alguns javacripts caso você quisesse colocar algum menu estilo dock em seu site, mas como o CSS se torna mais poderoso a cada dia, hoje em dia é possível desenvolver menus desse tipo com CSS Animations:


<html>
<head>
	<title>MacOSX Dock CSS Animations
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		#page {	margin-top:10em;}
			.dock li {display:inline;}
			.dock img {width:96px; opacity: 0.7; -webkit-transition: all 1s ease-in;}
			.dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition:all 1s ease-out;}
			.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
			.dock li:hover span {left:50%;}
	</style>
</head>
<body>
	<div id="page">
		<ul class="dock">
			<li><img src="finder.png" alt="Imagen" /><span class="desc">Finder</span></li>
			<li><img src="systempreferences.png" alt="Imagen" /><span class="desc">Preferences</span></li>
			<li><img src="firefox.png" alt="Imagen" /><span class="desc">Firefox</span></li>
			<li><img src="itunes.png" alt="Imagen" /><span class="desc">iTunes</span></li>
			<li><img src="terminal.png" alt="Imagen" /><span class="desc">Terminal</span></li>
			<li><img src="trash.png" alt="Imagen" /><span class="desc">Lixeira</span></li>
		</ul>
	</div>
</body>
</html>

O segredo fica por conta da propriedade -webkit-transition, uma propriedade que somente os usuários dos browsers Safari 3.1 e Webkit podem usufruir. Caso você utilize alguns desses browsers, veja aqui um pequeno exemplo.

Referências

Páginas:«123456789...22»