• Welcome to Tux Reports: Where Penguins Fly. We hope you find the topics varied, interesting, and worthy of your time. Please become a member and join in the discussions.

Ribbon Effect for Twenty Eleven Theme

LPH

Flight Director
Flight Instructor
I thought a nice ribbon would give some 3D feel to the navigation for The Chemistry Book. The idea was to get a ribbon without adding an image but to use pure CSS rules. In this case, the before and after.



The following code was added to a child theme for Twenty Eleven.

Code:
#access {
background-color: #000;
border-top: 4px solid red;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
margin: 0 -20px 6px;
width: 100%;
padding-left: 40px;
}

#access:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -20px;
top: 212px;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}


#access:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -20px;
top: 212px;
border-width: 5px 10px;
border-style: solid;
border-color: #666 transparent transparent #666;
}
View the Post on the Blog
 

LPH

Flight Director
Flight Instructor
Chrome is rendering the triangles a little lower than Firefox.

Browsers :mad:
 

Robert Heiny

Research Scientist of Learning and Education
Flight Instructor
Good improvement over the previous header. Thanks for the effort.
 
Top