-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path04-images.html
123 lines (110 loc) · 3.07 KB
/
04-images.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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>CSS Property 4 - Images</title>
<style>
h1 {
color: brown;
}
.internal-img {
width: 300px;
height: 200px;
}
.image-border {
width: 300px;
height: 200px;
border-radius: 20px;
}
.img-responsive {
max-width: 80%;
height: auto;
}
</style>
</head>
<body>
<h1>Images</h1>
<!-- Width and Height -->
<h2>Width and Height</h2>
<h4>Inline Width and Height</h4>
<img width="300px" height="200px" src="./src/background.jpg" alt="Image" />
<h4>Internal/External WIdth and Height</h4>
<img class="internal-img" src="./src/background.jpg" alt="" />
<hr />
<h2>Image Border Radius</h2>
<img class="image-border" src="./src/background.jpg" alt="" />
<hr />
<h2>Image Opacity</h2>
<img
src="./src/background.jpg"
style="opacity: 0.5; width: 300px; height: 200px"
alt=""
/>
<hr />
<h2>Image Filter</h2>
<h3>1 - Filter: Grayscale</h3>
<img
src="./src/background.jpg"
style="filter: grayscale(100%); width: 300px; height: 200px"
alt=""
/>
<h3>2 - Filter: Blur</h3>
<img
src="./src/background.jpg"
style="filter: blur(5px); width: 300px; height: 200px"
alt=""
/>
<h3>3 - Filter: Contrast</h3>
<img
src="./src/background.jpg"
style="filter: contrast(200%); width: 300px; height: 200px"
alt=""
/>
<h3>4 - Filter: Brightness</h3>
<img
src="./src/background.jpg"
style="filter: brightness(50%); width: 300px; height: 200px"
alt=""
/>
<h3>5 - Filter: Invert</h3>
<img
src="./src/background.jpg"
style="filter: invert(100%); width: 300px; height: 200px"
alt=""
/>
<h3>6 - Filter: Saturate</h3>
<img
src="./src/background.jpg"
style="filter: saturate(200%); width: 300px; height: 200px"
alt=""
/>
<h3>7 - Filter: Sepia</h3>
<img
src="./src/background.jpg"
style="filter: sepia(100%); width: 300px; height: 200px"
alt=""
/>
<h3>8 - Filter: Hue Rotate</h3>
<img
src="./src/background.jpg"
style="filter: hue-rotate(180deg); width: 300px; height: 200px"
alt=""
/>
<h3>9 - Filter: Drop Shadow</h3>
<img
src="./src/background.jpg"
style="filter: drop-shadow(8px 8px 10px red); width: 300px; height: 200px"
alt=""
/>
<h2>Image Responsiveness</h2>
<img src="./src/background.jpg" alt="" class="img-responsive" />
<h3>Image Responsiveness Fit Content</h3>
<img src="./src/background.jpg" style="width: fit-content" />
<h3>Image Responsiveness Max Content</h3>
<img src="./src/background.jpg" style="width: max-content" />
<h3>Image Responsiveness Min Content</h3>
<img src="./src/background.jpg" style="width: min-content" />
</body>
</html>