Diamond Header

Today we are going to take a look at a simple diamond header you can use in your design. The steps to create this in Fireworks and other software are very simple; and now with CSS3, coding is too. Today we will teach you how to create this in both Fireworks and using CSS. We are using the beautiful Lato font in the demos but you can use any font you like.

The Design

Using shapes with Fireworks is very easy. In this tutorial we will take advantage of the scale tool. Let’s get started:

1. Setup your canvas. In this case we are using 910 x 350 px.
2. Grab your favorite image and and adjust to your liking. We grabbed one from Unsplash.com.
3. Click away from your canvas and you should now see the ability to change the canvas size. We are going to click “Canvas Size…” and press “OK” in the dialog. This will resize the background image so that we are no longer dealing with a large image or a massive file size.
4. Click on the rectangle tool and draw out a rectangle that is 950 x 600 px long. Change color to F5B33C, and set the opacity to 85%.
5. Click on the scale tool and rotate the rectangle 40 or 45 degrees. Hold SHIFT to get more accurate rotation. You can also use the Numeric Transform tool to rotate (Modify > Transform > Numeric Transform).
6. Adjust the rectangle to your liking or mimic our adjustment in the preview.
7. Using the text tool, we are going to add our text.
   1. Text 1: “It’s quick & easy to”
      • Font-weight: medium
      • Color: #FFFFFF
   2. Text 2: “Setup a New Font Today”
      • Font-weight: Regular
      • Color: #444444
   3. Text 3: “The Google Fonts API will generate the necessary browser-specific CSS to use the fonts.”
      • Font-weight: Light
      • Color: #444444
8. Next using the rectangle tool, we will be drawing out our button. Create a rectangle with a height of 40 px. You can adjust this to your liking. Change the color of the rectangle to #444444.
9. Add text above your button and adjust it to your liking. #FFFFFF font color is used with medium font-weight.

There you have it. An attractive header you can use for your next project mockup. Now let’s get to the coding portion.

The Code

CSS3 provides us lots of new options that we did not have before. For this coding portion, we are going to take advantage of few of these functions that will make, what was once difficult, a breeze. Let’s get started.

1. First let’s setup the HTML. It’s fairly straight forward. We have a main container class where we will add the background image and a container to hold together the text.

   <div class="header">
        <div class="message">
             <h4>It’s quick &amp; easy to</h4>
             <h1>Setup a New Font Today</h1>
             <p>The Google Fonts API will generate the necessary browser-specific CSS to use the fonts</p>
             <a href="#" class="btn">Get Started</a>
        </div>
   </div>

2. This is where it gets exciting. Using CSS, we are first going to define the .header class. Here are we setting this container with relative position and we are going to hide all the overflow. We are also going to add our background image and padding that will also affect the positioning of our inner text.

   .header {
   position: relative;
   overflow: hidden;
   padding: 100px 0 100px 40px;
   background: url("https://unsplash.imgix.net/uploads/1413386993023a925afb4/4e769802?fit=crop&fm=jpg&h=700&q=75&w=1050") no-repeat 50% 0px;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   }

3. Next we are going to add the diamond background. To achieve this, we will take advantage of the :after psudo element. We are going to absolute position this element and position it relative to the parent container. We will also be using CSS to rotate the container and add some opacity as well.

   .header:after {
   content: "";
   position: absolute;
   top: 5%;
   left: -20%;
   width: 80%;
   height: 240%;
   background: #f5b33c;
   -webkit-transform: rotate(-40deg);
   -moz-transform: rotate(-40deg);
   -o-transform: rotate(-40deg);
   -ms-transform: rotate(-40deg);
   transform: rotate(-40deg);
   opacity: 0.85;
   filter: alpha(opacity=85);
   }

4. Now we tackle the text inside. You can adjust this to your liking. To save time, we will be keeping it simple in this tutorial.

   .message {
   float: left;
   text-align: left;
   position: relative;
   z-index: 2;
   color: #271c3e;
   width: 35.04274%;
   }
   
   .message h4 {
   color: white;
   }
   
   .message p {
   font-size: 16px;
   color: #271c3e;
   margin-bottom: 1.5em;
   }

5. Next we will style the button.

   .btn {
   background: #444;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   padding: 8px 15px;
   letter-spacing: 1px;
   }

6. Lastly, you can add some responsive code using media queries. You can take a look at the CodePen below for the final code.

See the Pen Heading Shape by FWPolice (@fwpolice) on CodePen.