Post sobre |Dicas blog, imagem, Pc windows

Fontes maiúsculas com Css, exibir ou impedir, exemplo o comentário no BlogSpot

fonte minuscula ou maiuscula no blogMostrarei o código Css responsável por deixar as letras maiúsculas em sites e blogs, ou mesmo impedir que fiquem em maiúsculo, ou seja, deixar elas em minúsculo mesmo que tenham sido digitadas em maiúsculo, como exemplo vou mostrar uma maneira de evitar os comentários em 'caixa-alta' nos blogs do blogger, sem precisar pedir isso aos comentaristas, fiz isso aqui no blog, uma vez que não adiantou muito colocar o aviso nas regras para comentários.

Com esse estilo eu diminui uma regrinha nos comentários, e quase resolvi o problema, uma regra a menos também aumenta a possibilidade do leitor ler as outras.

Importante: O Css não muda a forma como o texto foi escrito, apenas muda sua forma de exibição, ou seja, se foi escrito em minúsculo continuará minúsculo, porém, poderá ser exibido em maiúsculo, ou vice-versa.
Para entender melhor, abaixo criei uns exemplos, e escrevi em maiúsculos e outros em minúsculos, mas a maneira que você vê eles eu é quem determinei usando Css, você pode imaginar o Css como uma maquiagem.

Códigos Css para caixa alta e baixa

text-transform:capitalize; Primeiras letras em maiúsculas, de cada palavra.

text-transform:uppercase; Tudo em maiúsculo

text-transform:lowercase; Tudo em minúsculas

text-transform:none; Normal como for escrito, raramente é necessário seu uso, pode ser usado se outras áreas tem um text-transformer e você quer que um local naquela área não normal.

font-variant:small-caps; Mostra todas as letras em um tipo de maiúsculas, porém as minúsculas um pouco reduzida no tamanho, deixando o texto 'maiúsculo' mas mais bonito do que se fosse maiúsculo mesmo, e, as letras que forem escritas em maiúsculo parecem maiores, assim fica diferenciável um inicio de frase

Exemplo de texto com fonte alterada, maiúscula ou minúscula

Os exemplos abaixo, o estilo Css está aplicado diretamente na parte do Html, isso porque são exemplos, mas o mais correto é adicionar a parte do Css que fica entre as tags head ou arquivo externo, claro que é diferente dos exemplos abaixo.
Código com text-transform:uppercase;
text-transform:uppercase; obriga a as letras ficarem em maiúsculo, mesmo se forem escritas em minúsculo, o problema é que muitas pessoas consideram feio ou desconfortável para ler.<p style='text-transform:uppercase;'>
Frase em maiúsculo
</p>

Resultado:

Frase em maiúsculo

Código com text-transform:capitalize;
Esse código, text-transform:capitalize; faz com que a primeira letra de cada palavra fique em maiúsculo, mas não modifica as demais, ou seja, se escrever uma palavra em maiúsculo, essa continuará em maiúsculo.<p style='text-transform:capitalize;'>
frase escrita em minúsculo, a primeira letra de cada palavra ficará em maiúsculo
</p>

Resultado:

Frase escrita em minúsculo, a primeira letra de cada palavra ficará em maiúsculo

Código com text-transform:lowercase;
text-transform:lowercase; obriga a as letras ficarem em minúsculo, mesmo se forem escritas em maiúsculo, o problema dele é fazer isso no inicio de frases e até nomes, ou seja tudo.<p style='text-transform:lowercase;'>
Frase em Minúsculo mesmo que tenha sido escrita em MAIÚSCULO
</p>

Resultado:

Frase em Minúsculo mesmo que tenha sido escrita em MAIÚSCULO

Código com font-variant:small-caps;
font-variant:small-caps; obriga as letras serem exibidas em maiúsculo, mas, um maiúsculo mais agradável um pouco, com a letra um pouco mais baixa, e, onde é possível diferenciar uma letra que foi escrita usando maiúsculo, o texto deve ser escrito normalmente, e ela fará o diferencial.<p style='font-variant:small-caps;'>
Frase escrita em Minúsculo. Aparecerá em Maiúscula menor
</p>

Resultado:

Frase escrita em Minúsculo. Aparecerá em Maiúscula menor

Fica bem melhor do que um texto em maiúsculo, mas mesmo assim algumas pessoas podem não gostar, e nem todo layout fica bonito com esse tipo de estilo para fonte.

Os exemplos acima mostram o estilo Css diretamente na tag Html, abaixo você verá um código que se aplica ao Css que pode estar entre as tags head ou em arquivo externo.

Evitar caixa alta nos comentários do blogger
O código Css abaixo, primeiro vai evitar a exibição em maiúscula, a segunda parte irá deixar a primeira letra do comentário em maiúscula, mas isso não se aplicará ao comentário do autor, sendo assim, o autor do post deverá comentar usando ortografia correta.
.comment-content,.comment-body{text-transform:lowercase;}
.comment-content p:first-letter,.comment-body p:first-letter{text-transform:capitalize;}

Veja onde adiciona Css no blogger

O problema do código acima, é que se o comentarista usar duas frases, a segunda não terá letra maiúscula, nem algum outro nome próprio que ele citar, mas isso só valerá para o que ele comentar, não para seu nome que é exibido nos comentários.

Se você entende um pouco de Css, também pode usar o código acima para diferenciar os comentários dos outros do comentário do autor, já que o código acima não se aplicará ao autor, você pode deixar a fonte mais clara ou mais escura, e, nos comentários do autor a fonte continuará como era antes, ou personalize o comentário do autor.

Problemas, modelos com partes em maiúsculas

Algumas vezes aparece alguém aqui perguntando como mudar um título ou uma parte de seu blog/site que está em maiúsculo mesmo que tenha sido digitado em minúsculo.

Primeiramente, você teria que saber o nome dessa área para mudar ela no seu Css, mas, se todo seu modelo está legal e você não quer nem um local apresentando maiúsculas(a não ser as digitadas) fica mais fácil, basta ver no seu Css se encontra um desses códigos abaixo, ou ambos e excluir eles, se tiver em dois locais também.

Códigos Css responsáveis por exibir maiúsculas:font-variant: small-caps;
text-transform: uppercase;

Se o problema for o inicio de cada palavras em maiúsculas, o responsável é:text-transform: capitalize;

Ao excluir esses códigos faça uma cópia de seu modelo antes, caso errar em algo. Tenha cuidado para não excluir ou adicionar algum outro caracter, isso pode dar problemas.

No blogger, você pode modificar seu Css no mesmo local onde adiciona Css.

Para quem quer saber mais de Css, uma referencia é o site Maujor.com

1 comentários:

Postar um comentário

  • Atenção, o comentário será postado em outra página e não estará aqui, se usar o comentário para perguntar, use uma conta e o link: Subscribe by email(abaixo) e poderá ser avisado.
  • Comentário com e-mail será ignorado
  • Antes de perguntar leia o texto até comentários e pesquise
  • Será ignorado comentário sem relação com o assunto ou com Url de blog/site(Divulgar? Clique)
  • Comentário reflete a opinião do comentarista. Desde já, Obrigado!

GoogleCustom Search

Dinheiro para blogs
Google Adsense HOTWords
Divulgação de blogs
Inscreva seu blog/site: