Copyright statement: The copyright of this article belongs to the original author. The translation is for domestic readers' reference only
. Summary of this article: The most commonly used CSS tricks, such as rounded corners, drop caps, etc.
There was a previous translation of "8 One-Sentence CSS Tricks" that introduced 8 very useful one-sentence CSS tricks. This week I will bring you a similar article, which introduces some of the most commonly used CSS Tricks, or It's called a CSS trick. Of course, I believe that every designer will have some personal preferences. I personally am not too fond of some of the tricks in the article.
1. Do not use the rounded corner effect of the image
<div id="container">
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”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: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
(Many people like to use this rounding technique, but I personally don’t like it very much. Although I don’t need to make pictures with rounded corners, these extra tags always feel superfluous)
2. Styled list
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
I also like this effect very much. You can apply different fonts to the serial numbers.
3. Form without table
4. Double quotation mark technique
5. Gradient word effect
6. Vertical centering
For more information, see the original text
10. Drop cap
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>
p.introduction:first-letter {
font-size: 300%;
font-weight: bold;
float: left;
width: 1em;
}