Important Notice:

Course Content
Float Property
0/1
Z-Index
0/1
CSS object-fit Property
0/1
CSS Visibility Property
0/1
CSS (Chapter 4) M2-R5.1
About Lesson

box-shadow:-

          किसी Elements पर Shadow Effect को control करने के लिए box-shadow Property का use किया जाता हैं

Syntax:-       box-shadow: none | h-offset | v-offset | blur | spread | color |inset

Example:-   box-shadow:10px 20px 10px 10px orange inset;

  • h-offset – इस Value को Horizontal Shadow कहा जाता हैं। इसके द्वारा Box के Left और Right Side में Shadow को Declare किया जाता हैं। Positive Value से Shadow Right Side में Show होती हैं। और Negative Value से Shadow Left Side में Show होती हैं।
  • v-offset – इस Value को Vertical Shadow कहा जाता हैं। इसके द्वारा Box के Top और Bottom Side में Shadow Effect को Set किया जाता हैं। Positive Value से Shadow Bottom Side में दिखाई देती हैं। और Negative Value से Top Side में Show होगी।
  • blur – इस Value से Shadow को साफपन या धुँधलापन तय किया जाता हैं। Positive Value से Shadow में blur बढता जाएगा और Negative Value (घटाना) से Shadow साफ होती जाती हैं।
  • spread – Spread मतलब आप Shadow Box से कितनी दूर तक देखना चाहते हैं। इसे समझने के लिए Width भी कह सकते हैं। Positive Value से Shadow Spread होती हैं और Negative Value से Shadow का फैलाव कम होता हैं।
  • color – इस Value से Shadow Color को Define किया जाता हैं। इसकी Define Value Text Color होती हैं। जिसे आप अपनी पसंदानुसार Set कर सकते हैं।
  • inset – By Default Box Shadow बाहर की तरफ Show होती हैं। inset Value द्वारा इसे अंदर की तरफ दिखाया जाता हैं
  • none – इससे कोई Shadow Set नही होगी। और जो पहले से Set की हुई हैं वो भी दिखाई नही देगी।

box-shadow:-

         The box-shadow property is used to control the shadow effect on an element.

Syntax:-       box-shadow: none | h-offset | v-offset | blur | spread | color |inset

Example:-   box-shadow:10px 20px 10px 10px orange inset;

  • h-offset – This value is called Horizontal Shadow. Through this, shadow is declared on the left and right sides of the box. Positive value shows shadow on right side. And negative value shows shadow on the left side.
  • v-offset – This value is called Vertical Shadow. Through this, shadow effect is set on the top and bottom sides of the box. Shadow from positive value appears in the bottom side. And negative value will be shown on the top side.
  • blur – The clarity or haziness of the shadow is determined by this value. With positive value the blur in the shadow will increase and with negative value (decreasing) the shadow becomes clearer.
  • spread – Spread means how far you want to see from the Shadow Box. To understand this, it can also be called Width. Positive value increases shadow spread and negative value reduces shadow spread.
  • color – Shadow color is defined by this value. Its defined value is text color. Which you can set as per your choice.

inset – By default box shadow shows outwards. It is shown inside by inset value.

none – This will not cause any shadow set. And those which are already set will also not be visible.

error: Content is protected !!