Practical development of CSS3: Implement image filtering and classification display effects with pure CSS, and css3css

Practical development of CSS3: Implement image filtering and classification display effects with pure CSS, and css3css

Hello, everyone, today I want to lead you to develop a pure CSS image classification display URL navigation. It may be confusing to simply look at the title. According to the previous practice, let me show you the actual running effect:

From the above running results, it is not difficult to find that when I click a menu, the navigation area will highlight the icon of this category, while other icons will become darker.

Many people may say that this is so simple. using javascript, jQuery, and other front-end frameworks together with some CSS can quickly achieve the same effect. If you are a member of this group, I also hope you can stop and take a look at this tutorial. Because in this tutorial, I will use another way of thinking to think about the problem. I will lead you to completely break away from js. How can we achieve the switching effect and achieve image classification, it aims to teach everyone an idea.

Now, let's get started with today's practical development tutorials.

First, we define the HTML page. The Code is as follows (for convenience demonstration, I directly imported the styles.css file, and the file does not have any style content ):

<! DOCTYPE html> 
From the preceding html code, we can see that my navigation menus use labels or radio labels. Why do I need to define them? I want to know which menu I have clicked, because CSS alone makes it impossible for us to get who is currently clicking, When I click Label, a radio will be automatically selected.
Run the page to see the running effect of the page when no style is added:

 
First, adjust the size of the navigation area and add a border to the navigation area. The style code is as follows:
* {/* Set basic page attributes */margin: 0; padding: 0; font-size: 14px ;}. container {/* adjust the layout of the peripheral container */margin: 200px auto; width: 1024px ;}. hot_navs {/* set the category navigation style */border: 1px solid # CCCCCC; padding :. 5em; width: 725px ;}
The page effect is as follows:

The area range has been determined. Now we need to set a style for the navigation menu, hide the radio button, and set the line between the menu and the chart:
/* Split line */. hot_navs. splitline {margin-bottom: 4px; height: 1px; border-top: 1px dotted #999999 ;}. hot_navs a {/* set the basic style of the navigation item */text-decoration: none; display: inline-block; height: 70px; line-height: 70px; position: relative; background: # FFE500;-webkit-transition: all 0.6 s;/* when the item attribute changes, execute excessive animation */-moz-transition: all 0.6 s; -o-transition: all 0.6 s; transition: all 0.6 s ;}. hot_navs input {display: none ;}. hot_navs. label-type-all ,. hot_navs. label-type-1 ,. hot_navs. label-type-2 ,. hot_navs. label-type-3 ,. hot_navs. label-type-4 ,. hot_navs. label-type-5 ,. hot_navs. label-type-6 ,. hot_navs. label-type-7 {/* set the basic style of the navigation menu in the region header */display: inline-block; margin-top: 10px; padding: 10px 10px; cursor: pointer ;}
The effect is as follows:

Careful netizens will find that I have added the transition attribute to the CSS style above. This attribute mainly refers to the transition animation when any attribute of the menu changes.
Next, we add the selected style to the navigation button and set it. When selecting a menu, set the icon opacity of this category to 1, and opacity of other categories to 0.2, the style code is as follows:
. Hot_navs input. selector-type-all: checked ~. Label-type-all,. hot_navs input. selector-type-1: checked ~. Label-type-1,. hot_navs input. selector-type-2: checked ~. Label-type-2,. hot_navs input. selector-type-3: checked ~. Label-type-3,. hot_navs input. selector-type-4: checked ~. Label-type-4,. hot_navs input. selector-type-5: checked ~. Label-type-5,. hot_navs input. selector-type-6: checked ~. Label-type-6,. hot_navs input. selector-type-7: checked ~. Label-type-7 {/* specifies the basic style */font-weight: bold; border-bottom: 2px solid # FF9900;} of the current menu when a menu is selected ;}. hot_navs input. selector-type-all: checked ~ A,. hot_navs input. selector-type-1: checked ~ A. item-type-1,. hot_navs input. selector-type-2: checked ~ A. item-type-2,. hot_navs input. selector-type-3: checked ~ A. item-type-3,. hot_navs input. selector-type-4: checked ~ A. item-type-4,. hot_navs input. selector-type-5: checked ~ A. item-type-5,. hot_navs input. selector-type-6: checked ~ A. item-type-6,. hot_navs input. selector-type-7: checked ~ A. item-type-7 {opacity: 1;/* when selecting a category menu, set the opacity of the current category item */}. hot_navs input. selector-type-1: checked ~ A: not (. item-type-1),. hot_navs input. selector-type-2: checked ~ A: not (. item-type-2),. hot_navs input. selector-type-3: checked ~ A: not (. item-type-3),. hot_navs input. selector-type-4: checked ~ A: not (. item-type-4),. hot_navs input. selector-type-5: checked ~ A: not (. item-type-5),. hot_navs input. selector-type-6: checked ~ A: not (. item-type-6),. hot_navs input. selector-type-7: checked ~ A: not (. item-type-7) {opacity: 0.2;/* set the opacity of other categories of items when selecting a category menu */}
At this point, all the style codes of the special effects on this page have been compiled. I sincerely hope you will be inspired and I hope you will like my tutorial.

Thank you for coming back to our next practical development case.
 

Full-screen background slides made in CSS3 are not supported by IE.
Ie has partially supported the CSS3 attribute since ie9. Therefore, it is best to downgrade the Display Effect in earlier ie versions if Javascript control is available or if jquery is used.

How can we use pure css to achieve the effect of hovering the mouse and moving the image slowly? And supports ie7
To support earlier versions of ie, you don't need JavaScript.