Assuntos relacionados:

• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Centralizar objeto na página com CSS

Essa dica é só pra quem usa Firefox heim! Você que é desenvolvedor(a) ou webdesigner sabe que uma coisinha mt chata no processo de codificação de layouts, é quando você precisa recarregar uma página para ver as alterações feitas no CSS e ao pressionar F5 ela recarrega completamente, scrips, imagens, swfs, vídeos e etc, isso demora, irrita e consome preciosos segundos e até minutos.

Pesquisei e encontrei a solução para esse problema. Um script feito por alguem que eu desconheço, mas sou muito grata que inserido como botão à barra de favoritos do Firefox (é no IE não dá), irá fazer o refresh somente no CSS da página que estiver aberta, sempre que for clicado.

Fácil de fazer e muito últil:
1º passo
Habilite a Barra de Favoritos (por usar o Del.ici.ous acostumei a não usar)

2º passo
Clique com o botão direito na barra de favoritos, selecione Novo Favorito. Vai aparecer essa janelinha:

3º passo
Em Nome: digite CSS Refresh ou qualquer outra coisa que você quiser.

Em Endereço, cole isso:

javascript:void(function(){var i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())}}})();

Preencha os outros campos se achar necessário.

4º passo
Deixe Carregar no Painel desmarcado.

Clique em “Adicionar”, e seja muito feliz!

Só lamento por não saber como atribuir teclas de atalho pra essa funcionalidade.

Fonte: Revolução

Assuntos relacionados:

• Colocar Rodapé fixo no bottom
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Centralizar objeto na página com CSS

Pra quem tem filho pequeno ou como eu, nunca cresceu e assiste muito desenho animado, sabe bem quem é o panda mestre de kung-fu que toma conta dos coelhinhos irmãos Yin e Yang.

Então, tava afim de fazer um desenho usando só HTML e CSS e decidi fazer do Mestre pq ele é fofo e fácil de fazer.

Eu já tinha feito uma antes, há mt tempo atrás, era um barman com garrafas e um balcão. rs…

Pra quem ama CSS como eu, quem topa fazer uma galeria de Cartoons feitos com códigos?!?!?

♥ OLHA O MEU ♥

Ah, abre no Firefox por favor, eu não testei no IEca.

Assuntos relacionados:

• Biblioteca JavaScript conserta bugs do Internet Explorer
• Colocar Rodapé fixo no bottom
• Refresh apenas no CSS da página
• Banner com DIV Flutuante e Transparente
• Homens com barriga

Banners em DIVs flutuantes são ótimos em substituir os finados pop-ups. Um bom exemplo pode ser visto em portais como Uol e outros de tenham muita publicidade, são muito usados…

Pra fazer o que tinha em mente eu precisava de três informações:

1- Como colocar uma DIV por cima do conteúdo da página.
2- Em casos de Flash, como deixar o fundo transparente.
3- Como fechar a DIV após a exibição, utilizando um link/botão.

Resolvendo as questões:

1- Pra colocar a DIV por cima do conteúdo eu já sabia que bastava usar as propriedades:

position:absolute; z-index:1;

Ok. Next.

2- Pra deixar o Flash com fundo transparente basta colocar entre as tags a linha:

<span> </span>

Pra quem usa o Dreamweaver, quando inserimos um SWF e aparece um bloco de linhas de códigos, geralmente vem com <span> </span>, daí é só trocar o opacit por transparent e pronto.

3- Agora, pra fechar DIVs é que é mais difícil. Eu já sabia da existencia da propriedade visibility:hidden; no CSS, mas não sabia como fazer uma DIV mudar de propriedades ou de classe por um link.

Pesquisei por vários fóruns mas não consegui uma solução, já tava ficando com raiva quando pedi ajuda do meu amigo Ruan que me passou um link ensinando a Exibir e esconder DIV com JavaScript, e pronto, problema resolvido.

Vamos ao que interessa:

1º No código da sua página, cole isso antes da tag :

Esse é o CSS que vai formatar a DIV que vai conter seu banner:

<!-- #nomeDiv{ position:absolute; width:200px; height:200px; z-index:1; left: 166px; top: 209px; } #nomeDiv a{ padding:5px; border:1px solid #000; text-decoration:none; background:#000; color:#fff; } #nomeDiv a:hover{ background:#fff; color:#000; } -->

Esse é o JavaScript que vai fazer o link Fechar funcionar:

<script>// <![CDATA[ function controlaCamada(nomeDiv) { if( document.getElementById(nomeDiv).style.visibility == "hidden" ) { document.getElementById(nomeDiv).style.visibility = "visible"; } else { document.getElementById(nomeDiv).style.visibility = "hidden"; } } // ]]></script>

2º Agora, depois da tag , cole isso:

3º Onde está escrito ESPAÇO, insira o conteúdo do seu banner, pode ser uma imagem, ou textos, ou imagem e textos, ou um SWF, qualquer coisa. Eu como sou nada criativa, fiz um quadradinho andando no seu quadrado, só a nível de demonstração.

4º Antes do código do SWF que vc acabou de inserir, coloque isso:

<a onclick="controlaCamada('nomeDiv')" href="#">Fechar</a>

5º Agora teste. É pra tá funcionando, que nem tá aqui.

Obs.: Onde vc ver “nomeDiv” é o nome que a DIV que contém seu banner deve ter. Caso vc resolva mudá-lo, certifique-se de muda-lo também no CSS e no JavaScript, caso contrário, vai dar zica.

♥ Download dos arquivos do meu exemplo ♥

P.S: Esse post é um presente de Natal pro meu amigo Renzo.

Assuntos relacionados:

• Retire a borda do SWF no InternetExplorer
• Colocar Rodapé fixo no bottom
• Desabilitar ActiveX em sites com JavaScript
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS

Hoje meu amigo Marcus VBP me trouxe boas novidades no ínicio do dia.

Trata-se de uma biblioteca Javascript que serve para fazer com que o Internet Explorer fique compatível com os padrões de desenvolvimento para HTML e CSS.

Resolve questões como PNG transparente, possibilita propriedades com seletores :hover, :focus, :first-child e outros que não funcionavam nas versões antecessoras a versão 7.

Mais uma do Super-Google

♥ Veja exemplos ♥

♥ Baixe a Biblioteca ♥

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Colocar Rodapé fixo no bottom
• [SEO] Novos critérios para resultados de buscas Google
• Google Marketing – O Guia Definitivo do Marketing Digital – Livro
• Desabilitar ActiveX em sites com JavaScript

Vou colocar aqui como lembrete essa dica que um dia eu li em algum tutorial no site do Maujor.

Nesse exemplo eu centralizei uma div de tamanho 780x184px. Observe que se vc diminuir a janela ou aumentar, o conteúdo vai estar sempre centralizado, tanto verticalmente quanto horizontalmente.

O segredo:

No CSS, nas propriedades do objeto que vc quer centralizar (no meu caso é a div #enter), coloque:

left:50%;
top:50%;
position:absolute;
margin-left:-390px; /* metade da largura do objeto, deve ficar negativo */
margin-top:-92px; /* metade da altura do objeto, deve ficar negativo */

E pronto, já era!!

Desculpa não explicar detalhadamente o tutorial, é que estou com um pouco de pressa, mas você pode analisar o código fonte do meu exemplo e vai ver que não é nada difícil.

Assuntos relacionados:

• Colocar Rodapé fixo no bottom
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente
• Biblioteca JavaScript conserta bugs do Internet Explorer

Gostaria de aprender a fazer um menu como este

1º Passo:

Abra um editor de html e crie duas listas. Nomeie cada lista com class’s diferentes. Como no meu exemplo: “eskerda” e “direita”.

<ul class="eskerda"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>
<ul class="direita"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>

2º Passo:

Usando um editor de imagens que faça gifs animados (eu usei o Adobe ImageReady), você vai criar o efeito que você quer que apareça quando o mouse for passado em cima do botão.

Faça a imagem exatamente do tamanho do botão que você pretende criar. Por isso é bom já imaginar o que você quer fazer antes de começar.

No meu caso, eu imaginei fazer um grande menu, com botões do tamanho de 300x60px, então foi exatamente esse tamanho que fiz a minha imagem. Fiz um degradê de verde para a cor de fundo do meu botão, que no caso é ‘cinza escuro’ ou #666666 como preferir chamar.

Ao salvar o gif, NÃO SALVE COM LOOP INFINITO.
Se você acabou de descobrir que não sabe fazer gifs animados, leia esse tutorial.

3º Passo:

No CSS, insira o código abaixo:

*{padding:0; margin:0;} body{ background-color:#CCCCCC; font-family:"Tahoma",Arial, Helvetica, sans-serif; font-size:11px; } .lista, .direita{ float:left; } .lista li{ list-style:none; width:300px; height:35px; background-color:#666666; padding:25px 15px 0px 15px; color:#CCCCCC; border-bottom:1px solid #333; border-top:1px solid #999; border-left:1px solid #333; border-right:1px solid #999; } .lista li:hover{ list-style:none; width:300px; height:35px; background-color:#666666; padding:25px 15px 0px 15px; color:#ffffff; cursor:pointer; background-image:url(hover2.gif); background-repeat:no-repeat; }

Este CSS está todo ‘comentado’, para que você entenda o que cada propriedade vai fazer com seu menu. Se você quiser, pode deletar os comentários (texto que está entre /* … */), não afetará o resultado final.

Pronto! Agora visualize sua página.

Você pode usar outras cores ou criar outros efeitos… vai da sua criatividade!

Assuntos relacionados:

• Colocar Rodapé fixo no bottom
• Menu Drop Down com jQuery
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente

‘speak’
controla se o conteúdo vai ou não ser lido, e caso positivo se vai ser soletrado ou lido normalmente.

‘pause’, ‘pause-before’, e ‘pause-after’
controla as pausas antes e depois de uma leitura. Isto permite ao usuário separar conteúdos, melhorando seu entendimento.

‘cue’, ‘cue-before’, e ‘cue-after’
especifica um som a ser reproduzido antes e depois do conteúdo, o que pode ser valioso para orientação (bastante parecido a um ícone visual).

‘play-during’
controla um som de fundo enquanto o documento é renderizado (bastante parecido a uma imagem de fundo).

‘azimuth’ e ‘elevation’
proporciona uma dimensão ao som, o que permite ao usuário distinguir vozes, por exemplo.

‘speech-rate’, ‘voice-family’, ‘pitch’, ‘pitch-range’, ‘stress’ e ‘richness’
controla a qualidade do conteúdo lido. Variando estas propriedades para os diferentes elementos, os usuários podem fazer uma sintonia fina nos conteúdos lidos da apresentação auditiva.

‘speak-punctuation’ e ‘speak-numeral’
controla a maneira como números e sinais de pontuação são lidos, o que afeta a qualidade da experiência de uma navegação auditiva.

‘speak-header’
controla como deve ser lida as células de cabeçalho, antes das células de conteúdo.

Assuntos relacionados:

• Colocar Rodapé fixo no bottom
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente
• Biblioteca JavaScript conserta bugs do Internet Explorer

Referencia nacional em termos de CSS e (X)HTML!!!

Quem nunca leu o site do Maujor inteiro quando estava aprendendo CSS, ou pelo menos já cruzou com alguns artigos e tutorials sobre XHTML e CSS. Poisé, o Maujor agora saiu da tela e pode ir para a sua prateleira.

Assuntos relacionados:

• Colocar Rodapé fixo no bottom
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS
• Banner com DIV Flutuante e Transparente
• Biblioteca JavaScript conserta bugs do Internet Explorer