In CSS we can react only to the mouse moving over elements. To react to mouseclick, buttonclick etc. we need JavaScript – we will see about that in the next chapter. In this lesson we will learn what “magic” we can do using by positioning of elements, of the cursor and some image effects like blur and grayscale settings.
opacity: this property can be used to set the transparency level of the HTML elements. The value of this property can be a number between 0 and 1. 1 means no transparency at all, using 0 the element disappears.
filter: this property can be used to modify included images, to add effects. Possible values: grayscale(100%), blur(5px) etc.
box-shadow: this property is used to add shadow effects to a HTML element. We can define three values in pixels for the horizontal and vertical shadow, the third value results in a blur effect. We can add a color to the shadow at the end.
grid-template-columns: we can divide the container elements’ content using grid display in more columns. Values can be added in pixels, percentage or we can write auto to distribute based on the content.
clear: this property can be used to break the line of the floating elements. The possible values are: left, right and both – depending on which part of the element we need to break the flow of elements.
display: grid - using this display setting for a container element (an element that contains other elements) we can display these elements in an easy and elegant way. Without this setting the grid-template-columns cannot be used.
● We use opacity mostly for images or backgrounds.
● We can add as one value background-color and opacity at the same time, by using rgba. The rgba’s fourth value (a - alpha) means the opacity. Example: rgba(100,100,100,0.7);
Example on grid:
On the picture above we have 4 buttons added to a section to display as a two by two grid. Observe the order of the elements.
We have to add the display: grid; setting to the container HTML object and define the number and size of columns.
There are much more properties and things you can do with the grid display. You can read more about it, here: https://css-tricks.com/snippets/css/complete-guide-grid/
Example on image settings and floating elements:
In the example above every element is floated left. Compared to the grid display the floated elements fill the whole row, resizing the browser window rearranges the elements. Similar effect can be achieved by using display: inline-block;
The difference between the two images is the blur effect added to the first one.
The images should be aligned in line with the paragraphs, but the clear property set to left results in shifting the images in a new line.
The shadow is 3 pixels on the right and at the bottom. The other 3 pixels result from the blurred shadow. The color of the shadow is green.
- add a div with the class gallery;
- inside the gallery div, insert in img tags all the images from the gallery folder;
- we want to have 4 images on a row and as our content div’s width is 1000 pixel, so one image’s width will be 250 pixel and inline-block display, to set them one after another. Here you will see, that the images still won’t be 4 on a row, and this is caused by the inline-block display. To correct this, we have to set font-size 0 and line-height 0 to the gallery class. Also, set 20 pixel bottom margin to the gallery class.
- when we put the mouse over the images, they should get a grayscale effect.
“First, solve the problem.
Then, write the code.”
The steps needed are:
In the HTML document add the text in a <div> and a class name: img_text. The picture with the class page_image and text need to be wrapped together with another <div>. The text needs to be positioned absolute, but absolute positioning needs a positioned container on a higher level. Add a class for the newly added container, called img_box. The CSS settings for the img_box should be the following: relative positioning without effective moving the box (to be used as reference for the text’s positioning), inline-block display and define the z-index value to -1 (otherwise the picture slides over the menu when scrolling).
The CSS settings for the img_tex box should be the following: absolute positioning 20 pixel distance from the bottom and left, add black background with transparency, add padding, text size, color and uppercase letters.
In a section defined by a <div> tag, include <img> tags referring to the pictures from the gallery folder. Include every picture two times: we will use one small and one big instance. Use an id to mark the section (it should be gallery2) and two classes to differentiate between small and big images. The first should be the small, the second the big.
The section should occupy the 60% of the browser window. The images should be displayed in a grid with three columns auto sized.
The small images should have their corners rounded (border-radius), give a width to them in percentage (compared to the size of the grid column) and a 5% bottom margin.
The big images should not be displayed as default, their position should be absolute and set their top and right properties to 0. Their width should occupy the free space on the right (40%).
Moving the cursor over the images (:hover) they should get a lower opacity value.
Using the technique from the previous lesson in the dropdown menu, solve that when you move your mouse over a small image, the big image appears on the right.
Also, add to the content div in the style2.css relative position, so the big image won’t be positioned outside of the content and in the style.css set the z-index to 10 for the #menu.
Add the gallery to the navigation bar in all the HTML files.
div {
display: grid;
grid-template-columns: auto auto auto;
}
https://www.w3schools.com/css/css_image_transparency.asp;
https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp;
https://www.w3schools.com/howto/howto_css_image_transparent.asp;
https://www.w3schools.com/css/css_grid.asp;
https://css-tricks.com/snippets/css/complete-guide-grid/.
