CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでドロップシャドウ効果を設定する

ドロップシャドウは、指定されたX（水平）およびY（垂直）オフセットと色でオブジェクトの影を作成するために使用されます。

このフィルターでは、次のパラメーターを使用できます。

パラメータ
説明
color
ドロップシャドウの#RRGGBB形式の色。
offX
ドロップシャドウがx軸に沿ってビジュアルオブジェクトからオフセットされているピクセル数。正の整数はドロップシャドウを右に移動し、負の整数はドロップシャドウを左に移動します。
offY
ドロップシャドウがy軸に沿ってビジュアルオブジェクトからオフセットされているピクセル数。正の整数はドロップシャドウを下に移動し、負の整数はドロップシャドウを上に移動します。
ポジティブ
trueの場合、オブジェクトのすべての不透明なピクセルにドロップシャドウがあります。 falseの場合、すべての透明ピクセルにドロップシャドウがあります。デフォルトはtrueです。

例

次のコードを実行して、ドロップシャドウ効果を設定できます。

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>

  1. CSSでホバー効果の速度を設定する

    ホバーの速度を設定するには、transition-durationプロパティを使用します。ホバーを設定するには、：hoverセレクターを使用します。 例 次のコードを実行して、ホバー効果を高速化することができます- <!DOCTYPE html> <html>    <head>       <style>          .btn {             background-c

  2. CSSシャドウ効果

    text-shadowプロパティとbox-shadowプロパティをそれぞれ使用して、テキストと要素に影を追加します。 以下はCSSのシャドウ効果のコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } h2 {    color: rgb(28, 0, 128);    text-s