Como retirar o by Feedburner do seu botão

Postado por: Pedro Rogério em

Se lembram daquela frase “By feedburner” que fica embaixo do botão do Feedburner que indica o número de assinantes do Feed? Existe uma forma muito simples de “retirar” aquela frase e mostrar somente o botão própriamente dito com CSS:

Vamos ao nosso código CSS:


.feedburner {
height: 19px;
width: 88px;
overflow: hidden;
}

Nosso HTML ficaria assim:


<div class="feedburner">Aqui você coloca o código do seu botão</div>

Veja um exemplo em funcionamento. O que ocorre é que foi criada uma div com 19px de altura, sendo que o botão normal tem 26px, com isso, usando overflow:hidden, ele não cria uma barra de rolagem para o conteúdo excedente, e o mesmo fica invisível.

Aprenda PHP, MySQL, JavaScript, CSS

Postado por: Pedro Rogério em

O projeto Ya, sites com tutoriais sobre PHP, MySQL, JavaScript, CSS entre outros, disponibiliza cursos gratuitos para desenvolvedores Web, que vão desde o nível básico até o avançado, ideal para aqueles que estão iniciando agora com desenvolvimento web. Além do mais você não precisa ter nada instalado no PC, pois todos os códigos podem ser vistos e excutados on-line.

Tutocle – Tutoriais para desenvolvedores web

Postado por: Pedro Rogério em

TutoCle

TutoCle é um buscador focado em encontrar material relacionado ao desenvolvimento web. Se você usa Firefox, pode incluir em seu browser um plug-in para fazer as buscas diretamente dentro do Firefox, você pode também efetuar buscas através da nuvem de tags que encontra no site, ou mediante palavras chave.

Crash IE com CSS

Postado por: Pedro Rogério em

Para você ter sérios problemas com o IE não precisa de JavaScript, ou qualquer outra coisa, basta somente 23 linhas de puro XHTML e CSS que você verá que o IE é verdadeiramente um browser ultrapassado:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
  <head>
   <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″/>
   <title>index</title>
   <style type=“text/css”>
     body { width:755px; }
			ul#nav { position:absolute; }
			ul#nav li { display:inline; }
			ul#nav li a { float:left;display:block;margin:0 1px 0 0;width:150px; }
			ul#nav li a:hover { background:#ddd; }
   </style>
  </head>
 <body>
  <ul id=“nav”>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
  </ul>
 </body>
</html>

Veja um exemplo em funcionamento nessa página. Ou você também pode ver esse vídeo.

Guia CSS – 11ª parte: Links e pseudo classes

Postado por: Pedro Rogério em

Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:

  • a:link {color: #009900;}
  • a:visited {color: #999999;}
  • a:hover {color: #333333;}
  • a:focus {color: #333333;}
  • a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Continuar lendo »

Quotes em CSS

Postado por: Pedro Rogério em

Quotes ou citações, são aquelas aspas que colocamos em nosso texto. Com CSS, você pode fazer isso de uma forma muito simples, peguemos o seguinte código CSS:

Quotes em CSS

E o nosso código HTML ficaria da seguinte forma:


<q>Esta é uma citação <q>encaixada</q> dentro de outra citação</q>

Que seria mostrado da seguinte forma: “Esta é uma citação ‘encaixada’ dentro de outra citação”. Reparem que tudo que está dentro das aspas(que eu destaquei em vermelho), é o que será mostrado no navegador. Você também pode usar < , >, *, ? e outros caracteres.

Truque CSS desconhecido

Postado por: Pedro Rogério em

A um mesmo elemento podemos designar distintas classes da seguinte maneira:


<div class="primeira segunda terceira">…</div>

As classes devem ser declaradas dessa forma, separadando com espaço os nomes dos seletores podemos aplicar quantas classes quisermos ao mesmo elemento. Você conhecia esse truque? Conte-me aqui a sua experiência!