CSS3 implements a gorgeous Ribbon style menu

CSS3 's strength is beyond doubt, here is a Ribbon style menu implemented with transition properties in CSS3.

Brief description: is to achieve the mouse to move to each column, the current column raised, color, the mouse moved back to the original.

One

Before hover

　　　　　　　　

When hover

　　　　　　　

Ii. Brief layout

This part is very concise, nonsense not much to say, directly on the code, if the code can not understand, that said is also a vain;

class='ribbon'>    //External container        <a href='#' ><span>Home</span></a>   //container interior elements        <a href='#' ><span>About</span></a>        <a href='#'><span >Services</span></a>        <a href='#'><span>contact </span></a>    </div>

Three, design style

Planning the whole (this is not the point)

* {            /* *            /margin:0;            padding:0;        }        Body {            /**            /00;            Margin:auto;          Center processing            Text-align:center;     Text Center Processing

}

Set up an external container (you can read it)

. Ribbon {            Display:inline-block;        }        . Ribbon:after,. ribbon:before {            margin-top:0. 5em;             "" ;             float : Left;            border:1. 5em solid orange;        }        . Ribbon:after {            border-right-color:transparent;        }        . Ribbon:before {            border-left-color:transparent;        }

Set container interior details (this is the focus)

. Ribbon a:link,. Ribbon a:visited {color:# the; Text-Decoration:none; float: Left; Height:3. 5em;        Overflow:hidden;            }. Ribbon span {background:orange; Display:inline-Block; Line-Height:3em; padding:01em; Margin-top:0. 5em;　　　　　　　　position:relative; Handling CSS3 Browser compatibility issues-webkit-transition:background-color0.2s, margin-top0.2s;/*saf3.2+, Chrome*/-moz-transition:background-color0.2s, margin-top0.2s;/*ff4+*/-ms-transition:background-color0.2s, margin-top0.2s;/*IE10*/-o-transition:background-color0.2s, margin-top0.2s;/*Opera 10.5+*/Transition:background-color0.2s, margin-top0. 2s;            }. Ribbon a:hover span {background: #FFD204; Margin-top:0; }. Ribbon Span:before {content:"";            Position:absolute;            Top:3em; Left:0; Border-right:0. 5em solid #9B8651; Border-bottom:0. 5em solid Orange; }. Ribbon Span:after {content:"";            Position:absolute;            Top:3em; Right:0; Border-left:0. 5em solid #9B8651; Border-bottom:0. 5em solid Orange; }

　　

: Link selector is used to select links that have not been accessed

: The visited selector is used to select the link that has been visited

The content property is used in conjunction with: Before and: After pseudo-elements to insert the generated content

　　

The above code is the key, if you do not understand the part, you can debug on the editor, comment on the question of the statement, save, and then refresh the page to see the effect, such a profound impact.

CSS3 implements a gorgeous Ribbon style menu