#ffffff ou #fff

Postado por: Pedro Rogério em
  • 19 jun
  • 0

Muita gente quando está iniciando em CSS não sabe que as cores podem ser representadas com 3 dígitos, mas há um porém, só podemos fazer isso quando a cor é representada por 3 pares de dígitos iguais, ficou confuso? Vamos a um exemplo:

A cor #000000 (preto) pode ser representada dessa forma: #000. A cor #FF0000 (roxo) pode ser representada dessa forma: #F00.

O truque é pegar sempre a primeira letra de cada par de dígitos hexadecimais. O navegador entende que se, por exemplo, usarmos #F73 (laranja-pastel) em nosso código, ele entenderá que significa #FF7733. Tomemos um exemplo:


p {
  color:#F00; /* É o mesmo que #FF0000; */
}

Essa forma de representar as cores, pode ser usada em qualquer propriedade CSS, tanto para color como para background. Mas há casos em que essa regra não pode ser usada, como por exemplo aqui: #F73309. Como podem ver o 3° e 4° dígitos são iguais, mas não pode ser escrito dessa forma: #F309, isto não funcionaria.

  • Categorias: CSS
  • Tags:
Central Server

Pintou dúvidas: Listas de discussão

Postado por: Pedro Rogério em
  • 15 jun
  • 0

Você precisa entregar aquele trabalho para o cliente urgente, o prazo está estourando, e o cliente é muito chato, e você, de forma alguma encontra uma solução para o seu problema, seja nos buscadores, ou seus rascunhos, eu aconselho você a participar de listas de discussão, a melhor forma de adquirir conhecimento. Eu particularmente aprendi muita coisa com elas, vou deixar aqui algumas listas que particularmente considero ótimas:

WebStandards-br
Grupo de discussão em português sobre os recomendações do W3C para a construção de websites: metodologia ‘tableless’, validação de código, XHTML, CSS, XML, XSLT, navegadores e dispositivos, semântica, acessibilidade, SEO, portabilidade.
ArqHP
Lista de discussão em torno de produção de home pages, abordando HTML, XHTML, XML, tableless, CSS, semântica, validação de documentos, separação de informação da formatação, DOM e demais tecnologias recomendadas pelo W3C.
CSS-D
Lista internacional de discussão sobre CSS

Lista de Diggs Brasileiros

Postado por: Pedro Rogério em
  • 13 jun
  • 3

Quem nunca ouviu falar no famoso Digg.com, aquele famoso site onde você posta uma notícia, elas são votadas e as melhores vão para a home do site. Ele é um site sobre tecnologia que combina bookmarking social, blog e RSS. Agora aqui no brasil existem vários sites semelhantes, mas não tão focados a tecnologia como o Digg.com. Eles são os seguintes:

LINKK

LINKK

Continuar lendo »

Audio Browser: Um browser para invisuais

Postado por: Pedro Rogério em
  • 11 jun
  • 7

Leitores de tela, você já ouviu falar? Sabe pra que serve? Eles são browsers para deficientes visuais, ou seja, todo o conteúdo de um página web será lido pelo programa para o deficiente que está o usando no momento, e o Audio Browser é um deles, baixei esse programa e comecei a fazer alguns testes com o mesmo e fiquei muito satisfeito com os resultados, é bom saber que alguém se preocupa em desenvolver programas desse tipo. Mas também de nada adiantaria se você não desenvolver a sua página de uma forma acessível, ou seja, ele não consegue ler uma página que tem todo o seu conteúdo em flash, por isso, antes de desenvolver páginas desse tipo deve-se pensar também em desenvolver uma versão em HTML. O programa é bem simples e sua interface é bem amigável, como você pode ver abaixo:

Tela principal do programa:

Tela principal do Programa

Continuar lendo »

Trocando a roupa

Postado por: Pedro Rogério em
  • 10 jun
  • 1

Aqueles que trabalham com XHTML e CSS sabem as possibilidades que essas tecnologias lhe proporcionam, e uma delas é você fazer alterações no layout de sua página sem nem sequer tocar no código HTML, uma prova viva disso é o meu outro site: http://www.pinceladasdaweb.com.br/, acabei de mudar o layout, se lembram do antigo? Não, então dêem uma olhada na seção portifólio que ele está lá, e sintam a diferença.

Microformats: Atributo rel=tag

Postado por: Pedro Rogério em
  • 7 jun
  • 0

Hoje iremos ver o Microformato rel=”tag”, destinado a marcar os links com uma tag em concreto. Com toda essa onda de Web 2.0, Folksonomia, as tags ganharam uma forma bonita de catalogar conteúdo. Por isso sugre o Microformato rel=”tag”.

Para se usar esse Microformato, deve-se usar algumas regras:

  • O link deve ser coerente com a tag em questão.
  • A página que estamos linkando deve ser a página que mostra as informações referente
    a essa tag.
  • A URL deve ter, em última instância, a tag que estamos marcando.

Seguindo essas diretrizes, podemos marcar nossos links com rel=”tag”. Mas atenção: Por ser um elemento visível, por exemplo, não poderíamos marcar um elemento link do head com esse microformato. Para uma melhor compreensão, vamos ver um exemplo: No meu Flickr eu usei a tag coreldraw onde eu guardo algumas fotos categorizadas sobre esse assunto. Veja abaixo como ficaria o link:


<a href="http://www.flickr.com/photos/pedroassis/tags/coreldraw/" title="Página com as fotos
marcadas com a tag: coreldraw" rel="tag">coreldraw</a>

Image Replacement – Episódio 2

Postado por: Pedro Rogério em
  • 6 jun
  • 2

Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte:

Aqui o CSS:


h1 {
    height:200px;
    background:url("logotipo.jpg") no-repeat;
    }
h1 span { display:none; }

Aqui só é necessário colocar a altura da imagem e colocar normalmente o “no-repeat” para que não haja repetição alguma da imagem, por que nós não queremos isso. O que entra depois é o “span” com “display:none” para que ele desapareça com o nosso texto.

Aqui o HTML:


<h1><span>Pinceladas da Web</span></h1>

Para que haja uma melhor interação com o tutorial, dê uma olhada nesse exemplo, experimente desabilitar o CSS para ver o resultado.

Páginas:«1...103104105106107108109110111»