-
CSSでアニメーション効果をバウンス
バウンスアニメーション効果は、要素をヒットした後、要素をすばやく上下に移動したり、サーフェスから遠ざけたりするために使用されます。 例 次のコードを実行して、バウンスアニメーション効果を実装してみてください- <html> <head> <style> .animated { background-image: url(/css/ima
-
CSS@charsetルールの使用
ASCIIまたはISO-8859-1以外の文字セットを使用してドキュメントを作成している場合は、スタイルシートの上部に@charsetルールを設定して、どの文字セットかを示すことができます。スタイルシートが書かれています。 @charsetルールは、スタイルシートの先頭にスペースを入れずに最初に記述する必要があります。値は引用符で囲まれており、標準の文字セットの1つである必要があります。 例 例を見てみましょう <style> <!-- @charset "iso-8859-1" &nb
-
CSSを使用したアニメーション効果でのバウンス
CSSでバウンスインアニメーション効果を実装するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png); b
-
CSSで左の大きなアニメーション効果をフェードアウト
CSSを使用して画像にフェードダウンレフトビッグアニメーションエフェクトを実装するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);  
-
CSSborder-top-right-radiusプロパティ
CSSのborder-top-rightradiusプロパティを使用して、右上の半径の境界線を設定します。次のコードを実行して、border-top-right-radiusプロパティを実装してみてください- 例 <html> <head> <style> #rcorner { border-radius: 25px; &
-
CSSborder-bottom-right-radiusプロパティ
border-bottom-right-radiusプロパティを使用して、右下隅の境界線を設定します。次のコードを実行して、border-bottom-right-radiusプロパティを実装してみてください- 例 <html> <head> <style> #rcorner { border-radius: 25px;
-
CSSで正しいアニメーション効果をフェードアウトする
CSSを使用して画像にフェードアウト右アニメーション効果を実装するには、次のコードを実行してみてください- 例 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);
-
CSSborder-bottom-left-radiusプロパティ
border-bottom-left-radiusプロパティを使用して、左下隅の境界線を設定します。次のコードを実行して、border-bottom-left-radiusプロパティを実装してみてください- 例 <html> <head> <style> #rcorner { border-radius: 25px; &nb
-
オブジェクトに正弦波の歪みを与えて、CSSで波に見えるようにします
波の効果は、オブジェクトに正弦波の歪みを与えて波状に見えるようにするために使用されます。 このフィルターでは、次のパラメーターを使用できます S.No パラメータと説明 1 追加 値1は、元の画像をウェーブされた画像に追加しますが、0は追加しません。 2 頻度 波の数。 3 ライト 波の光の強さ(0から100まで)。 4 フェーズ 正弦波はどの程度開始する必要がありますか(0〜100)。 5 強さ 波の効果の強さ。 例 次のコードを実行して波の効果を設定することができます- <
-
CSSマルチバックグラウンドプロパティ
CSSマルチバックグラウンドプロパティは、HTMLコードなしで一度に1つ以上の画像を追加するために使用されます。要件に応じて画像を追加できます。 マルチ背景画像の構文例は次のとおりです- #multibackground { background-image: url(/css/images/logo.png), url(/css/images/border.png); background-position: left top, left top; background-repeat: no-repeat, rep
-
CSS背景プロパティ
CSSのbackgroundプロパティは、すべての背景画像のプロパティを1つのセクションに設定するために使用されます。次のコードを実行して、CSSにbackgroundプロパティを実装してみてください- 例 <html> <head> <style> #demo { background: lightblue url("htt
-
CSS@mediaルール
@media ルールは、一連のルールのターゲットメディアタイプ(コンマで区切る)を指定します。 例 @mediaルールの例を見てみましょう- <style> <!-- @media print { body { font-size: 10pt } } @media screen { bo
-
CSSのbackground-sizeプロパティ
CSSのbackground-sizeプロパティは、背景画像のサイズを指定するために使用されます。 例 次のコードを実行して、CSSにbackground-sizeプロパティを実装してみてください。 <html> <head> <style> #demo { border: 5px dashed green;  
-
CSSが話す-数字のプロパティ
speak-numeralプロパティは数字の読み方を制御します。 可能な値は次のとおりです 数字 −数字を個々の数字として話します。したがって、「237」は「TwoThreeSeven」と話されます。 継続的 −数字を完全な数字として話します。したがって、「237」は「237」と話されます。単語表現は言語に依存します。
-
CSSを使用して減衰シャドウを作成します
シャドウフィルターは、指定された方向と色で減衰したシャドウを作成するために使用されます。 このフィルターでは次のパラメーターを使用できます- S.No パラメータと説明 1 色 影にしたい色。 2 方向 ぼかしの方向は、時計回りに進み、45度単位で丸められます。デフォルト値は270(左)です。 0=上 45=右上 90=右 135=右下 180=下 225=左下 270=左 315=左上 例 次のコードを実行して、シャドウフィルターを実装してみてください- <html> <
-
CSSのspeak-punctuationプロパティ
talk-punctuationプロパティは、句読点の読み方を指定します。 可能な値は-です。 コード −セミコロン、中括弧などの句読点は文字通りに話されます。 なし −句読点は話されませんが、代わりにさまざまな一時停止として自然にレンダリングされます。
-
CSSストレスプロパティ
このプロパティは、声のイントネーション輪郭の「ローカルピーク」の高さを指定します。英語は強勢言語であり、文のさまざまな部分に一次、二次、または三次の強勢が割り当てられます。 可能な値は-です。 番号 −「0」から「100」までの値。値の意味は、話されている言語によって異なります。たとえば、標準的な英語を話す男性の声(平均ピッチ=122Hz)のレベル「50」は、通常のイントネーションと強調で話す場合、イタリア語の声の「50」とは異なる意味になります。
-
CSS音声ファミリプロパティ
値は、コンマで区切られた、優先順位が付けられた音声ファミリ名のリストです。次の値をとることができます generic-voice −値は音声ファミリです。可能な値は、「male」、「female」、および「child」です。 特定の声 −値は特定のインスタンスです(コメディアン、トリノイド、カルロス、ラニなど)。 例 次のコードを試して、音声ファミリプロパティを実装できます- <style> <!-- h1 { voice-family: announcer, male }  
-
画面に異なるフォントファミリを設定し、CSSで印刷します
次の例では、画面と印刷に異なるフォントファミリを指定しています。 次のCSSは、両方の画面とプリンターで同じフォントサイズを使用します。 例 <style> <!-- @media screen { p.bodyText {font-family:verdana, arial, sans-serif;} } @media print { &nb
-
CSSを使用して列レイアウトを作成する
列レイアウトを作成するには ドキュメント全体の余白とパディングを次のように設定します <style> <!-- body { margin:9px 9px 0 9px; padding:0; background:#FFF; } -->