CSS の頭文字属性はドロップ キャップ効果を実装します (コード例)

CSS でドロップ キャップ効果を実現するにはどうすればよいですか?この記事では、CSS でドロップ キャップ効果を実現する方法を紹介し、initial-letter 属性を使用してドロップ キャップ効果を実現する方法を説明します。困っている友人は参考にしていただければ幸いです。

まず、initial-letter 属性がどのようにしてドロップ キャップ効果を実現できるかを理解しましょう !

initial-letter 属性: CSS インライン レイアウト モジュール レベル 3 の新しいモジュールで提供されます。これはドロップ キャップ効果を非常に簡単に実現するのに役立ちますが、適用できるのは、文字通りブロックコンテナ。また、CSS pseudo-element::first-letter と一緒に使用する必要があります。例:

.intro::first-letter {
    color: #bf4055;
	initial-letter: 3;
}

レンダリング:

頭文字属性では 2 つの値を設定できます:

initial-letter：值1 值2;

値 1 : を示します行の高さ;

値 2: 沈み込みの深さを示します。

ここでは、簡単なコード例を使用して効果を確認します:

.raised-cap::first-letter {
color: #bf4055;
initial-letter: 3 1;
}
.sunken-cap::first-letter {
color: #bf4055;
initial-letter: 3 2;
}
.drop-cap::first-letter {
color: #bf4055;
initial-letter: 3;
}

効果の画像:

そうですよね。非常に便利でシンプルですが、残念なことに、この属性をサポートしていないブラウザがまだ多くあります。どのブラウザがこの属性をサポートしているかを見てみましょう (緑色の表がサポートしています):

現在、この属性に対するブラウザのサポートはまだ赤色ですが、@supports を使用してダウングレード処理を実行し、ブラウザがこの属性をサポートしているかどうかを判断し、ドロップ キャップ効果を実現できます。

// 浏览器支持 采用下面的方法
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
  .intro:nth-of-type(1)::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}
// 浏览器不支持 采用 伪元素+浮动的方法
@supports (not (initial-letter: 5)) and (not (-webkit-initial-letter: 5)) {
  .intro::first-letter {
    color: #bf4055;
    font-size: 7.1875rem;
    float: left;
    line-height: .7;
    margin: 17px 2px 0 0;
  }
}

Rendering :

@supports 文法 の核心はこの文にあります: @supports (...) { }、内部かっこは CSS 式です。ブラウザーがかっこ内の式が正当であると判断した場合、かっこ内の CSS 式が表示されます。

以上は、ドロップキャップを実現するためのcss擬似要素フローティング方法についてです。前回の記事[CSSでドロップキャップ効果を実現するには？擬似要素フローティングエフェクト]に詳しい紹介があります。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS 基本ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル をご覧ください。

関連する推奨事項:

CSS オンライン マニュアル

CSS3 オンライン マニュアル

Web デザイン ビデオ チュートリアル

css3 特殊効果コード集

以上がCSS の頭文字属性はドロップ キャップ効果を実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。