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 Dom 27 Jan 2013, 7:44 am

Código:
p {
      text-indent: 30px;
   }

Exemplo

Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.

No exemplo a seguir o texto contido na célula de cabeçalho é alinhado à direita e os contidos nas células de dados são centrados. E, os textos normais em parágrafos são justificados:

Código:
th {
      text-align: right;
   }

   td {
      text-align: center;
   }

   p {
      text-align: justify;
   }

Exemplo

Decoração de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos

são sublinhados, os cabeçalhos

levam um linha em cima e os cabeçalhos

são cortados por uma linha.

Código:
h1 {
      text-decoration: underline;
   }

   h2 {
      text-decoration: overline;
   }

   h3 {
      text-decoration: line-through;
   }

Exemplo

Espaço entre letras [letter-spacing]

O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo

e de 6px entre as letras do texto de um cabeçalho

o código a seguir deverá ser usado.

Código:
h1 {
      letter-spacing: 6px;
   }

   p {
      letter-spacing: 3px;
   }
Exemplo

Transformação de textos [text-transform]

A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.

Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:

capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase
Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".
lowercase
Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".
none
Sem trasformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento
  • (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.

    Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas.

    Código:
    h1 {
          text-transform: uppercase;
       }

       li {
          text-transform: capitalize;
       }

    Exemplo">

  • 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 Dom 27 Jan 2013, 8:34 am

    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 ®