Declaração de direitos autorais: Os direitos autorais deste artigo pertencem ao autor original. A tradução é apenas para referência dos leitores domésticos
. Resumo deste artigo: Os truques CSS mais comumente usados, como cantos arredondados, letras maiúsculas, etc.
Houve uma tradução anterior de "8 truques CSS de uma frase" que apresentou 8 truques CSS de uma frase muito úteis. Esta semana trarei para vocês um artigo semelhante, que apresenta alguns dos truques CSS mais comumente usados, ou é chamado de. Truque CSS. Claro, acredito que todo designer terá algumas preferências pessoais. Pessoalmente, não gosto muito de alguns dos truques do artigo.
1. Não utilize o efeito de canto arredondado da imagem
<div id="container">
<b classe=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–o conteúdo vai aqui –>
<b classe=”rbottom">
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: bloco; altura: 1px;
.r1{margem: 0 5px}
.r2{margem: 0 3px}
.r3{margem: 0 2px}
.r4{margin: 0 1px; height: 2px}
(Muitas pessoas gostam de usar essa técnica de arredondamento, mas eu pessoalmente não gosto muito dela. Apesar de não precisar fazer fotos com cantos arredondados, essas tags extras sempre parece supérfluo)
2. Lista estilizada
<ol>
<li>
<p>Esta é a linha um</p>
</li>
<li>
<p>Aqui está a linha dois</p>
</li>
<li>
<p>E última linha</p>
</li>
</ol>
ol {
fonte: itálico 1em Georgia, Times, serif;
cor: #999999;
}
ol p {
fonte: normal .8em Arial, Helvetica, sans-serif;
cor: #000000;
}
Também gosto muito desse efeito. Você pode aplicar fontes diferentes aos números de série.
3. Formulário sem tabela
4. Técnica de aspas duplas
5. Efeito de palavra gradiente
6. Centralização vertical
Para mais informações, consulte o texto original
10. Letra capitular
<p class=”introdução”> Este parágrafo possui a classe “introdução”. seu navegador suporta a pseudoclasse “primeira letra”, a primeira letra será uma letra maiúscula </p>
p.introduction:first-letter {.
tamanho da fonte: 300%;
peso da fonte: negrito;
flutuar: esquerda;
largura: 1em;
}