Design

10 Regras Básicas de CSS Para Páginas Mais Bonitas

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Para facilitar a vida de quem quer dar um “tapa” no visual do blog, uma coleção básica de estilizações em CSS. Entre elas, algumas das mais procuradas como texto com sombra, sombra em caixas e imagens, bordas arredondadas, etc.

Note que são estilizações bem elementares nos novos padrões, e devem funcionar sem problema em todos os navegadores modernos. O Internet Explorer 9 aceita a maior parte, mas não todas ainda (será que na próxima versão ele resolve? Esperamos que sim).

Cuidado para não exagerar nos enfeites, use com moderação e bom gosto. Nada de transformar seu blog num circo de horrores.

 

1 Sombra em texto

Com a propriedade text-shadow você pode criar simples sombras projetadas até efeitos de chanfro e texto repetido. A regra básica é:

.textosombra { text-shadow: 1px 2px 1px #000; }

Isso daria uma sombra no texto com 1px de deslocamento horizontal, 2px de deslocamento vertical, 1px de desfoque (aquele efeito borrado), e na cor preta (hexadecimal #000 – também poderia usar o black em vez do valor).

Você teria algo similar ao visto na página de exemplos, em text-shadow.

2 Sombras em elementos

Imagens e divs aceitam uso da propriedade box-shadow. A regra é parecida com a de sombra em textos, veja:

.sombreado {
box-shadow: 1px 3px 3px #000;
-moz-box-shadow: 1px 3px 3px #000;
-webkit-box-shadow: 1px 3px 3px #000;
}

3 Cantos arredondados

Divs com cantos arredondados. Não funciona bem com imagens a não ser que esta seja o elemento de fundo (background) da div. O que estiver dentro dela pode não seguir o arredondamento.

.arredondado {
border-radius: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

4 Opacidade

Excelente para criar efeitos de rolagem do mouse, como em botões e imagens (usando em imagens, seria algo como img:hover { regra para baixar opacidade })

.menosopaco {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

5 Transparência em cores com RGBA

Um modo de criar preenchimento com cores semi-transparentes é o rgba. Em vez de declarar a cor pelo hexadecimal ou nome, usa-se o valor por cada canal RGB, mais um canal Alpha para a transparência. É simples, veja como ficaria a regra:

.meiotransparente {
background-color:rgba(255,255,255,0.5);
}

Usamos no caso a propriedade background-color (cor de fundo do elemento), com os valores para a cor preta (255 no canal R, 255 no G, 255 no B) e 0.5 para 50% de preenchimento. Para um tom mais escuro, poderíamos mudar o último valor para 0.8.

6 Ícone de pré-carregamento

Alguns blogs tem muitas imagens e elas podem não aparecer logo, ficando um “buraco” no lugar até que seja carregada. Você pode colocar um ícone como esse aí embaixo no lugar delas enquanto são carregadas, muito fácil e sem scripts.

img {
background: url(loader.gif) no-repeat center center;
}

Você vai precisar de um gif animado de carregamento como os que podem ser criados no site Preloaders.net. Coloque-os em seu servidor e coloque o endereço do arquivo no lugar do “loader.gif”. Por exemplo, se você colocou o gif na pasta raíz do blog, provavelmente o url será algo como http://www.seublog.com.br/loader.gif.

7 Fontes diferentes das padrão

Usar fontes que o leitor do blog não tem instaladas no computador foi um desafio por muito tempo, mas na internet moderna isso já não acontece (ou não deveria acontecer). O @font-face garante que a fonte seja carregada pelo visitante para a correta exibição dos textos com fontes especiais.

@font-face {
font-family: 'minhafonte'; 
src: 
url('minhafonte.web.eot?#iefix') format('embedded-opentype'),	
url('minhafonte.web.woff') format('woff'),
url('minhafonte.web.ttf') format('truetype'),	     url('minhafonte.web.svg#svgminhafonte') format('svg');
}

Então defina um identificador para quem usará a font-family criada:

.fonteespecial { font-family: 'minhafonte' }

Você vai precisar dos arquivos das fontes em um servidor. Note que algumas fontes podem ter direito autoral proibindo uso “embedado” em sites e blogs. Leia também essa matéria completa sobre @font-face.

Leia também → Tipografia em Web Design: @font-face à Prova de Erros, no Tutoriart

8 Texto em maiúsculas

Precisa dar maior destaque a alguns textos, mas não acha legal digitá-los em maiúsculas? Afinal, em algum momento você pode querer alterar isso e se tiver digitado assim em mil artigos… Dê uma estilizada nesses textos assim:

.textogrande { text-transform: uppercase; }

9 Texto brilhante

Para blogs com fundo escuro, texto brilhante é uma opção muito bacana para efeitos de rolagem. Isso pode ser observado no

.brilhante {
text-shadow: 0 0 8px white;
}

Estranhou que estou usando o text-shadow de novo, né? Mas é isso aí, agora com sombras sem deslocamento (valores 0), 8px de desfoque (qualquer valor semelhante e alto funciona) e uma cor clara bem mais clara que o fundo escuro.

Se quiser o brilho mais intenso, duplique o valor assim:

text-shadow: 0 0 8px white, 0 0 8px white;

10 Mover elementos de posição

Criar efeitos de botão, como um leve movimento na posição do objeto (como uma div com um link) é fácil. Só precisa usar CSS para determinar a posição relativa do objeto e no hover colocar a variação da posição.

.botao { position: relative }
.botao:hover { top: -1px }

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin