Central Server

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

Internet Explorer e a propriedade Clip

Postado por: Pedro Rogério em
  • 15 abr
  • 0

A proriedade clip do CSS é utilizada para recortar imagens. Seu uso consiste no seguinte:


clip: rect(10px, 250px, 5px, 5px)

Só que é uma prorpiedade não muito utilizada por causar problemas no Internet Explorer, pois o mesmo não admite o uso de vírgulas nas sentenças. Para solucionarmso esse problema, basta eliminarmos as vírgulas, deixando da seguinte forma:


clip: rect(10px, 250px, 5px, 5px)
clip: rect(10px 250px 5px 5px)

A primeira declaração é para browsers Standard Compliance, onde o IE não entende, e a segunda é para o dito cujo.

Via: Gran Impetu – Internet Explorer y la propiedad clip

Páginas:«12345678910...23»