Career_Webdevelopment/25thclass.html at main · theusmandev/Career_Webdevelopment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- <p>Date:9/December/2023</p>
<p>Day: Monday</p>
<p>Class=no </p> -->
<style>

h1{
    text-shadow: 2px 2px #0000FF;


}
h2 {
 text-shadow: 2px 2px 10px #0000FF;
}
h3 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
 text-decoration: overline;
}
 h4{
    text-transform: uppercase;
    text-decoration: line-through;
    -webkit-filter: drop-shadow(10px 10px 1px green);
 filter: drop-shadow(10px 10px 1px green);

}
h5{
    text-transform: capitalize;
    text-decoration: underline;
}
table{
    empty-cells: hide;
    /* border-collapse: collapse; */
    border-spacing: 6px;
    caption-side: bottom;
}
img {
 /* -webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
 filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%); */
 -webkit-filter: hue-rotate(120deg);
 filter: hue-rotate(120deg);
 pointer-events: none;
 /* -webkit-filter: blur(1px);
 filter: blur(1px); */

}

</style>
<p>Shadow without blur radius</p>
<h1>Practicing Text Shadow</h1>
<p>Shadow with blur radius
    To add a blur effect, add an option blur radius argument</p>
<h2>Practicing Text Shadow</h2>
<p>Multiple Shadows
    To give an element multiple shadows, separate them with commas</p>
<h3>Practicing Text Shadow</h3>

<h4>Hi, This is USMAN</h4>
<h5>Hi, this is uSMAN</h5>

<img src="course1.jpg" alt="" height="400px">
<table border="4" width="600" height="100">
    <caption>MY TABLE</caption>
    <tr>
        <td>1</td>
      <td>2</td>
<td>3</td>
    </tr>
    <tr>
    <td>4</td>
    <td></td>
    <td>6</td>
    </tr>
</table>
</body>
</html>