著作権に関する声明: この記事の著作権は原著者に帰属します。翻訳は国内の読者の参考のみを目的としています
。 この記事の概要: 角丸、ドロップキャップなど、最も一般的に使用される CSS テクニック。
以前、非常に便利な 8 つの一文 CSS トリックを紹介した「8 One-Sentence CSS Tricks」の翻訳がありました。今週は同様の記事をお届けします。これは、最も一般的に使用される CSS トリック、またはそれと呼ばれるもののいくつかを紹介します。 CSSのトリック。もちろん、どのデザイナーにも個人的な好みがあると思いますが、私個人としては、この記事にあるいくつかのトリックがあまり好きではありません。
1. 画像
<div id="container">
の角丸効果を使用しないでください。
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–ここにコンテンツが入ります –>
<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 *{表示: ブロック; 高さ: 1px;
.r1{マージン: 0 5px}
.r2{マージン: 0 3px}
.r3{マージン: 0 2px}
.r4{margin: 0 1px; height: 2px}
(多くの人がこの丸め手法を使用することを好みますが、私は個人的にはあまり好きではありません。角を丸くした画像を作成する必要はありませんが、これらの余分なタグは常に使用されます。
2. スタイル付き
リスト
<ol>
<リ>
<p>これは 1 行目です</p>
</li>
<リ>
<p>ここが 2 行目です</p>
</li>
<リ>
<p>最後の行</p>
</li>
</ol>
オル {
フォント: イタリック体 1em Georgia、Times、セリフ。
色: #999999;
}
olp {
フォント: 通常の .8em Arial、Helvetica、サンセリフ。
色: #000000;
}
シリアル番号にさまざまなフォントを適用できるこの効果もとても気に入っています。
3. 表のないフォーム
4. 二重引用符のテクニック
5. グラデーションワード効果
6. 垂直方向のセンタリング
詳細については、原文を参照してください。
10. ドロップキャップ
<p class=”introduction”> この段落には、クラス「introduction」があります。あなたのブラウザは疑似クラス「first-letter」をサポートしています。最初の文字はドロップキャップになります。 </p>
p.introduction:first-letter {
フォントサイズ: 300%;
フォントの太さ: 太字;
フロート: 左;
幅: 1em;
}