Arquivo da tag: coner.js

Border-Radius em todos os navegadores

Outra coisa que geralmente me deixa furioso é ter que fazer border-radius usando sobreposição de imagens, e criar uma infinidade de codigo css e javascript para conseguir executar esta função tão querida dos nossos colegas designers.

Então o ultimo site que recebi solicitando a propriedade de border-radius nas imagens começei uma odisseia testando varios scripts que prometiam fazer o indicado em todos os navegadores, inclusive o famigerado IE. Demorei algum tempo de pesquisa, mas finalmente encontrei o javascript que faz o que eu preciso.

Corner.js é o nome da aplicação que eu precisava. Funciona de uma maneira bem simples, basta vc colocar algumas descrições a mais em uma classe indicando o que vc quer que faça e o resto é por conta do script. Como eu uso wordpress, tive que fazer um pequeno ajuste via jquery para que a classe fosse adicionada automaticamente em toda a imagem nova publicada.

Depois de feito download do script, coloquei ele na pasta js/ que fica dentro na pasta do meu tema, algo assim wp-content/themes/meu-tema/js/. Depois inseri este codigo no arquivo functions.php

wp_enqueue_script('corner', get_bloginfo('template_url') . '/js/corner.js', array

Que é uma maneira elegante de chamar o javascript que vc precisa, sem colocar ele diretamente no arquivo header.php, ou algo do genero. Coloquei ele precisando do jquery pois vou precisar do jquery para colocar as classes necessarias.

No arquivo header.php antes do escrevi o seguinte codigo:

<script type="text/javascript">
* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery("img").addClass("corner iradius15");
    });
/* ]]> */
</script>

Isto faz com que todas as imagens do site tenham border-radius 15px.

Testei em todos os navegadores quanto eu consegui, e funcionou em todos.