Marcelo Torres

Entradas etiquetadas como ‘css’

PNG transparente no IE6

05/10/2009 · 1 Comentário

Apesar de cada vez mais(e graças a Deus) o uso do IE6 está em queda, principalmente depois que o Orkut, YouTube e outros serviços “populares” avisarem que não irão mais dar suporte a esta coisa que a Micro$oft chama de Navegador de Internet, temos que fazer com que o layout funcione igual aos outros navegadores mais modernos, por uma questão muitas vezes de público-alvo, e umas das coisas que mais incomodam é o fato do IEca6 não suportar imagens PNG transparentes e acaba mostrando no lugar um “cinza-azul” que fica bem estranho pra não dizer ridiculo! Então neste post mostrarei 2 script para resolver esta situação, um para a tag img e outra para as imagens adicionadas nas CSS.

Antes de tudo adicione o seguinte comentário condicional, dentro das tag <head></head>, para que o script seja carregado quando o usuario estiver usando o IE6.

<!--[if IE 6]>
<script type="text/javascript" src="pngtransparentcss.js"></script>
<script type="text/javascript" src="pngtransparent.js"></script>
<![endif]-->

onde pngtransparentcss.js e pngtransparent.js são os arquivos que veremos a seguir:

Vamos então ao script para a tag IMG:

  1. baixe o arquivo – pngtransparent.js;
  2. coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
  3. Pronto é só isso! caso não funcione adicione class=”png_transparent”, dentro da tag img.

Vamos agora as imagens adicionadas nas CSS:

  1. baixe o arquivo – pngtransparentcss.js;
  2. coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
  3. abra o arquivo pngtransparentcss.js, localize a linha da função DD_belatedPNG.fix e dentro das aspas simples coloque os seletores (class e id)onde estão as imagens transparentes nas CSS.

Por exemplo:

CSS: #topo {[...] background-image:url(“../images/bg-transparente.png” );[...]}

pngtransparentcss.js: DD_belatedPNG.fix(‘#topo’);

Nota: se quiser colocar mais de um seletor, separe com “,”(virgula).

créditos dos scripts:

É isso ai pessoal, qualquer dúvida é só comentar.



Categorias: (x)html/css · Javascript/JQuery
Etiquetado: , , ,

WordPress + JQuery – Lista de categorias em Menu Accordion

16/08/2009 · 9 Comentários

Olá pessoal depois de muito tempo sem postar nada por aqui, trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.

Passo 1:

Baixe o Jquery, caso não o tenha ainda.

Passo 2:

Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema, apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.

Passo 3:

Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/jquery.js“></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/menuaccordion.js“></script>

Onde <?php bloginfo(‘template_directory’);?> é o endereço dos diretórios do WordPress até chegar no seu tema([...]wp-content/themes[...]) e jquery.js e menuaccordion.js são os arquivos javascript que você baixou e criou respectivamente na pasta do seu tema.

Passo 4:

Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:

$(document).ready(function(){
$(‘#accordion-container > li > a’).bind(‘click’,function() {
var $next = $(this).next();
if ($next.is(‘:visible’)) return false;
$(this).parent().parent().find(‘li > ul:visible’).slideUp(‘normal’);
$next.slideDown(‘normal’);
return false;
});});

Não esqueça de salvá-lo.

Passo 5:

Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:

#menu-accordion ul {margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container {width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li {margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a {display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover {background: #666;}ul.accordion-menu {display:none;background:#000;}
#menu-accordion ul.accordion-menu a {display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover {color:#fff;}

Não esqueça de salvá-lo.

Passo 6:

Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)

<div id=”menu-accordion”>/* div pai que engloba todo o menu*/

<ul id=”accordion-container”>/* essa parte é muito importante, essa “ul” ele engloba toda a formação do accordion*/

<li>/*aqui começa a primeira opção do menu*/

<a href=”#”>Opção 1</a>/* Link que expandirá quando clicado, para abrir as sub-opções, que nada mais é que as categorias que você definir*/

<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/

<?php wp_list_categories(‘title_li=&include=48, 50′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, os números 48, 50 são os ID desse exemplo, o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acimas das opções*/

</ul>

</li>/*aqui termina a primeira opção do menu*/

<li>/*aqui começa a segunda opção do menu*/

<a href=”#”>Opção 2</a>/*Idem  da Opção 1*/

<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/

<?php wp_list_categories(‘title_li=&include=49, 42′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, agora eu coloquei os números 49, 42 , você pode definir quantas categorias quizer, igual a “Opção 1″ o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acima das opções*/

</ul>

</li>/*aqui termina a segunda opção do menu*/

</ul>

</div>

E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site. Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.

Inté++ fui

Categorias: Javascript/JQuery · Tutoriais · WordPress
Etiquetado: , , ,

Galeria de imagem com CSS puro

06/05/2009 · Deixe um comentário

Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem  com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao IE6 e ao Opera. Falando em IE6(esta porcaria), o efeito do :active tem uma pequena diferença dos outros navegadores, no IE6 quando a imagem for clicada ela irá ampliar normal, mas quando o botão do mouse deixar de ser pressionado a imagem permanece ampliada e nos outros navegadores(Firefox, Opera, Safari, Chrome, IE7…) a imagem some para o usúario escolher outra, não consegui descobrir um jeito para consertar isso, se alguem descobrir é só falar ai nos comentários que eu adicionarei com os devidor créditos!

Bom vamos ao que interessa…

A estrutura do arquivo (X)HTML ficaria assim:

[...]
<div id="galeria">
<small>Clique na miniatura para aumentar a imagem</small><br /><br />
 <a class="thumb" href="#thumb">
 <img src="imagens/thumb_image1.jpg" alt="" />
 <span>
 <img src="imagens/1.jpg" alt="" />
 </span>
 </a>
</div>
[...]

Onde dentro do <a> vai ficar as duas imagens, o thumbnail(miniatura) e imagem com tamanho maior(recomendo 400×300, ou aproximado),o thumbnail será a imagem clicada que recebe um link “cego” a imagem maior fica dentro de um <span> onde será feito a “mágica” com css, para aparecer quando for chamada, segue a “mágica”

Arquivo CSS:

*{padding:0;margin:0;}/*deixar margem e padding dos elementos com padrão zerado*/
small{font-size:12px; font-weight:bold;color:#333;}/*formata a mensagem de como visualizar as imagens*/
#galeria{background-color:#9FCBFF;position:relative;width:720px;margin:25px auto;padding:10px;text-align:center;}/*div pai, que englobará as imagens*/
a.thumb img{background-color:#fff;border: 1px solid #999;padding:3px;}/*estiliza as miniaturas*/
a.thumb span{position:absolute;background-color: #000;padding: 10px;left:-10000px;visibility: hidden;color: black;text-decoration: none;}/*começa a mágica*/
a.thumb:active span{visibility:visible;top: 50px;left: 120px;z-index: 50;}/*termina a mágica!*/

As declarações CSS principais para o efeito são:

a.thumb span:

  • left:-10000px; – Joga as iamgens que estão sentro do <span> para -10000px do monitor, sendo assim esconde do campo de visão
  • visibility: hidden; – Simplesmente desaparece com a imagem

a.thumb:active span:

  • visibility: visible; - Faz a imagem aparecer quando a miniatura for clicada, ativando o pseudo-elemento :active
  • z-index: 50; – poe a imagem maior sobre as miniaturas
  • top: 50px; e left:120px; – posiciona a imagem maior na tela

Baixem um exemplo completo aqui

Categorias: (x)html/css · Desenvolvimento · Design · Navegadores · Tableless · Tutoriais · Web Standards
Etiquetado: ,

Currículo dos Padrões Web

16/11/2008 · Deixe um comentário

Estava dando uma passada, no Revolucao.etc, e me deparei com uma postagem muito interessante: “Currículo dos Padrões Web”, o Danillo Nunes está fazendo um trabalho magnifico traduzindo o curso de padrões Web oferecido gratuitamente pela Opera Software, cujo objetivo é ensinar e incentivar a prática do desenvolvimento web de forma correta. Já fora traduzidos 3 artigos, de um total de 39 publicados em inglês.
Então, como disse o Henrique Pereira(Revolucao.etc) vamos incentivar/ajudar o Danillo Nunes a continuar seu trabalho.

Segue o Link: Tradução do “Currículo dos Padrões Web”, por Danillo Nunes

Categorias: Acessibilidade · Cores · Desenvolvimento · Design · Tableless · Tutoriais · Web Standards
Etiquetado: ,

Image-replacement…

27/01/2008 · Deixe um comentário

Essa é uma técnica usada para substituir uma texto, por uma imagem, isso faz com que o texto não fique visivel ao úsuario, mas fique visivel ao browser, conservando assim a acessibilidade. Há várias formas para se executar essa técnica, porém vou postar aqui a que eu uso e acho mais simples:

1º monte o documento (X)HTML

...
<body>
<h1>Image-replacement</h1>
</body>
...

Onde h1 é o elemento que será substituido pela imagem

Agora faça a folha de estilo:

h1{
background: url(image-replacement.jpg) no-repeat;
text-indent:-9999px;
width:250px;
height:100px;
overflow:hidden;
}

  • background terá a imagem que substituirá o texto

  • text-indent é o que fará o texto sumir, neste caso o texto será deslocado -9999px da sua posição original, parece absurdo esse valor, mas é pra garantir que em monitores com resolução maior, ou até dois monitores trabalhando junto o texto não apareça

  • overflow é apenas para garantir que o texto não fique vísivel mesmo!

  • width e height é apenas o tamanho da imagem que você escolher

Faça o teste usando outras formas e tags, ou seja é só adaptar ao que se torne necessário e como eu já disse há dezenas de maneiras de se fazer uma Image-Replacement, para saber mais visite esse link:

http://www.tableless.com.br/image-replacement-x-imagens

Valeu pessoal até a proxima!

Categorias: (x)html/css · Acessibilidade · Tableless · Tutoriais · Web Standards
Etiquetado: , , ,