0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Inner Shadow</h2>
5
</ul><h2>Inner Shadow</h2>
6
<p>If you use the insetkeyword inbox-shadow, then the shadow will be displayed inside the element.</p>
6
<p>If you use the insetkeyword inbox-shadow, then the shadow will be displayed inside the element.</p>
7
box-shadow: [inset] <- internal 5px - x-offset 10px - y-offset [2px] - feathering [3px] - stretch [red]; - color<p>inset is best placed either at the very beginning of the property or at the very end.</p>
7
box-shadow: [inset] <- internal 5px - x-offset 10px - y-offset [2px] - feathering [3px] - stretch [red]; - color<p>inset is best placed either at the very beginning of the property or at the very end.</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<ul><li>index.html</li>
9
<ul><li>index.html</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>HTML</p>
11
</ul><p>HTML</p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inner Shadow</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Button 1</button> <button class="btn btn2" type="button">Button 2</button> <button class="btn btn3" type="button">Button 3</button> </body> </html></p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inner Shadow</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Button 1</button> <button class="btn btn2" type="button">Button 2</button> <button class="btn btn3" type="button">Button 3</button> </body> </html></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>.btn1 { box-shadow: 5px 5px 0 0 #34495e; } .btn2 { box-shadow: 0 0 5px 0 #34495e; } .btn3 { box-shadow: 0 0 5px 3px #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 50px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }</p>
14
<p>.btn1 { box-shadow: 5px 5px 0 0 #34495e; } .btn2 { box-shadow: 0 0 5px 0 #34495e; } .btn3 { box-shadow: 0 0 5px 3px #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 50px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>Create an inner shadow that is cast inside the first button,</li>
20
<ol><li>Create an inner shadow that is cast inside the first button,</li>
21
<li>Then create one for the second,</li>
21
<li>Then create one for the second,</li>
22
<li>and also create one for the third button.</li>
22
<li>and also create one for the third button.</li>
23
</ol>
23
</ol>