Inserindo Flash válido em XHTML Strict

Julho 28, 2009 at 4:47 pm · Categorias: Dicas XHTML/ CSS

Depois de muito tempo, precisei de um código validado para inserir um arquivo .swf num site. Dei uma rápida pesquisada no oráculo e encontrei a seguinte solução que funcionou muito bem (até onde testei):

<object type=”application/x-shockwave-flash” data=”flash/banner.swf” width=”288″ height=”128″>
<param name=”movie” value=”imagebs/banner.swf” />
<img src=”imagens/banner.gif” width=”288″ height=”128″ title=”Title da Imagem” alt=”banner” />
</object>

Segundo o site onde peguei o código, o código foi testado e funciona no IE 5.01, 5.5, 6.0, Firefox, Opera e Konqueror; além de ser validado no XHTML Strict.

Compartilhe!

Comentários (10) - Gostou do post? Envie para seu amigo

Bordas arredondadas via CSS3

Julho 13, 2009 at 7:23 pm · Categorias: Dicas XHTML/ CSS

Há muito tempo os desenvolvedores já vêm dando um jeitinho (POG) de utilizar bordas arredondadas em suas DIVs, tabelas, etc. Existem soluções via jQuery e várias outras gambiarras via CSS para se utilizar bordas arredondadas.

Porém todas eram justamente isso: gambiarras. O CSS3 trará trouxe uma nova propriedade justamente para acabar com essas gambiarras, a border-radius.

Atualmente, essa propriedade só está funcionando nos navegadores que utilizam as engines Gecko (Firefox) e Webkit (Safari e Google Chrome). Veja um exemplo abaixo:

Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.

Poucos navegadores a estão implementando pois a versão 3 do CSS ainda não foi finalizada, por isso a propriedade em si border-radius não funcionará em navegador algum. Para que ela funcione no Firefox, você deverá utilizar: -moz-border-radius, para funcionar em navegadores com a engine webkit: -webkit-border-radius.

Mas não se preocupe, os outros navegadores simplesmente ignoram essa propriedade caso não a possam renderizar, então você pode utilizá-la tranquilamente, perdendo apenas parte do visual nos navegadores mais antigos.

A propriedade permite que você especifique o quão arredondada você quer que a borda do elemento seja, inclusive especificando um valor diferente para cada canto do elemento, veja o exemplo abaixo e seu respectivo código:

Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.

<p style=”border: 1px solid #000000; padding: 10px; background-color: #bfe4ff; -moz-border-radius: 10px 5px 0 10px; -webkit-border-radius: 10px 5px 0 10px;”> Só quem estiver utilizando o Firefox ou o Safari 3 conseguirão ver as bordas arredondadas nesta div.</p>

Compartilhe!

Comentários (6) - Gostou do post? Envie para seu amigo

Propriedade Vertical-align do CSS não funciona? Erro? Bug?

Junho 29, 2009 at 9:49 pm · Categorias: Dicas XHTML/ CSS

Serei sincero: sempre achei que não funcionava direito; porém, era um ledo engano. Lendo o livro Construindo sites com CSS e (X)HTML do @maujor, descobri o motivo deste atributo “não funcionar” direito na maioria dos casos.

Sabe por que esta propriedade não funciona quando tentamos alinhar um parágrafo ou uma div?

Simples: porque ela foi criada para controlar o posicionamento vertical de elementos inline como: textos, imagens e inputs dentro de um parágrafo. A propriedade não funciona em elementos block.

Vejam só este exemplo:

Este é um texto que estou usando de teste para a propriedade vertical-align, vamos ver se ela alinha uma palavra em baseline, outra palavra com o valor middle na propriedade vertical-align e agora uma pequena frase com o valor text-bottom.

Postando porque tenho certeza que outras pessoas têm e terão essa mesma dúvida, espero que o post seja útil.

Compartilhe!

Comentários (7) - Gostou do post? Envie para seu amigo

Dica CSS: Usando ícones para indicar o tipo do link

Junho 8, 2009 at 9:18 pm · Categorias: Dicas XHTML/ CSS

Que tal avisar para o seu leitor (que não sabe que a URL do link aparece ali no canto inferior esquerdo quando você passa o mouse por cima) que o seu link leva para um arquivo .pdf, ou que o link serve para ele enviar um e-mail, antes mesmo dele passar o mouse por cima do texto do link ou clicar?

Fazia tempos que não dava alguma dica de CSS aqui no blog, então resolvi tirar um tempinho para escrever esta que usei no blog inovaTIvidade (jabá); onde você pode colocar ícones após links de arquivos do Powerpoint, do Excel, do Word, PDFs etc.

Exemplo:

Isso é algo bem fácil de se fazer via CSS, segue o código:

a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/imagens/icones/word.gif) no-repeat center right; }

Esse código faz com que todos os links que terminarem com .doc apareçam com o ícone do Microsoft Word na frente. Basta copiar e colar este código para cada extensão de arquivo que você desejar: .pdf, .ppt, .docx, etc.

Também é possível fazer o mesmo com os links para enviar e-mail através do código:

a[href^="mailto:"] { padding:0 20px 0 0; background:transparent url(/imagens/icones/email.gif) no-repeat center right; }

Vocês podem ver uma demonstração online do código no final deste post do inovaTIvidade.

Compartilhe!

Comentários (6) - Gostou do post? Envie para seu amigo

Sete tutoriais avançados para criar menus via CSS

Novembro 3, 2008 at 2:02 pm · Categorias: Dicas XHTML/ CSS, Web developer

Dica do blog Noupe, com 7 links de tutoriais que ensinam técnicas avançadas de CSS para se criar diversos tipos de menus. O que pode ser um problema, para alguns leitores, é que todos os tutoriais estão em inglês, por isso preferi nem traduzir os nomes dos mesmos.

1) Advanced CSS Menu (demonstração)

2) Advanced CSS Menu Trick (demonstração)

3) Son of Suckerfish Dropdowns (demonstração)

4) Tree Frog slide and fly menu

5) Mike’s Experiment

6) 8 web menus you can’t miss

7) Drop Down Tabs

Compartilhe!

Comentários (3) - Gostou do post? Envie para seu amigo