![]() The full code of the homepage.css file is presented below. When dealing with real-world projects, you’ll often find yourself styling elements that have a certain look only on a given page, and in such cases it makes sense to create a specific CSS file just for that page. Here is where we style elements of the project that don’t fit any of the other modules and that are specific to the homepage. The full code for this module is as follows. The other point worth a mention is that there is an effect that takes place when a thumbnail is hovered or focused to enhance the accessibility, as discussed in the previous section. It forces the thumbnails to be five in a row by setting the width property to 19%, a margin-right of 1%, and the display property to inline-block. The thumbnails module doesn’t contain anything too fancy. The full code of this module is presented below. In case you consider yourself a beginner with CSS, you might also want to study how the buttons are made circular and how the arrows are drawn. Styling for the focus event is important because it enhances the accessibility of an element for those users navigating the website via the keyboard (for example, by hitting the TAB key). The second point is that we define how the style of the arrows changes when users hover over or focus on them. By doing so, we ensure that the image doesn’t overflow the container. Then, the img element inside it – used to show the selected image – is constrained by setting its max-height and max-width property to 100%. The first point is that the element with a class of gallery, which acts as a container for the photo shown in its natural size, is given a fixed height of 500px. It’s made of simple declarations, and I’ll highlight a few points of interest. The gallery module defines the styles of the gallery and its components. ![]() In the previous article, we discussed the module of the helper classes and the layout modules. In this second and final part, we’ll cover the remaining CSS modules and the JavaScript code that powers the project. In the first part of this mini-series on how to develop a simple gallery using the Flickr API, we discussed the requirements of the project, the markup needed to structure the HTML page, and two out of five CSS modules.
0 Comments
Leave a Reply. |