Image-Color-Manipulation-Using-CSS/index.html at master · abirana/Image-Color-Manipulation-Using-CSS · 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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="style.css">

    <title>Image Color Manipulation Using CSS by Abi Rana</title>
</head>
<body>
    <div>
        <h3>#1 Using Filter effect</h3>
        <table>
            <tbody>
                <tr>
                    <th>Pros</th>
                    <th>Cons</th>
                    <th>Browser Support</th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li>Easy to apply</li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Not predictable - hard to get the color you want</li>
                            <li>Color manipulation is not good</li>
                            <li>Doesn't work well with white color</li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        Widely supported on modern broswers, may have issue with older IE
                    </td>
                </tr>
            </tbody>
        </table>

        <img src="01.jpg" alt="" class="colorEffect-imgFilter-1">
        <img src="04.jpg" alt="" class="colorEffect-imgFilter-2">
    </div>
    <div>
        <h3>#2 Using Parent's Background Color</h3>
        <table>
            <tbody>
                <tr>
                    <th>Pros</th>
                    <th>Cons</th>
                    <th>Browser Support</th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li>Easy to apply</li>
                            <li>Well supported</li>
                            <li></li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Looks more faded</li>
                            <li>Color manipulation is not that great</li>
                            <li></li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        Widely supported, even older broswers
                    </td>
                </tr>
            </tbody>
        </table>

        <figure class="colorEffect-parentBG bg-yellow">
            <img src="01.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG bg-hotpink">
            <img src="04.jpg" alt="">
        </figure>
    </div>
    <div>
        <h3>#3 Using as Parent's Background Image and Background Color Blend</h3>
        <table>
            <tbody>
                <tr>
                    <th>Pros</th>
                    <th>Cons</th>
                    <th>Browser Support</th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li>Best color output</li>
                            <li>Wide range of color manipulation</li>
                            <li>Easy to get the color you want</li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Height/width has to be set so extra responsive work</li>
                            <li>Background image has to be set in CSS</li>
                            <li></li>
                            <li></li>
                        </ul>
                    </td>
                    <td>
                        Widely supported on modern broswers, may have issue with older IE & Edge
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="colorEffect-parentBG-Img bg-yellow bg-img-1"></div>
        <div class="colorEffect-parentBG-Img bg-grey bg-img-4"></div>
        <div class="colorEffect-parentBG-Img bg-thistle bg-img-4"></div>
        <div class="colorEffect-parentBG-Img bg-orange bg-img-1"></div>
        <div class="colorEffect-parentBG-Img bg-green bg-img-4"></div>
        <div class="colorEffect-parentBG-Img bg-lightblue bg-img-4"></div>
    </div>
    <div>
        <h3>#4 Same as above but with responsive trick - gets image height/width automatically</h3>

        <figure class="colorEffect-parentBG-ImgRes bg-yellow bg-img-1">
            <img src="01.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG-ImgRes bg-grey bg-img-4">
            <img src="04.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG-ImgRes bg-thistle bg-img-1">
            <img src="01.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG-ImgRes bg-orange bg-img-4">
            <img src="04.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG-ImgRes bg-green bg-img-1">
            <img src="01.jpg" alt="">
        </figure>
        <figure class="colorEffect-parentBG-ImgRes bg-lightblue bg-img-4">
            <img src="04.jpg" alt="">
        </figure>
    </div>
</body>
</html>