Latest web development tutorials

CSS3のテキストエフェクト

CSS3のテキストエフェクト

CSS3のテキストは、いくつかの新機能が含まれています。

この章では、次のテキストの属性を学びます。

  • テキストの影
  • ボックスシャドウ
  • テキストオーバーフロー
  • ワードラップ
  • ワードブレーク

ブラウザのサポート

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

テキストの影CSS3

CSS3では、テキストshadowプロパティは、影をテキストに適用されます。

テキストシャドウ効果！

あなたは、水平影、垂直影、色、距離ぼかしや影を指定します。

OperaSafariChromeFirefoxInternet Explorer

例

タイトルに影を追加します。

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

»をお試しください

CSS3ボックスシャドウプロパティ

CSS3ではCSS3ボックスシャドウプロパティは、ボックスシャドウに適用されます

例

div要素{
ボックスシャドウ：10pxの10pxの;
}

»をお試しください

次に、影に色を追加

例

div要素{
ボックスシャドウ：10pxの10pxのグレー。
}

»をお試しください

次に、ぼかし効果に影を追加

例

div要素{
ボックスシャドウ：10pxの10pxの5pxのグレー。
}

»をお試しください

また、二つに影の効果を追加することができます:: after疑似要素beforと::

例

＃Boxshadow {
位置：相対;
B OX-影：1pxの2ピクセルの4PXのRGBA（0、0、0、0.5）;
PAのdding：10pxの;
BACはkground：白;
}
#boxshadowのIMG {
幅：100％;
国境：1pxの固体＃8a4419。
ボーダースタイル：インセット。
}
#B oxshadow ::後の{
内容： '';
位置：絶対;
Zインデックス：-1; / *画像の後ろに隠れる影* /
ボックスシャドウ：0 15ピクセル20ピクセルRGBA（0、0、0、0.3）;
幅：70％;
左：15％; / *残りの30％*の半分/
高さ：100pxに。
ボトム：0;
}

»をお試しください

特別な場合には、影のカードの効果の使用であります

例

div.card {
幅：250ピクセル;
ボックスシャドウ：0 4PX 8px 0 RGBA（0、0、0、0.2）、0 6px 20ピクセル0 RGBA（0、0、0、0.19）;
テキスト整列：センター;
}
}

テキストカード>> ピクチャーカード>>

CSS3テキストのオーバーフロープロパティ

CSS3テキストオーバーフロー属性は、ユーザーがオーバーフローコンテンツを表示する方法を指定します

例

p.test1 {
ホワイトスペース：nowrapを。
幅：200pxの;
国境：1pxの固体＃000000;
オーバーフロー：隠されました;
テキストオーバーフロー：クリップ。
}

p.test2 {
ホワイトスペース：nowrapを。
幅：200pxの;
国境：1pxの固体＃000000;
オーバーフロー：隠されました;
テキストオーバーフロー：省略記号;
}

»をお試しください

CSS3改行

ワードは外部に拡張する領域に収まらないほど長い場合：

CSS3は、プロパティを使用すると、テキストの折り返しが必須ラップすることができます - それは単語の途中でそれを分割することになっても：

次のようにCSSのコードは次のとおりです。

OperaSafariChromeFirefoxInternet Explorer

例

長いテキストの折り返しを許可します：

p {word-wrap:break-word;}

»をお試しください

CSS3ワード速報

CSS3ワードブレイキングは改行ルールを指定する属性：

次のようにCSSのコードは次のとおりです。

例

p.test1 {
ワードブレイク：キープすべて。
}

p.test2 {
単語ブレーク：ブレークのすべて;
}

»をお試しください

新しいテキスト属性

プロパティ 説明 CSS
ぶら下げ、句読点 引当金の句読点文字は、フレームの外側に配置されています。 3
句読点トリム 句読点文字の剪定の規定かどうか。 3
テキストアライン最後 改行を強制するラインの直前に最後の行を揃えたりする方法を設定します。 3
テキストエンファシス テキストタグとキータグフォアグラウンドへの応用の重要な要素。 3
テキスト正当化 時テキスト整列を利用」を正当化する」に設定された所定のアライメント方法。 3
テキストのアウトライン テキストの輪郭の仕様。 3
テキストオーバーフロー テキストが含まれている要素をオーバーフローしたときに物事が起こる規定。 3
テキストの影 テキストに影を追加します。 3
テキストラップ ルールラップテキストの規定。 3
ワードブレーク 非改行規則の規定の日中韓テキスト。 3
ワードラップ これは、次の行に長く分割して不可分のワードラップを可能にします。 3