Homer em CSS puro - sem imagens

Posted by micox at Abril 11th, 2008

Pois é…

Tem que tá com muuuuito tempo sobrando, ter muita criatividade e domínio do CSS. E o pior é que não ficou bizarro. O negócio ficou bom, muito bom.

Autor: Román Cortés

Descoberto via: Dkcell

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
•
•
•
•
•
_
_
_
•
•
•
C
C
O
(
-

Posted in webstandards| 13 Comments | 

Ultimate Micox Menu drop-down CSS - até 4 níveis

Posted by micox at Março 7th, 2008

HOoooaa. E ae malucada.

Há um tempo eu venho brigando em busca do código de menu css drop-down perfeito.
Eu queria um menu dropdown css pra copiar e colar, simples, rápido, sem precisar de configurações.
Apenas copiar/colar no meu CSS, definir cor e largura dos itens, usar a classe no html e pronto. E tudo funcionando nos navegadores mais usados (FF, IE6/7, OP).

Ontem eu postei a peça que faltava (ativar hover no IE6 via css).
Veja o exemplo online (e o código fonte) do Ultimate Micox Menu Drop Down CSS até 4 níveis.

Bem, vamos aos códigos:
Primeiro é só fazer seu velho menu usando UL e LI. 

<ul>
 <li>class='menu-hv'</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
  <ul style='background-color: red; '>
   <li>31</li>
   <li><a href='#'>32</a></li>
   <li>33</li>
  </ul>
 </li>
 <li><a href='#'>4...</a>
  <ul>
   <li>41</li>
   <li><a href='#'>42</a></li>
   <li><a href='#'>43...</a>
    <ul  style='background-color: blue'>
     <li>431</li>
     <li><a href='#'>432...</a>
      <ul  style='background-color: gray'>
       <li>4321</li>
       <li><a href='#'>4322</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>44</li>
  </ul>
 </li>
</ul>

Depois você coloca a classe menu-hv no UL (ou no div pai de UL) para ativar o menu horizontal com submenus verticais. Para o menu vertical vertical (em pé) a classe é menu-vv. 

<ul class='menu-hv'>

Por último é só colocar o código do Ultimate Micox Menu drop-down CSS (UMMDDCSS huahe) no seu arquivo CSS ou em um arquivo CSS separado. O local onde você pode alterar a cor, largura, etc dos itens do menu está indicado no código. Não mexa no resto pra não correr o risco de estragar. 

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* características horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* características vertical-vertical */
 .menu-vv { float: left; }
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   ALTERE ABAIXO. defina a largura, cor, formatações, etc, dos itens do seu menu abaixo
   ou apague as linhas se for definir em outro lugar
 */
 .menu-hv li { width: 100px; background-color: yellow }
 .menu-vv li { width: 100px; background-color: yellow }
 .menu-hv li a:hover { background-color: cyan }
 .menu-vv li a:hover { background-color: cyan }

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Pronto! Agora ficou fácil fazer um menu drop down CSS. É só copiar e colar isso aí no código. Não precisa pegar javascript externo, não precisa quebrar cabeça com floats ou displays. É só colocar isto no seu documento e fazer seu menu ul-li.

Os espertos devem ter percebido que dá pra aumentar a quantidade de níveis facilmente adicionando novos níveis onde começa os visibility: hidden né? heheh

Bom, é isso aí. Dúvidas, é só postar lá no fórum. Até a próxima diversão.

Posted in menus, webstandards| 21 Comments | 

Ativando .hover e .first-child no IE 6 - um novo método

Posted by micox at Março 6th, 2008

Tamo de volta malucada

Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.

Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc

Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).

A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.

Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:

li:first-child , li.first-child { color: red }

Abaixo, o código que faz a mágica e deve ser colocado no começo do seu css. Quem não entender me pergunta nos comments.

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC){
	who.MXPC = '1';
	if(who.nodeName != 'A'){
		who.onmouseenter=function(){ who.className += ' hover'};
		who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
	(who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

“Viiixxxxxx maria, onde eu coloco isso mico?” - Não tema o código Sr.! Apenas coloque ele no começo do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.

O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.

Em breve tô de volta. Té mais.

Posted in bugs, bugs_ie, webstandards| 11 Comments | 

Simulando position fixed no Internet Explorer (IE) - sem javascript

Posted by micox at Setembro 25th, 2007

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser independente da movimentação da barra de rolagem.

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

Como resolver isto SEM JAVASCRIPT só no CSS?

Primeiramente imagine duas divs dentro de um documento:

- Uma das divs tem dimensões de 400×400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

- A outra div é uma pequena imagem de 25×25 que está posicionada exatamente sobre a div do conteúdo anterior.

…

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

O Exemplo: Simulando position fixed no Internet Explorer - IE

O código pronto

<style type="text/css">
	/* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
	.fixed { position: fixed !important; }
</style>
<!--[if lt IE 7]>
	<style type="text/css">
		/* FAZ O POSITION FIXED PARA O IE (não mexa).
			Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
			By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
		 */
		.fixed { position: absolute !important; }
		body { height: 100% !important; width: 100% !important;
			   margin: 0 !important; position: relative;  }
		html { overflow-y: hidden !important;  }
		#newbody { position: relative !important; overflow-y: scroll !important;
				   height: 100% !important; width: 100% !important; margin: 0 !important; }
	</style>
<![endif]-->

<style type="text/css">
	/* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED
	   MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY
	*/

</style>

Detalhes:

Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

Muitos gringos já falaram sobre a técnica, mas aqui no Brasol parece que ninguém falou ainda. Estranho…:

Comenta aí malucada. Ninguém comenta mais :(

Posted in bugs, webstandards| 13 Comments | 

Editar CSS no IE e FF simultaneamente com CSSVista

Posted by micox at Setembro 21st, 2007

Hopa.

Que tal editar simultaneamente o CSS no Firefox e no Internet Explorer?
Pode ser uma boa.

Então experimenta o CSSVista aí e me diz o que achou.

Posted in webstandards| 1 Comment | 

Next Postings »