Being called Design Scientific lead me to develop a science theme through out the site. Originally I had a double helix as part of my logo but decided in the redesign of our site the logo would be more streamlined. I did however want to continue to incorporate a double helix into the design as our tag line is “Design is in our DNA”.
I decided that the incorporating it in to the menu would be best using CSS3 to create the effect. Having a responsive site this added an extra element to complicate things but I got round it. Here is how..
HTML
First I created a simple menu using an unordered list;
<ul class=”nav-main clearfix”>
<li><a href=”#”>Work</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Expertise</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
CSS
The whole list is a floated right and as it is a responsive layout is given a percentage width with a margin consistent with the grid;
header nav ul {float: right;margin: 80px 0 0;width: 50%;}
Each list item is given a border radius to give a rounded effect when a border is applied. Transform enables the list item to be tilted to allow a consistent flow of the double helix border from one list item to the next. The negative left margin allows over lap of the items to give a continuous effect;
header nav ul li {background-color: #FBF6F3;float: right;border: 5px solid;font-size: 0.65em;width: 15%;height: 70px;border-radius: 60px 50px 60px 50px;margin-left: -6px;transform: rotate(-35deg);}
The anchor tag is given a transfom to make the text appear horizontally;
header nav ul li a {margin: 30px 0 0;text-align: center;transform: rotate(35deg);width: 100%;}
I used the pseudo classes to allow for a variation of border colour and to give unfinished circles at the beginning and end;
header nav ul li:nth-child(2n) {border-color: #2B517A #2B517A #0C6733 #0C6733;}header nav ul li:nth-child(2n-1) {border-color: #0C6733 #0C6733 #2B517A #2B517A;}header nav ul li:first-child {border-bottom: medium none;border-right: medium none;}header nav ul li:last-child {border-left: medium none;border-top: medium none;}
Responsive Design
Using media queries I have enabled different views for a varied amount of devices and screen sizes. I have created different style sheets for the different screen sizes cascading styles down through he different screen sizes.
Just for fun
Have a look at how DNA was discovered:
About Timothy McGraw
I am a UX designer, front-end developer and owner of Design Scientifc. With a keen eye for detail I care not only how products look but also how they work. User experience has become a passion, and users are at center of each of the projects I am part of. I am obsessed with web standards and accessibility, so much so that I love clean semantic code. I write about anything web related but mostly UX.