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

CSS3を使用して画像にドロップシャドウを追加する

CSS3の画像にドロップシャドウを追加するには、フィルタープロパティのドロップシャドウ値を使用します。次の値があります-

h-シャドウ –水平シャドウのピクセル値を指定します。

v-shadow –垂直シャドウのピクセル値を指定します。負の値は、画像の上に影を配置します。

ぼかし –シャドウにぼかし効果を追加します。

拡散 -正の値ではシャドウが拡大し、負の値では縮小します。

色 –影に色を追加するには

例

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

出力

CSS3を使用して画像にドロップシャドウを追加する


  1. CSS3を使用した要素の2D変換

    2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要

  2. CSS3を使用して単語違反ルールを指定する

    CSS3で単語分割ルールを指定するには、word-breakプロパティを使用します。このプロパティは、線を切るために使用されます。可能な値には、normal、break-all、keep-all、break-wordなどがあります。 以下は、CSS3-を使用して単語違反ルールを指定するためのコードです。 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sa