Postagens | Dicas blog, Imagem, Pc Windows

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

Fonte minuscula ou maiuscula no blog ou site com CssMostrarei 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-body{text-transform:lowercase;}
.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

9 comentários:

  1. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  2. Alexandre

    Primeiro você precisa aprender fazer o menu, no seu caso você quer um com submenu, procura sites para fazer menu online em Css que é a maneira mais fácil, não é muito fácil instalar eles. Quanto as letras, cada post que você fizer você usa uma letra como marcador, depois, no post você acessa o marcador e copia a Url dele para criar os links do menu. Se quiser faz uma busca aí sobre marcadores do blogger.

    Exclui seu comentário porque não é permitido comentário com email.

    ResponderExcluir
  3. Boas saquei este template e estou a editar todo só que queria o menu com submenu e não sei como o fazer nem como o colocar no topo com o alfabeto.

    a ficar assim

    NOME: Alexandre
    BLOG: http://capasalexandre.blogspot.com/

    Boas a todos, seria possível alguém ajudar-me, eu tenho um blog de capas mas estou a mudar para um template novo e queria meter assim
    Capas DVD, Animação e Blu-Rey mas cada secção com o alfabeto como mostra a imagem
    http://i.imgur.com/vAf4T.jpg

    mas quando vou a uma letra e clico abrir as capas que começão por essas letras (EX: Letra P _Os Pinguins do Sr. Popper - Mr. Popper's Penguins_2011_PT e todos que começar pela a letra (P)..
    Neste causo é menu com submenu e no submenu o alfabeto se me poderem ajudar agradecia imenso é que eu quero reabrir o blog novo antes do fim de ano se for possível..

    ResponderExcluir
  4. Alexandre

    aqui você pode ver onde cria um menu, mas a instalação é um pouco complicada de fazer, uma vez que precisa hospedar as imagens usadas no menu, colocar a parte de Css no local correto e a parte Html seria simples adicionar como gadget, mas depois de hospedar as imagens ainda teria que mudar a Url delas no código Css do menu, sendo assim fica quase impossível explicar como faz, é coisa para quem entende bastante de Html e de blogger.

    Se eu estivesse no seu lugar faria o menu já com os links certos, baixaria ele, e contratava alguém para instalar, encontrei três blogueiros que poderiam fazer esse serviço, eu confiaria neles porque eles tem um nome/blog a zelar, se não confia, você também pode passar seu código para um blog de teste usando outra conta menos importante e dar para eles a senha ou permissão para administrar essa segunda conta menos importante do blogger, antes, pensar bem no meu menu, quer adicionar outros links, como para uma página de perfil, contato, etc e depois faria um orçamento, descrever bem o que você quer, e entrar em contato para ver qual aceita o serviço, preço, etc.
    Presta serviço:
    mundoblogger.com.br
    blogger-dicasmamanunes.blogspot.com
    Templateseacessorios.blogspot.com

    ResponderExcluir
  5. Muito obrigada,me ajudou muitoooooo!

    ResponderExcluir
  6. Esse tutorial salvou a minha vida, rs. Eu estava ficando louca com todas as primeiras letras do meu blog em maiúscula.

    Obrigada.

    ResponderExcluir
  7. Anônimo8/12/13

    SALVOU MINHA VIDA

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares