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

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

Essa foi a minha melhor descoberta do ano!!! É bastante chato pra um webdesigner fazer formulário, acredite, text input, text area, submit, select, etc, nossa… e fazer funcionar é pior ainda. Eu pelo menos como não sei PHP, ficava pedindo pra programadores amigos fazerem pra mim, só que como serviço de graça vai pro final da fila, esses formulários nunca saiam.

Daí que um belo dia navegando na web eu descobri esse site pForm e na mesma semana eu recebi pelos feeds do blog do Bruno Ávila esse outro phpFormMail. São sites que geram formulários PHP “funcionando” e ainda disponibiliza área de Admin pra configurar o formulário e oferece opção de download. Não acredita?? Eu também não acreditei!! Tudo é feito seguindo no máximo 3 passos, preenchendo as informações que vc quer que tenha. Claro que pra conseguir gerar o formulário o designer tem que conhecer pelo menos as tags de formulário do HTML mas se não souber ainda bem que existe o W3School pra ajudar.

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Como fazer Links de Âncora
• Print Screen Sequenciado
• Tag PRE ♥ Tag CODE

Links de âncora servem pra auxiliar na navegação de páginas longas, faz com que um link redirecione direto à um ponto específico, posicionando-o no topo da página, pode ser usado dentro da mesma página ou em outra. É muito útil para quem se preocupa com a Usabilidade e Acessibilidade dos sites.

Como fazer?

LINK PARA DENTRO DA MESMA PÁGINA:

No link coloca-se o seguinte:

<a href="#ancora"> ... </a>

P.S: #ancora é o nome da sua âncora, é para onde o link vai levar.

No local pra onde vc quer que o link vá, coloque:

<a name="ancora"> ... </a>

Ainda não entendeu? Veja o exemplo:

<a href="#ancora">LOCAL DO LINK</a> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <a name="ancora">Você vai parar aqui!</a>

LINK PARA OUTRA PÁGINA:

Também dá pra fazer um link de âncora para uma outra página. Exemplo:

<a href="endereco.php#ancora"> ... </a>

P.S:
- endereco.php é o nome do arquivo;
- #ancora é o nome da sua âncora, é para onde o link vai levar.

Boa sorte!! :)

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Gerador de Formulário PHP
• Tag PRE ♥ Tag CODE
• Aprenda HTML

A tag code serve pra escrever um trecho de código sem que o navegador reconheça e aplique como código da página, ele deve aparece como um bloco de texto comum, que nem um páragrafo.

A tag pre, que eu saiba até agora, serve pra deixar o bloco de texto igualzinho como no código, tipo, se você escrever um bloco de código, e quiser colocar quebra de linha, não dá pra usar o porque ele vai ser reconhecido como parte do código e vai aparecer assim e não como a quebra de linha que você queria, então, no código você dá um enter no final da linha, e colocando tudo dentro da tag pre, a quebra de linha aparece no navegador.

Porém, se colocar a tag pre dentro da tag code, vai dar erro de validação, o que não é bom. Então, pra resolver esse problema, meu namorado descobriu como fazer a tag code ter a atribuição de quebra de linha da tag pre, usando CSS. :)

É só inserir essa propriedade:

code { white-space:pre; }

P.S: Eu coloquei essa propriedade no CSS do meu blog, pra aparecer como está acima. Caso eu não tivesse feito isso, esse bloco de código, estaria com as palavras uma ao lado da outra, e não com as quebras e linhas e espaço como está.

Outro exemplo:

#divtest{ padding:20px; color:#0000ff; }

Agora eu deixo uma dúvida: É valido colocar um formulário

dentro da tag

?

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Gerador de Formulário PHP
• Como fazer Links de Âncora
• Aprenda HTML

Eu encontrei essas imagens na internet, e infelizmente não lembro aonde, por isso não dá pra colocar a fonte.

Assuntos relacionados:

• 10 Browsers Mobile mais utilizados
• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Gerador de Formulário PHP
• Como fazer Links de Âncora