Categoria Dicas CSS - Uma visão geral das CSS

Posted by webmaster | CSS |
O nascimento do HTML

A linguagem de marcação HTML foi desenvolvida e aperfeiçoada até tornar-se tal como a conhecemos nos dias atuais a partir de uma “invenção” devida a pesquisadores, para trafégo de seus textos e informaçõesde natureza científica.
Assim, o embrião do HTML surgiu para servir a uma comunidade bastante restrita (a de cientistas).
Com a introdução gradativa de novas tags e aplicações específicas àquela linguagem de marcação, HTML tornou-se o padrão mundial de exibição de conteúdo na Web.

O HTML atual

E, já com várias inovações o HTML era usado para construção de páginas Web, que no início limitavam-se a exibir informações contidas nos documentos Web.
A evolução vinha atropelando tudo com uma avalanche de novos aplicativos, facilidades, softwares, hardware e etc. E o HTML não passou ao largo, pelo contrário, a simples linguagem de marcação destinada a apresentar conteúdos carecia de uma maior flexibilidade no sentido de manipular visualmente os conteúdos Web.
Novas tags e atributos foram inventados tais como a tag <font> e o atributo “color” que permitiam alterar a aparência de textos.
Assim nasceu a “estilização” dos conteúdos Web. E a evolução trazendo novas descorbertas, corre célere neste dinamismo alucinante que estamos testemunhando.
Novas tags e novos atributos de estilo são introduzidos no HTML. Com isso, a velha linguagem de marcação passou a exercer uma dupla função na exibição de conteúdos.
A função de exibir o conteúdo e a função
de estilizá-lo (dar-lhe a aparência visua, a apresentaçãol).

Os problemas criados

Mas, esta dupla função do HTML, paradoxalmente que possa parecer acabou trazendo sérios problemas aos projetistas Web.
O crescimento e sofisticação dos documentos Web publicados na Internet, estavam fugindo do controle de seus criadores.
Para uma idéia concreta do a que me refiro imagine a seguinte situação: seu melhor cliente telefona às 17:00h da tarde de uma sexta-feira (sempre ligam nesta hora para solicitar alguma coisa não é mesmo?) e diz o seguinte; “teremos uma reunião aqui na empresa, na segunda-feira às 0800h com um potencial comprador e é nossa intenção fazer uma apresentação dos nossos produtos através do site que você criou e mantém.
Seguindo uma sugestão do nosso departamento de marketing precisamos mudar a cor de todos os títulos no site de verde para vermelho, pois que esta é a cor principal da marca do nosso comprador e com isso pretendemos fixar uma cumplicidade subliminar.
Isto é bem simples de fazer, não é? Afinal é só mudar a cor! Dá para você “botar no ar” até às 19:30h ?
Quero dar uma olhadinha antes de encerrar o expediente. OK?
Claro que você concorda e responde que vai providenciar rapidinho, afinal é só para mudar a cor. Mas, são 180 páginas no site! E os títulos são tags de cabeçalho deste tipo: <h1><font color=”#00FF00″>Texto do título</font></h1>
Supondo uma média de 3 títulos por página, você tem um total de 540 tags <font> para editar e mudar o atributo “color”. E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Sei, você vai responder que no seu editor com “localizar e substituir”, faz isto rapidinho. Bem, este é um exemplo bem simplista só para dar uma dimensão de um dos problemas criados com a mistura de marcação com estilização!

A solução proposta - As CSS

Cada vez mais ficava evidente que a mistura de marcação com estilização que maravilhou os projetistas Web no início, tornara-se uma grande dor de cabeça.
E, é claro, a solução passava por dissociar linguagem de marcação da estilização.
Desta necessidade, eu diria mesmo uma imposição, nasceu as CSS, sigla em inglês para “Cascading Style Sheet” que em português foi traduzido para Folha de Estilo em Cascata”.
A partir de então, para conseguir esta dissociação, usaremos os elementos (tags) HTML exclusivamente para marcar e estruturar o conteúdo do documento.
Nenhum elemento HTML será usado para alterar o visual, ou seja estilizar o conteúdo.
A tarefa de estilização ficará a cargo das CSS que nada mais é do que um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os elementos do HTML. Estas declarações de estilo quer sejam estruturadas em um arquivo externo com extensão .css quer sejam declaradas de outros modos (incorporadas, importadas, inline - ver Inserindo folhas de estilo para maiores esclarecimentos) contém todas as regras de estilo para os elementos do documento HTML.
Voltando àquela situação criada no item anterior, agora você mudaria a cor de TODOS os cabeçalhos <h1> em TODO o site em CINCO SEGUNDOS.
Às 19:20h você retorna a ligação do cliente e pede para a secretária avisá-lo de que “já está no ar”, sem maiores traumas, correrias e estresses. Ah e mais, mesmo que o site tivesse 1.800 páginas e não as 180 da situação criada, você gastaria os mesmoscinco segundos.

As restrições

A idéia, a filosofia mesmo, de projeto web aponta para uso amplo das CSS, ainda não explorada em toda sua potencialidade por ocorrências de incompatibilidades de certas propriedades CSS com navegadores mais antigos e até mesmo com as interpretações diferentes das CSS por parte das aplicações de usuários de fabricantes distintos.
Há uma tendência (e torcemos para que se concretize) de que as novas tecnologias voltadas para o desenvolvimento, não só das variadas aplicações de usuário como também de softwares e hardwares, atendam e se enquadrem dentro das recomendações e especificações dos órgãos normatizadores com ênfase para a W3C ( as WEB Standards). Quando o projeto Web em todas as suas incontáveis variantes seguir a normatização e padronização recomendada pelos órgãos oficiais, teremos uma Web muito mais fácil, dinâmica e agradável.

Tags:

Categoria Dicas CSS - Modificando o cursor com CSS

Posted by webmaster | CSS |

Este artigo tem por objetivo mostrar a regra CSS para mudança do aspecto do cursor.

Introdução
Você com certeza já notou que quando passa-se o mouse sobre um link o cursor transforma-se de seu aspecto default (uma “setinha”), para um “mãozinha”.
E, já deve também ter notado uma transformação para um “I” quando o mouse está sobre um texto.
Com a utilização das CSS pode-se modificar o aspecto do cursor do mouse na tela do usuário quando ele navega no seu site.
A mudança pode ser feita tanto para toda a página web navegada, quanto para qualquer elemento HTML.
Com CSS é possível determinar qual o aspecto o cursor assumirá, dentre aqueles escolhido de uma lista permitida, que veremos a seguir.
Inclusive mudar o aspecto da “mãozinha” em links, o que aliás não é recomendado :-)

Os valores CSS para o cursor
Abaixo uma lista com os valores CSS admitidos para estilização do cursor.
Passe o mouse sobre o valor, para ver o aspecto do cursor.

wait
crosshair
n-resize
se-resize
help
text
ne-resize
sw-resize
pointer
move
nw-resize
e-resize
default
w-resize
s-resize

A regra CSS para modificar o cursor em um elemento HTML
Para exemplificar a regra, vamos supor um parágrafo com a seguinte frase:
Neste parágrafo, aqui neste trecho o cursor mudou!

E, vamos mudar o aspecto do cursor quando o mouse passar sobre “aqui neste trecho”.

O HTML da frase, com a tag <span> envolvendo o local onde o cursor vai ser modificado:
<p> Neste parágrafo, <span> aqui neste trecho <span> o cursor mudou! </p>

E a aplicação do estilo inline no elemento <span>
Neste parágrafo, <span style=”cursor: help”> aqui neste trecho </span> o cursor mudou! </p>

E a seguir a regra CSS em ação!
Passe o mouse sobre “aqui neste trecho”.
Neste parágrafo, aqui neste trecho o cursor mudou!

A regra CSS para modificar o cursor em toda a página
Para modificar o cursor na página aplicamos a regra CSS do cursor na tag do documento todo ( a tag <body> - a página web) como mostrado no exemplo abaixo:
<body style=”cursor: wait”>
E o visitante ficará “perdido” na sua página pensando
que há algo carregando que não acaba nunca! :-)

Considerações finais
Mostrei neste artigo como modificar o aspecto do cursor do mouse.
Você pode fazer a modificação para qualquer elemento HTML ou até mesmo para a página toda.

DICAS
Dica 1:
Cuidado ao modificar o cursor. Use esta regra com bom senso para não confundir o visitante;
Dica 2:
O cursor “help” é um bom uso para links que remetem a textos de ajuda ou esclarecimentos.

Tags:

Categoria Dicas CSS - CSS em Formularios

Posted by webmaster | CSS |

::Objetivo::
Mostrar como personalizar um formulário de contato com uso de CSS.

::Um formulário padrão::
Um formulário de contato típico consta de:
três campos de input para texto: nome,
e-mail e assunto;
um campo textarea para o texto da mensagem;
um input tipo botão para envio da mensagem.

Vamos admitir nosso formulário “dentro” de uma tabela, com duas colunas e seis linhas, tudo conforme mostrado abaixo:

Tags:
Page 2 of 2«12