SP-Design

Seja bem-vindo ao SP-Design. Aqui, lhe ajudaremos com o tema de seu Fórum/Blog/site, vocês poderão solicitar e fornecer ajuda a outros usuários sobre o design e estrutura, tanto grafica, tanto em css e templantes.


Regulamento e informações:      
Equipe SP-Design
Regras do fórum
Como entrar na equipe Staff
Seções do fórum:
Pedidos Graficos
Pedidos de Códigos
SP-Design e você
Antes de postar uma dúvida:
Função busca
Perguntas e respostas frequêntes
Tutoriais, dicas e astúcias
Feliz ano novo para você!
Leia a carta de boas festas da equipe SPD.
Área Vip, os códigos mais inovadores
Obtenha os códigos mais inovadores de nosso fórum, atraves de pontos de Cash.
Leia as Regras do SP-Design
Acabou de chegar? Para se "enturmar" rapidamente leia as regras desse fórum.
Tutoriais e Dicas
Veja aqui nossos tutoriais inéditos, e muitos outros tutoriais sobre Design.
Publique no SPublicidade
Publique, peça opinião de pessoas experientes, divulgue o seu trabalho com o SPublicidade
Modifique o visual do seu fórum
Dúvidas sobre códigos HTML, CSS, BBCode e JQuery. Também, poderá tirar dúvidas sobre Templantes.
Faça Pedidos Gráficos para seu fórum
Este é um serviço gratuito para customização e criação de banners, logos, avatares, ícones...
Novo Administrador na comunidade
Pro Administradores adicionam novo administrador na equipe SPD.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar

Designer Grafico

em Sex 25 Jan 2013, 12:44 pm

Código:
h1 {
      color: #ff0000;
   }
   

Exemplo

As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima (#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).

A propriedade 'background-color'

A propriedade background-color define a cor do fundo de um elemento.

O elemento contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade background-color ao elemento .

Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos e

.

Código:
body {
      background-color: #FFCC66;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;

   }
   

Exemplo

Notar que foram aplicadas duas propriedades ao elemento

separadas por um ponto e vírgula.

Images de fundo [background-image]

A propriedade CSS background-image é usada para definir uma imagem de fundo.

Usaremos a imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.


Código:
body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }

Exemplo

NB: Notar como foi especificado o caminho para a imagem usando url("butterfly.gif"). Isto significa que a imagem está localizada no mesmo diretório da folha de estilos. Pode ser escolhido um outro diretório para gravar as imagens e o caminho seria url("../images/butterfly.gif") ou até mesmo hospedá-la na Internet: url("http://www.html.net/butterfly.gif").

Imagem de fundo repetida [background-repeat]

No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.

A tabela a seguir mostra os quatro diferentes valores para background-repeat.

Peço que veja no proprio tutorial por que nao consegui faze-la aqui: http://pt-br.html.net/tutorials/css/lesson3.php

CONTINUANDO

Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:

Código:
body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   

Exemplo

Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente com o elemento que a contém.

Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.

A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferença entre imagem fixa e imegem que rola.

Peço novamente que veja a tabela aqui: http://pt-br.html.net/tutorials/css/lesson3.php

Por exemplo, o código abaixo fixa a imagem na tela.

Código:
body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   

Exemplo

Posição da imagem de fundo [background-position]

Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela.

Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:


Na tabela a seguir são mostrados alguns exemplos .

Novamente a tabela, ~~: http://pt-br.html.net/tutorials/css/lesson3.php

No exemplo de código a seguir a imagem é posicionada no canto inferior direito da página:

Código:
body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right bottom;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   

exemplo

Compilando [background]

A propriedade background é uma abreviação para todas as propriedades listadas anteriormente.

Com background você declara várias propriedades de modo abreviado, economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender.

Por exemplo, observe as cinco linhas a seguir:

Código:
background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;

Usando background você consegue o mesmo resultado, abreviando como mostrado abaixo:

Código:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

A declaração abreviada deve seguir a seguinte ordem:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment e background-position não foram declaradas no código mostrado a seguir:

Código:
background: #FFCC66 url("butterfly.gif") no-repeat;

As duas propriedades não declaradas assumirão o valor default que como você já sabe são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os valores default para as propriedades não declaradas).

Sumário

Nesta lição você aprendeu técnicas que não são possíveis com uso de HTML. A brincadeira continua na próxima lição onde examinaremos as possibilidades de estilização das fontes.

Fonte: " target="_blank" rel="nofollow">http://pt-br.html.net/tutorials/css/lesson3.php">


Staff SPD

Olá Convidado, bem vindo ao SP-Design
Aconselhamos que fique atendo a esses detalhes.
Respeite as regras e conheça a equipe.
Faça seus pedidos na Área Design.
Não pratique o Flood
Não peça suporte por MP
Experimente nosso Editor de imagens
SP-Design
avatar

Desenvolvedor Web

em Sex 25 Jan 2013, 6:22 pm


Olá,

Este tutorial estará sendo movido, pois o mesmo está sendo aceito.

Até mais.

Tutorial aceito e movido para "Outros tutoriais, e recursos"


Staff SPD

Olá Convidado, bem vindo ao SP-Design
Aconselhamos que fique atendo a esses detalhes.
Respeite as regras e conheça a equipe.
Faça seus pedidos na Área Design.
Não pratique o Flood
Não peça suporte por MP
Pedidos de Códigos
SP-Design

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Você não está conectado. Conecte-se ou registre-se



Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

 

Atualizado com e-referrer
Publicidade | SEJA NOSSO PARCEIRO
Naruto Rpg FutureLes power infoMaster ExpShiftactifThe forum of Codes

2012 © SP-Design - Ajuda na criação de códigos e na aparência de seu Fórum™ - Design de Cyllaz - Todos os direitos reservados ®