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>Applying CSS Filters to Text</h2>
5
</ul><h2>Applying CSS Filters to Text</h2>
6
<p>Filters may be applied without restrictions not only to images, but also to other HTML elements. Let’s try applying shadow and blur filters to the text of the captions.</p>
6
<p>Filters may be applied without restrictions not only to images, but also to other HTML elements. Let’s try applying shadow and blur filters to the text of the captions.</p>
7
<h2>Comments</h2>
7
<h2>Comments</h2>
8
<ul><li>index.html</li>
8
<ul><li>index.html</li>
9
<li>style.css</li>
9
<li>style.css</li>
10
</ul><p>HTML</p>
10
</ul><p>HTML</p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Applying CSS Filters to Text</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image text"> <img src="img/spb-2.jpg" alt=""> <p>Savior on the Spilled Blood</p> </div> <div class="compare text"> <div class="compare-left blur"> <div class="image"> <img src="img/spb-1.jpg" alt=""> <p>St. Isaac’s Cathedral</p> </div> </div> <div class="compare-right shadow"> <div class="image"> <img src="img/spb-5.jpg" alt=""> <p>Trinity Cathedral</p> </div> </div> </div> </body> </html></p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Applying CSS Filters to Text</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image text"> <img src="img/spb-2.jpg" alt=""> <p>Savior on the Spilled Blood</p> </div> <div class="compare text"> <div class="compare-left blur"> <div class="image"> <img src="img/spb-1.jpg" alt=""> <p>St. Isaac’s Cathedral</p> </div> </div> <div class="compare-right shadow"> <div class="image"> <img src="img/spb-5.jpg" alt=""> <p>Trinity Cathedral</p> </div> </div> </div> </body> </html></p>
12
<p>CSS</p>
12
<p>CSS</p>
13
<p>.blur p { } .shadow p { }</p>
13
<p>.blur p { } .shadow p { }</p>
14
<p>Thanks! We’ll fix everything at once!</p>
14
<p>Thanks! We’ll fix everything at once!</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>You’ve gone to a different page</p>
16
<p>You’ve gone to a different page</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>100%</p>
18
<p>100%</p>
19
<ol><li>Apply the blur filter with a value of 2px to the paragraph in the .blur block,</li>
19
<ol><li>Apply the blur filter with a value of 2px to the paragraph in the .blur block,</li>
20
<li>and then apply a shadow filter with the value 2px 2px 2px black to the paragraph in the .shadow block.</li>
20
<li>and then apply a shadow filter with the value 2px 2px 2px black to the paragraph in the .shadow block.</li>
21
</ol>
21
</ol>