Home > Developer > Web Develop
Use of pseudo classes in css3, and use of pseudo classes in css3
Objectives:
The use of the after pseudo class in css and the last-child pseudo class. And some attributes of css3.
Process:
When creating a navigation bar, you will often encounter an effect of adding a separator after each li. When the last element is reached, the delimiter will be removed.
So how to use pure css to make such an effect is very simple. Here the pseudo class of css is used.
Html section
<body><ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li></ul></body>Then, call the css style
Body {background: # ebebeb ;}. nav {width: 560px; height: 50px; font: bold 0/50px Arial; text-align: center; margin: 40px auto 0; background: # f65f57; /* Create a circle */border-radius: 9px;/* create a three-dimensional navigation style */box-shadow: 0px 5px #911 ;}. nav a {display: inline-block;-webkit-transition: all 0.2 s loading-in;-moz-transition: all 0.2 s loading-in;-o-transition: all 0.2 s records-in;-ms-transition: all 0.2 s records-in; transition: all 0.2 s records-in ;}. nav a: hover {-webkit-transform: rotate (10deg);-moz-transform: rotate (10deg);-o-transform: rotate (10deg);-ms-transform: rotate (10deg); transform: rotate (10deg );}. nav li {position: relative; display: inline-block; padding: 0 16px; font-size: 13px; text-shadow: 1px 2px 4px rgba (0, 0, 0 ,. 5); list-style: none outside none;}/* use pseudo elements to create the separation line of navigation list items */<span style = "color: # ff0000;">. nav li: after </span >{< strong> content: ""; position: absolute; top: 15px; right: 0px; width: 1px; height: 15px; background: linear-gradient (to bottom, # f82f87, # B0363F, # f82f87 ); </strong>}/* Delete the first and last navigation separators */<span style = "color: # ff0000;">. nav li: last-child: after </span >{< strong> width: 0px; height: 0px; </strong> }. nav ,. nav a: hover {color: # fff; text-decoration: none ;}
Background: linear-gradient (to bottom, # f82f87, # bo363f, # f82f87) // gradient style in css3
After adding a gradient after each li, you need to clear the last li.
The pseudo class. nav li: last-child: after is used here, and its width and height are set to 0.
Result:
Through the use of pseudo classes, it is easy to create problems frequently encountered in navigation.
In this case, there are also the use of transition animation in css3, transform deformation, background: linear-gradient (); gradient settings.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
