gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: clarify how to create multiple box shadows (Issue: #35534) (#35555)

Browse Source 
* fix: clarify how to create multiple box shadows

* Update curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md

<code> tags added to 'color' property in order to make it look more consistent with the other propertes of 'box-shadow'.

Co-Authored-By: BA1RY <shashank.bairy04@gmail.com>
This commit is contained in:
Shashank Bairy R
2019-03-20 20:02:53 +05:30
committed by Oliver Eyton-Williams
parent dfbcbc6fe3
commit f313c094cb
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md
View File

@ -8,7 +8,16 @@ videoUrl: 'https://scrimba.com/c/cvVZdUd'
## Description
<section id='description'>
The <code>box-shadow</code> property applies one or more shadows to an element.
The <code>box-shadow</code> property takes values for <code>offset-x</code> (how far to push the shadow horizontally from the element), <code>offset-y</code> (how far to push the shadow vertically from the element), <code>blur-radius</code>, <code>spread-radius</code> and a color value, in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
The <code>box-shadow</code> property takes values for
<ul>
<li><code>offset-x</code> (how far to push the shadow horizontally from the element),</li>
<li><code>offset-y</code> (how far to push the shadow vertically from the element),</li>
<li><code>blur-radius</code>,</li>
<li><code>spread-radius</code> and</li>
<li><code>color</code>, in that order.</li>
</ul>
The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
Multiple box-shadows can be created by using commas to separate properties of each <code>box-shadow</code> element.
Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>
</section>