Enhancing Web Interfaces Using Filters In this exercise, you will learn about how to use filters in CSS. Filters enable

Post by **answerhappygod** » Mon Jul 11, 2022 9:49 am

: Enhancing Web Interfaces Using Filters In This Exercise You Will Learn About How To Use Filters In Css Filters Enable 1 (353.72 KiB) Viewed 44 times

CSS FIle:

: Enhancing Web Interfaces Using Filters In This Exercise You Will Learn About How To Use Filters In Css Filters Enable 2 (85.7 KiB) Viewed 44 times

html:

: Enhancing Web Interfaces Using Filters In This Exercise You Will Learn About How To Use Filters In Css Filters Enable 3 (90.32 KiB) Viewed 44 times

Enhancing Web Interfaces Using Filters In this exercise, you will learn about how to use filters in CSS. Filters enable you to extend the graphical effects of HTML elements such as blueness, brightness, contrast, color shifting, among others. Please visit this link for more details on the filter functions in CSS. A There are two important limitations that you need to take into account when working with filters in CSS. The CSS filters are currently made available through the WebKit project. The WebKit project was initially a browser engine developed by Apple which enabled features such as user clicks, back-forward navigation, managing history, among others. More features were added to support advanced graphical effects and media features of HTML5. Nearly all modern browsers support the filter property. However, some browsers (e.g. Internet Explorer, Edge 12 and Safari 5.1 or earlier) do not support the filter property or may not support all of the features of the webkit-filter. In the sample HTML file of this exercise, three is a reference to both filter and webkit-filter to account for these variations. Therefore, when testing graphical effects filters when developing web application interfaces, it is strongly recommended that you as a developer test using multiple browsers to ensure consistency. An Art Store Use jQuery to respond to events and to programmatically modify HTML and CSS as shown in Figure 1. Art Filters 8 Gaya 127.0.0.1:63753/b.hr Pvc Brom og p Reset the image and slider values Sewwers in d Desde em 1450 Set the appropriate CSS filter and -webkit-filter properties whenever the user changes any of the sliders. 20 Art Filters goss mu 127.0.0.1:63753/h 0 1564 Vinn Gogh Clicking on thumbnail image replaces the main image in the <figure> The alt and title attribute of the selected thumbnail will be displayed in the <figcaption>
Instructions: 1. Examine exercise2.html in the browser and then editor. You have been supplied with the necessary CSS, images and HTML on Canvas (Exercises → Exercise 2 → exercise2-files.zip). 2. Use jQuery to implement this exercise. To this extent, import jQuery in the <head> of the page. 3. Use jQuery to respond to click events on the painting thumbnails. Replace the src attribute of the <img> element in the <figure> so that it is displaying the clicked painting. Hint: get the src attribute of the clicked element and then replace the small folder name with medium folder name. 4. As well, change the <figcaption>so that it displays the newly clicked painting's title and artist information. This information is contained within the alt and title attributes of each thumbnail. 5. Set up event listeners for the input event of each of the range sliders. The code is going to set the filter and the -webkit-filter properties on the image in the <figure>. Recall from Module 3 that if you are setting multiple filters, they have to be included together separated by spaces. 6. Add a listener for the click event of the reset button. This will simply remove the filters from the image. 7. The image sizes vary in terms of width. Hence, ensure that all images are displayed consistently with a fixed size. You may use a size of 450x640 for displaying all medium-sized images for consistency.
main { } header { } h1 { } } margin: 30px 30px; font-family: "Open Sans", Arial, sans-serif; font-size: 10pt; #imgManipulated { margin: 0; float: left; } background-color: #F5F5F5; margin: 5px 30px; .sliders { width: 250px; } #sliderBox label { display: block; width: 250px; float: left; font-family: 'Merriweather", "Times New Roman", serif; font-size: 36px; padding: 5px; color: #5D4037; } #sliderBox p { } #sliderBox { } margin: 0; border: solid 1px #ccc; padding: 10px; width: 300px; float: left; } button { margin-right: 10px; background-color: white; background-color: #EF6C00; color: white; border: 0; padding: 5px 10px; figcaption { background-color: white; margin-top: 5px; padding: 5px; #thumbBox { float: left; border: solid 1px #ccc; padding: 15px; margin-left: 10px; background-color: white; } #thumbBox div { margin-top: 5px; margin-bottom: 15px; } .tiled ( background-image:url(../images/stripes.jpg); background-repeat:repeat; } /* temp tester #imgManipulated img { filter: opacity (62%) brightness (50%) contrast (50%); -webkit-filter: opacity (62%) brightness (50 %) contrast (50%);
1 2 3 <title>Chapter 10</title> 4 <link 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 5 <link 6 <link rel="stylesheet" href="css/styles.css"> 7 8 9 </head> 10 <body class="tiled"> 11 <header> 12 29 30 31 32 33 34 khtml> <head> 35 36 37 38 39 40 41 42 43 44 45 href='http://fonts.googleapis.com/css?family=Merriweather' href='http://fonts.googleapis.com/css?family=Open+Sans' <h1>Art Filters</h1> </header> <main> <div id="sliderBox"> <form> </form> </div> <figure id="imgManipulated"> <label>Opacity: </label><p><input type="range" id="sliderOpacity" min="0" max="100" value="100" class="sliders" /> <span id="numOpacity">100</span>%</p> <p><label>Saturation: </label><input type="range" id="sliderSaturation" min="1" max="300" value="100" class="sliders"/> <span id="numSaturation">100</span>%</p> <p><label>Brightness: </label><input type="range" id="sliderBrightness" min="0" max="300" value="100" class="sliders" /> <span id="numBrightness">100</span>%</p> <p><label>Hue Rotate: </label><input type="range" id="sliderHue" min="0" max="360" value="0" class="sliders" /> <span id="numHue">0</span>deg</p> <p><label>Grayscale: </label><input type="range" id="sliderGray" min="0" max="100" value="0" class="sliders"/> <span id="numGray">0</span>%</p> <p><label>Blur: </label><input type="range" id="sliderBlur" min="0" max="10" value="0" class="sliders" /> <span id="numBlur">0</span>px</p> <p><button id="resetFilters">Reset</button> </p> <img src="images/medium/painting1.jpg"> </main> <script> </figcaption> <figcaption> <em>Still Life with Flowers in a Glass Vase</em> <br> Jan Davidsz. de Heem, 1650 - 1683 </figure> <div id="thumbBox"> rel='stylesheet' type='text/css"> rel='stylesheet' type='text/css'> </div> <div><img src="images/small/painting1.jpg" alt="Still Life with Flowers in a Glass Vase" title="Jan Davidsz. de Heem, 1650 - 1683"/></div> <div><img src="images/small/painting2.jpg" alt="Portrait of Alida Christina Assink" title="Jan Adam Kruseman, 1833"/></div> alt="Self-portrait" title="Vincent van Gogh, 1887"/></div> <div><img src="images/small/painting3.jpg" <div><img src="images/small/painting4.jpg" alt="William II, Prince of Orange, and his Bride, Mary Stuart" title="Anthony van Dyck, 1641"/></div> <div><img src="images/small/painting5.jpg" alt="Milkmaid" title="Johannes Vermeer, c. 1660"/></div> </script> </body> </html>