BOTÃO EM CSS COM EFEITO 3D

O site cssglobe publicou um artigo com 4 técnicas CSS para criar links de texto, links em imagens e links através de botões com efeito 3D. O resultado do botão é uma bonita figura de botão projetado na página que com o passar do mouse se move para baixo. Veja o exemplo. Outro CSS interessante é o que lhe permite adicionar miniaturas de imagens no site que são ampliadas automaticamente quando o visitante passa o mouse sobre elas. Veja o exemplo. O site fornece a dica completa do código CSS que você deve utilizar e um arquivo para download com todos os exemplos.

Defina a altura de uma imagem usando um pixel valor

http://74.125.93.104/translate_c?hl=pt-BR&sl=en&tl=pt&u=http://www.w3schools.com/css/tryit.asp%3Ffilename%3Dtrycss_dim_height&usg=ALkJrhieVJmmR3Zzx7XNgC8SzKasmEpVMQ

CSS para campos textarea de formulário

Com as folhas de estilo CSS pode-se configurar o aspecto de cada elemento de uma página web, de uma maneira muito detalhada. Neste workshop de CSS vamos aplicar estilos aos elementos de formulário Textarea, que são caixas de texto de várias linhas. Veremos vários estilos aplicados sobre textarea, comentando suas distintas propriedades CSS. O objetivo deste workshop não é explicar o modo de trabalho com CSS, e sim, praticar com determinados atributos sobre os textarea. Pode-se encontrar informação básica para aprender a manejar as folhas de estilo em nosso Manual de CSS. Também dispomos de outros Workshops de CSS, onde se poderá aprender a utilizar esta tecnologia na prática.

Antes que nada, podemos ver a página aonde estão aplicados os diferentes estilos que vamos comentar sobre elementos textarea.

Um textarea é um elemento de formulário, logo à princípio deveríamos coloca-los entre

e

. O código HTML mais básico para um textarea é o seguinte:



Já lhe aplicamos uma classe de estilos CSS (estilotextarea), que definiremos na declaração de estilos da página:

.estilotextarea {width:400px;height:100px;border: 2px solid #990000;}

Nesta declaração de estilos indicamos que a largura da caixa de texto seja de 400 pixels e que a altura seja de 100 pixels. Também indicamos uma borda de 2 pixels de tamanho e de cor vermelho escuro.

O efeito é o seguinte:



Agora vejamos outro código HTML para incluir um textarea.



Neste caso, à parte que a classe para definir o estilo do textarea mudou (estilotextarea2), também está sendo indicado umas filas e umas colunas como tamanho do textarea, com os atributos cols e rows. Como os textarea são linhas de texto de várias linhas, com cols indica-se o número de caracteres em horizontal do textarea e com rows o número de filas ou linhas.

Agora o estilo para este textarea seria o seguinte:

.estilotextarea2 {width:300px;height:80px;border: 1px dotted #000099;}

Observamos que com CSS redefinimos a largura e altura, com os atributos width e height. Entretanto, entre a definição com HTML da altura e largura em caracteres do textarea, e a definição com CSS da altura e largura em pixels, manda o que tiver sido definido com CSS. Isto é assim geralmente em todos os casos de estilos que se redefinem com CSS, sempre acabam sendo as folhas de estilo as que predominam no aspecto dos elementos das webs.

Ademais, declaramos uma borda com linha de pontos de 1 pixel de largura no textarea, de cor vermelho escuro. O aspecto final deste textarea será o seguinte:



Agora vejamos um terceiro exemplo de textarea. Primeiro seu código HTML:

Texto de prova

Este textarea tem a particularidade que aparecerá com um texto escrito dentro. Ou seja, quando se visualizar na página web, ao invés de estar vazio, terá escrito o que colocamos entre y , "Texto de prova".

A classe que define o estilo deste textarea pode-se ver a seguir:

.estilotextarea3 {font-family: Garamond,verdana;font-size: 18pt;font-weight: bold;letter-spacing: 5px;}

Como se pode ver, foram definidos nesta ocasião vários estilos para as tipografias que serão utilizadas no texto do textarea. Neste caso, foi definida uma fonte garamond, e como padrão, verdana. Um tamanho do texto de 18 pontos, negrito, e um espaçamento entre letras de 5 pixels.

O resultado pode ser visto a seguir.

Texto de prova

Para acabar, veremos um último textarea ao qual vamos colocar o fundo transparente e no qual vamos modificar as cores das barras de deslocamento do textarea.



Para definir o estilo utilizamos o seguinte CSS:

.estilotextarea4 {background-color: transparent;border: 1px solid #000000;scrollbar-arrow-color: #000066;scrollbar-base-color: #000033;scrollbar-dark-shadow-color: #336699;scrollbar-track-color: #666633;scrollbar-face-color: #cc9933;scrollbar-shadow-color: #DDDDDD;scrollbar-highlight-color: #CCCCCC;}

A cor de fundo é transparente, pelo atributo background-color: transparent; isto quer dizer, que a cor do textarea tem a mesma cor que o fundo da página onde está colocado. Se tivermos o textarea colocado sobre um fundo branco, não observaremos nenhuma diferença com respeito a outros textareas, mas se o tivermos sobre um fundo de outra cor, o textarea se verá dessa mesma cor. Logo, foi aplicada uma borda de um pixel negro e com os restantes atributos se modifica a cor das barras de deslocamento do textarea. Atenção, que os estilos para barras de deslocamento só funcionam no Internet Explorer.

O resultado pode ser visto a seguir:

Com estes exemplos podemos ver algumas interessantes declarações de estilos para elementos textarea de formulário. Esperemos que sirva para fazer seus próprios formulários com mais estilo. Aliás, no Workshop de CSS temos exercícios para aplicar estilos a outros elementos de formulário, como os artigos Decorar um campo select de formulário com CSS, Estilizando formulários ou Estilos em campos de texto.

CSS para imprimir páginas web

Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.



Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.



Com CSS pode-se definir estilos em um documento externo, desta maneira:



<link href="estilos.css" rel="stylesheet" type="text/css">



Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.

Referência: As diferentes maneiras de incluir estilos em uma web estão comentadas em nosso Manual de CSS.

De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:



<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">



O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.



Exemplo de duas folhas CSS distintas para impressão e visualização



Agora vejamos um exemplo de página web que tem duas folhas de estilo diferentes, uma para quando se está no navegador e outra quando vai se imprimir.



O exemplo pode-se ver em funcionamento em uma página a parte.



Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas, que logo construiremos ou posicionaremos com CSS.



<html>

<head>

   <title>informe super quebra-cabeça</title>

   <link rel="STYLESHEET" type="text/css" href="estilo.css">

   <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">

</head>



<body>



<div id="container">

    <div id="cabecalho">

      Super quebra-cabeça

    </div>

   <div id="logo">

       <img src="logo.gif">

   </div>

   <div id="corpo">

    <div id="lateral">

    <ul>

       <li><a href="#">Link 1</a>

       <li><a href="#">Vínculo 2</a>

    </ul>

    </div>

    <div id="direita">

       <div id="principal">

Conteúdo de um possível informe

       </div>

    </div>

   </div>

    <div id="rodape">

    © 2007 CriarWeb.com

    </div>

</div>



</body>

</html>



Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).



Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".



O código CSS de visualização no navegador



BODY {

font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;

margin: 10 0 10 0px;

text-align: center;

background-color: #ffffff;

}

#container{

text-align: left;

width: 770px;

margin: auto;

}

#cabecalho{

background-color: #d0d0ff;

color: #333300;

font-size:12pt;

font-weight: bold;

padding: 3 3 3 10px;

}



#logo{

visibility:hidden;

display: none;

}



#corpo{

margin: 10 0 10 0px;

}

#lateral{

width: 160px;

background-color: #d0d0ff;

float:left;

}

#lateral ul{

margin : 0 0 0 0px;

padding: 0 0 0 0px;

list-style: none;

}

#lateral li{

background-color: #ffffff;

margin: 2 2 2 2px;

padding: 2 2 2 2px;

font-weight: bold;

}

#lateral a{

color: #3333cc;

text-decoration: none;

}



#rodape{

background-color: #cccccc;

padding: 3 10 3 10px;

text-align:right;

clear: both;

}



#principal{

background-color: #ffffff;

padding: 0 0 0 20px;

width: 580px;

float: left;

}



#principal table{

background-color: #ffffff;

width: 580px;

border: 2px solid #cccccc;

font-size:10pt;

}



O código CSS que se utilizará para a impressão da página



BODY {

   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;

   margin: 10 0 10 0px;

   text-align: center;

    background-color: #ffffff;

}

#container{

    text-align: left;

    width: 600px;

    margin: auto;

}

#cabecalho{

   visibility:hidden;

   display: none;

}



#logo{

   visibility:visible;

   display: block;

   margin-left: 20px;

}



#corpo{

    margin: 10 0 10 0px;

}

#lateral{

   visibility:hidden;

   display: none;

}



#rodape{

    background-color: #cccccc;

    padding: 3 10 3 10px;

    text-align:right;

   clear: both;

}



#principal{

    background-color: #ffffff;

    padding: 0 0 0 20px;

    width: 600px;

    float: left;

}



#principal table{

   background-color: #ffffff;

    width: 600px;

   border: 2px solid #cccccc;

   font-size:10pt;

}



Novamente, colocamos o link para que se possa ver a página do exemplo de estilos de impressão CSS.

Nota: Se quisermos ver como se imprimiria a página, porém sem a necessidade de utilizar a impressora (para não gastar papel nem tinta ou se não tivermos impressora), podemos acessar ao menu Arquivo - Visualizar impressão ).

Molduras para fotos com CSS

Neste workshop de CSS vamos criar uma série de 4 molduras para fotos, que podemos utilizar em uma página web para melhorar a presença, porém sem complicar nossa vida. Uma vez escolhida a moldura que mais gostemos, podemos utiliza-la repetidas vezes na página para que todas as fotos sejam vistas de maneira parecida e ganhe também um pouco de personalidade o design da web.

Para fazer esta série de molduras, evitamos o uso de imagens adicionais, só as fotografias, o que faz com que o desenho seja mais fácil de aplicar, definindo somente os estilos CSS.

Podemos ver o resultado conseguido em uma página a parte.

Primeira moldura CSS, que é simples e aplica estilos tanto ao container da foto como à própria imagem.

.moldura1 {
padding:8px;
background-color: #f5f5f5;
width: 200px;
border: 1px solid #999999;
}
.moldura1 IMG{
border: 1px solid #000000;
}

Neste caso definimos um espaço entre a moldura e a foto, uma cor de fundo e uma borda. Com a segunda declaração estamos definindo também uma borda de cor preta para a imagem, para que fique mais ressaltada.

Vejamos agora a segunda moldura, que quisemos fazer uma borda como com relieve.

.moldura2 {
padding:8px;
background-color: #f5f5f5;
width: 200px;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}

Definimos estilos CSS para um espaço entre a foto e a borda do container, uma cor de fundo e as bordas mencionadas, que só se aplicam abaixo e à direita.

Agora definimos uma moldura muito simples, mas que lembra as fotos instantâneas de Polaroid.

.moldura3 {
padding:8px 8px 20px 8px;
background-color: #ffffff;
width: 200px;
border: 1px solid #999999;
}

Simplesmente definimos uns espaços entre a foto e a borda do elemento, onde o espaço debaixo é maior para emular a moldura das Polaroid, que era mais larga embaixo.

Logo, colocamos uma borda ao próprio container para que se diferencie com o fundo da página, que também é branco.

Por último criamos uma moldura com sombra. Esta moldura com sombra sem utilizar imagens é um pouco mais complicado no código HTML, porém ainda mais no código CSS. Este efeito de sombra com CSS já foi explicado em outro artigo anterior em CriarWeb.com, por isso não daremos mais explicações, e sim a referência ao artigo: Efeito de sombra com CSS

.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
width: 224px;
}
.shadow, .content{
position: relative;
bottom: 2px;
right: 2px;
}
.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}
.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
.content IMG{
border: 1px solid #000000;
}

Como vemos no código HTML, utilizam-se três containers diferentes, para emular o efeito de degrade da sombra, que é mais escura perto do objeto e mais clara à medida que a sombra se afasta do objeto.

Teremos que definir estilos para cada um dos três containers. O bom é que, como os estilos se definem pelas classes CSS, só teremos que defini-los uma vez e poderemos utiliza-los em todas as imagens que desejarmos.

Mapear uma imagem apenas com css

Veremos como mapear uma região sem o uso da tag map, utilizando apenas CSS.

Vejo muita gente usando a tag map para mapear determinada regiao e juntamente com um link, não sabendo que está em desuso.



Nesse exemplo que posto aqui criei um layout com um topo que é uma imagem qualquer com 758 de largura e 50 de altura, mas quero que quando a pessoa clicar sobre a imagem volte a home. A diferença é que não quero que esse link ocupe a imagem toda, quero apenas que ocupe 200px da imagem. Hoje em dia isso é muito usado na maioria dos sites, o problema é que o pessoal usa ainda a tag map para fazer isso....



Segue o código:



<html>



<head>



<style type="text/css">



body{

margin:0px;

padding:0px;

text-align:center;

background-color:silver;

font-family:arial, verdana, serif;

font-size:11px;

}



#moldura{

width:758px;

height:500px;

margin:0 auto;

background-color:white;

text-align:left;

}





ul {

position: relative;

list-style: none;

margin:0;

padding: 0;

width: 758px;

height:50px;

background-image: url(carro02.jpg); <!--a imagem que vai receber o link-->

backgrond-repeat: no-repeat;

}





a {

position: absolute;

display: block;

text-decoration: none;

}







a.regiao {

width: 200px;

height:50px;

margin:0 auto;

}





a:hover {

border:none;

}





#topo {

width:758px;

height:500px;

margin:0 auto;

}



</style>



</head>



<body>



<div id="moldura">



<div id="topo">



<ul>

<a href="teste_home.htm" title="home" class="regiao"></a>

</ul>



</div>



</body>



</html>

Lição 16: Web-standards e validação

Lição 16: Web-standards e validação

W3C é a sigla para World Wide Web Consortium, uma organização independente que gerencia as normas para codificação na Internet (isto é, HTML, CSS, XML e outros). Microsoft, Fundação Mozilla e muitas outras organizações são membros do W3C e formam um consenso sobre o futuro desenvolvimento de normas.

Se você tem alguma experiência com web design, provavelmente sabe que há uma grande diferença na maneira como diferentes navegadores renderizam uma página. É frustante e requer um consumo de muito tempo, criar uma página que possa ser visualizada consistentemente no Mozilla, Internet Explorer, Opera e no restante dos navegadores existentes.

A idéia da normatização é criar um consenso e encontrar um denominador comum para uso de tecnologias para a Web. Isto significa que seguindo as normas, um desenvolvedor terá a certeza de que sua criação será tratada de maneira apropriada em diferentes plataformas. Assim, nós recomendamos que você se beneficie do trabalho desenvolvido pelo W3C e valide sua CSS para estar em conformidade com as normas.

Validador CSS

Para facilitar a verificação aos preceitos das normas CSS, o W3C desenvolveu um validador que faz uma verificação da folha de estilos e retorna um relatório com os eventuais erros e avisos caso sua CSS não valide.

Para facilitar a validação da sua folha de estilos você poderá submetê-la ao validador aqui mesmo nesta página. Na caixa de texto abaixo, substitua a URL existente pela URL da sua folha de estilos e clique no botão para validar. Você será informado pelo site do W3C se há erros na sua folha de estilos.



Se o validador não encontrar erros; será mostrada uma imagem como a abaixo, que você poderá usar na sua página para anunciar que está usando um código válido:



O validador pode também ser encontrado neste link: http://jigsaw.w3.org/css-validator/