dochub concentra de maneira fácil e rápida as documentações de CSS, HTML, Javascript e DOM. No qual tem o seu conteúdo retirado da Mozilla Developer Network.

Excelente ferramente para tirar aquela dúvida ou refrescar a memória.

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse [...]]]>

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag <script> e depois criar uma nova variável do tipo Colorpicker().

Ex:

<script type="text/javascript" src="colorpicker.js"></script>

var picker = new ColorPicker(100, 38); // x , y
picker.setVisible(true);

Para visualizar-lo funcionando clique aqui.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]]]> Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

link para o outro post e comentários

Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo [...]]]> Há algum tempo eu fiz um script de uma tooltip (aquela caixa que abre ao passar o mouse sobre algum link). Infelizmente o código não é dos menores, o que deixaria muito grande o post e sua explicação.

Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo abaixo explicando.

O seu funcionamento é bem simples. No HTML é adicionado uma div com position absolute com display igual a none. Com o document.onmousemove a posição do mouse é guardada em uma variável então ao passar o mouse sobre qualquer link o display da div (tooltip) muda para block e sua posição (x,y) é setada pela do mouse.

Para ver o exemplo clique aqui.

obs: o código (javascript) está junto com o HTML e o CSS.

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]]]> Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    position: absolute;
    border: 1px solid black;
}

Ou resumindo: margin: -200px auto auto -250px;

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">
    <div id="cell">
        <div id="conteudo">
            <p>parágrafo</p>
        </div>
    </div>
</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
    width: 100%;
    height: 100%;
    margin: 0px; /* retirando a margem padrão */
    padding: 0px; /* retirando o padding padrão */
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#cell {
    display: table-cell;
}

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
    vertical-align: middle;
    display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
    width: 500px;
    margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    background: #f1f1f1;
}

#cell {
    vertical-align: middle;
    display: table-cell;
    _position: absolute;
    _top: 50%;
}

#conteudo {
    width: 500px;
    margin: auto;
    padding: 20px;
    border: 1px solid black;
    _position: relative;
    _top: -50%;
}

E o HTML:

<div id="table">
    <div id="cell">
        <div id="conteudo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor – Centralizar Vertical

[update testado="IE6, IE7, FIREFOX 2 e OPERA 9"]

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

[/update]

Já existem inúmeros sites indexadores de sites Tableless (CSS Layout).

Abaixo segue uma listagem de alguns deles:

http://www.cssdrive.com/
http://cssvault.com/
http://www.cssbeauty.com/gallery/
http://www.cssimport.com/
http://www.stylecrunch.com/
http://www.csselite.com/
http://www.unmatchedstyle.com/
http://cssmania.com/
http://www.cssreboot.com/gallery/ [...]]]> Sempre é bom estarmos observando, conhecendo, novos layouts e aprendendo com eles.

http://www.cssdrive.com/
http://cssvault.com/
http://www.cssbeauty.com/gallery/
http://www.cssimport.com/
http://www.stylecrunch.com/
http://www.csselite.com/
http://www.unmatchedstyle.com/
http://cssmania.com/
http://www.cssreboot.com/gallery/
http://www.css-website.com/
http://www.cssbloom.com/
http://www.css-design-yorkshire.com/
http://cssbrain.hu/
http://screenfluent.com/
http://www.isquare.it/
http://www.webdigity.com/cssGallery/
http://www.creative-pakistan.com/

Quer mais?
CSS Galleries

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará [...]]]> Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

<blockquote class=”pull”>Texto aqui dentro</blockquote>

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
width: 170px;
border-top: 3px solid #CC0099;
border-bottom: 3px solid #CC0099;
text-align: center;
float: right;
margin: 0px 20px;
padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

http://www.sitepoint.com/test/pullquote.htm (inglês)
http://www.brpoint.net/arquivo/css/pull-quotes.html (português)

Pullquote com Javascript:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/ (inglês)

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: [...]]]> Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem.

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: 400px;
height: 500px;
padding: 10px;
overflow: auto;
border: 3px groove #CCCCCC;
background: #F1F1F1;
}

Você pode alterar o estilo da borda: estilos de borda css.

HTML

<div id=”contrato”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam massa. Donec bibendum quam a augue. Fusce rhoncus. Proin laoreet facilisis ipsum. Nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque semper porta lorem. Nunc libero. Pellentesque sollicitudin. Integer tincidunt cursus nulla. Vivamus lacinia condimentum ipsum. Quisque lacus diam, scelerisque vitae, vestibulum id, elementum vitae, ante. Cras ipsum. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Uma encheção de lingüiça aí.

E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.

Vejamos as principais características do menu: imagem de fundo, inline e efeito over.

Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente.

Você deve estar se [...]]]> Esse post será voltado para ensinar fazer um menu estilo navbar. Para ser mais específico será esse o menu.

Vejamos as principais características do menu: imagem de fundo, inline e efeito over.

Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente.

Você deve estar se perguntando por que exportar numa única imagem, sendo que os botões irão estar separados e ter links diferentes. Logo você irá entender o porquê disso.

Depois de desenhado e exportado vamos à linguagem de marcação para estrutura-lo:

<ul id="nav">
	<li id="home"><a href="index.html">home</a></li>
	<li id="sobre"><a href="sobre.html">sobre</a></li>
	<li id="contato"><a href="contato.html">contato</a></li>
</ul>

Escrevemos uma lista não ordenada simples, com os links. Para cada item da lista definimos um nome de identificação, o que vai fazer que cada um receba sua respectiva imagem.

Para “economizar” uma div identificamos também a lista toda – nav – para formatá-la.

A parte da marcação pronta, vamos então ao CSS. Para realmente dar vida ao menu:

ul#nav {
	width: 324px;
	height: 35px;
	_padding-right: 1px;
	list-style-type: none;
	float: right;
}

ul#nav li {
	display: inline;
}

ul#nav li a {
	width: 98px;
	height: 35px;
	margin-left: 5px;
	margin-right: 5px;
	background: url(imgs/nav.gif) no-repeat;
	float: left;
	text-indent: -5000px;
	overflow: hidden;
}

ul#nav li#home a { background-position: 0px 5px; }
ul#nav li#sobre a { background-position: -99px 5px; }
ul#nav li#contato a { background-position: -198px 5px; }

ul#nav li#home a:hover { background-position: 0px 0px; }
ul#nav li#sobre a:hover { background-position: -99px 0px; }
ul#nav li#contato a:hover { background-position: -198px 0px; }

Defindo primeiro o tamanho da lista – ul -, removendo as marcações da lista – list-style-type – e flutuando para a direita, o que não irá interfirir no resultado. Já que foi usado exclusivamente para o site.

Antes tem um CSS hack – _padding-right – devido ao nosso amigo Internet Explorer.

Colocando os itens da lista inline – ul#nav li { display: inline; }.

Agora na tag a vamos definir o tamanho de cada botão, altura, espaçamento e a imagem de fundo. Repare que todos os links do menu irão receber aquela imagem de fundo que foi exportada.

Para a tag a ficar com o tamanho especificado – aceitar essas propriedades – deve-se coloca-la para flutuar, de preferência para a esquerda, senão irá inverter a ordem da lista.

Faça o teste, vendo o menu sem o float.

O identamento negativo juntamente com o overflow setado para hidden é justamente para fazer sumir o texto do botão colocado no HTML. Essa técnica chama-se image-replacement.

Agora que vem a parte legal, definir a posição da imagem de fundo para cada botão. Aproveitando o id de cada li mudamos a posição da tag a do respectivo item.

Como a largura do botão é de 99px, essa será a diferença de cada x, sendo decrementado, já que para cada botão que passa a imagem tem que ser “rolada” para trás.

No y foi coloca 5px para dar a impressão que o botão fica maior – sobe – ao passar o mouse sobre. Começando com 5px o botão ficará mais baixo.
Usando a pseudo-classe hover vamos setar o y da posição da imagem para 0px para fazer o efeito descrito anteriormente. Repare que o x permanece o mesmo.

Agora é só salvar e testar o menu.

ps: A utilização de uma única imagem de fundo não quer dizer que todos os demais exemplos serão assim. Como esse exemplo só tem três botões prefiri fazer assim. Para que ao carregar a imagem todos os menus aparecerão ao mesmo tempo.

mais sobre:

Maujor – Barra de Navegação