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

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-shadow: red 2px 4px 2px;
}
div {
   color: white;
   text-align: center;
   width: 100px;
   height: 100px;
   background-color: red;
   box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSシャドウ効果


  1. CSSでアニメーション効果を振る

    シェイクアニメーションエフェクトは、要素に対して（オブジェクト）を上下または左右に移動します。 例 <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);            

  2. CSSを使用してシャドウにぼかし効果を追加します

    シャドウにぼかし効果を追加するには、box-shadowプロパティを使用します。 次のコードを実行して、ぼかし効果を追加してみてください 例 <!DOCTYPE html> <html>    <head>       <style>          h2 {             box-shadow: 10px 10px 7px green;     &nbs