News

Add angled designs with CSS and jQuery

Create a striking page design with CSS3 by using an angled background and adding images using the Anystretch jQuery plug-in

angularjs

Since the advent of browsers beginning to wholesale support many of the newer HTML5 and CSS3 features, we are waiting to see these used to create new layout techniques. Most websites still look pretty much the same and the CSS rotation property is only used to perhaps slightly angle text or create a slight animation on rollover. As we can rotate any section of a webpage, we thought it would be a great idea to create angled sections of the background, resulting in some striking designs.

The only problem is that it causes the inner content such as text and headings to also be rotated with it. The solution to this is to rotate the inner section back in the opposite direction so that the text remains easy to read and legible. So, if we rotate the background five degrees left, we then rotate the inner content five degrees right in order to keep the content level. Of course you may prefer to have angled text, in which case just miss the appropriate CSS rule out! We’re also using a jQuery plug-in called Anystretch, which stretches images over the rotated background section but doesn’t rotate them, so provides a simple background image solution.

DOWNLOAD TUTORIAL FILES

Start the project

From the downloaded files, copy the Start Folder to your desktop. Open the file ‘index.html’ in a code editor, such as Dreamweaver. In the head section add the two lines of code shown below. These add the two main stylesheets that you will create. The first is Eric Meyer’s CSS Reset, which reduces browser inconsistencies. The next is the styles for the page.

001    <link rel=”stylesheet” type=”text/css”     href=”css/reset.css” />
 002 <link rel=”stylesheet” type=”text/css”     href=”css/style.css” />

Add the font

The second CSS library already has the style set up for the heading of the site, since we are mainly concerned with creating the angled sections, we’ll be adding that in the ‘style.css’ file. Now add another CSS link, this time to the font we are using from Google’s font library.

001 <link href=’http://fonts.googleapis.com/    css?family=Armata’ rel=’stylesheet’ type=’text/    css’>

Set up the content

Most of the content has now been added to the page, but we’ll add one section of content to familiarise ourselves with the structure. Scroll to the bottom of the page and add the following code just before the closing section tag. This will be the section that will be rotated at an angle, which explains the name we’ve applied to the class.

001 <div class=”angle”>
 002 </div>

Opposite angle

Because the last <div> is at an angle, all the content inside will also be at an angle. Another container needs to be created that will be rotated at the opposite angle to the first. This will give the desired effect of having straight text while the background is slightly sloping. Add this article tag inside the <div> in the previous step.

001 <article class=”content”>
 002 </article>

Heading for the article

With the <div> tag at an angle and the article at the opposite angle we can add content inside of the article tag. We’ve added a very simple heading three tag so that there is a heading for this section as appropriate. Later some styles can be created for these so that they are designed.

001 <h3>Closing Remarks</h3>

Add a paragraph

Finally for this section we’ll add a paragraph of text. Add your own text to this or just use placeholder text as we have done. Save the page, as we are finished here for the time being. Now switch over to the ‘style.css’ document as we are going to create the styles that will power this design.

001 <p>text content goes here </p>

Wrap the angles

We have wrapped all of the angled <div> tags with a wrapping container, hence the class name given to this of ‘container’. Here we’re adding the CSS style for this to the end of the ‘style.css’ document. We’ve added a padding top to this, but otherwise it’s all standard stuff.

001 .container{
 002     display: block;
 003     width: 100%;
 004     overflow: hidden;
 005     padding-top: 50px;
 006 }

A wider margin

The next class that we add might look a little strange. We’re widening the margin by 50px off the left and right of the screen – that’s to accommodate the rotated edges so that we don’t see the side of the background colour. We also define where the rotation point will be: the left-hand edge in the centre.

001 .angle{
 002     margin: 0 -50px;
 003     -webkit-transform-origin: left center;
 004     -moz-transform-origin: left center;
 005     -o-transform-origin: left center;
 006     -ms-transform-origin: left center;
 007     transform-origin: left center;
 008 } 

Odd angles

We set up a rule now that makes use of CSS3’s ability to change all the odd children of the angle class. So the first, third and fifth will have a five degree rotation. Notice that they also have a margin top of -200px. At present that will cause these not to be seen, however once we’ve added the even children, this will compensate the bottom angle of those.

001 .angle:nth-child(odd){
 002     border-top: 16px solid #091e3d;
 003     background-color: #666;
 004     -webkit-transform: rotate(5deg);
 005     -moz-transform: rotate(5deg);
 006     -o-transform: rotate(5deg);
 007     -ms-transform: rotate(5deg);
 008     transform: rotate(5deg);
 009     margin-top: -200px;
 010 } 

Going even

Now we add the code for the even children of the angle class. We start by adding a background image, which is set to repeat – this is a light-coloured angled pattern. Then we rotate in the opposite direction to the previous sections, so -5 pixels. Viewing the page at this stage still doesn’t show us a lot, so let’s fix that.

001 .angle:nth-child(even){
 002    background: #ccc url(../img/shattered.png)     repeat;
 003    -webkit-transform: rotate(-5deg);
 004    -moz-transform: rotate(-5deg);
 005    -o-transform: rotate(-5deg);
 006    -ms-transform: rotate(-5deg);
 007    transform: rotate(-5deg);
 008 }     009    

Move it down

One of the main problems at the moment is that the margin top of -200px is really for clearing the angle of previous sections, so the first section doesn’t need this. We can fix that by overriding the margin-top of the first child of the angle class and that will help at this stage.

001 .angle:first-child{
 002    margin-top: 0px;
 003 } 

Hold the content

Inside each of the angles we have a <div> tag with a class of content. We add a zero top and bottom margin, but an auto left and right margin that will centre the content. Then we add a decent top and bottom padding with a 100px padding on both the left and right.

001 .content{
 002    margin: 0 auto;
 003    padding: 130px 100px 250px 100px;
 004
 005 }

Style the headings

Each section within the angle has a heading three tag. We’ve chosen to style this up with the increased font size and display it as an inline block. We add a little bit more padding to the edges and a smaller padding to the top and bottom. The typeface has also been changed to ‘Armata’, that we added earlier on in Step 2.

001 .content h3{
 002     font-size: 60px;
 003     position: relative;
 004     display: inline-block;
 005     padding: 10px 30px 8px 30px;
 006     height: 80px;
 007     line-height: 80px;
 008     margin-bottom: 20px;
 009     font-family: ‘Armata’, sans-serif;
 010 } 

Concise paragraphs

We now turn our attention to the paragraph. Here we make it a little smaller with a width of 75% or a max-width of 500px. We also increase the font size and with it the line height. Looking at the page in a web browser now gives us a radically different view.

001 .content p{
 002      width: 75%;
 003     max-width: 500px;
 004     margin: 0 auto;
 005     font-size: 18px;
 006     line-height: 24px;
 007     padding-top: 10px;
 008 }     009  

Easier to read

A problem that we have is that the text is also at an angle with the <div> tag and that isn’t the easiest to read. We’ll rotate the inner container with the ‘content’ class back the opposite way with a rotation of -5 degrees on the odd children. Save and test in the browser – you should see a big difference at this stage.

001 .angle:nth-child(odd) .content{
 002    -webkit-transform: rotate(-5deg);
 003    -moz-transform: rotate(-5deg);
 004    -o-transform: rotate(-5deg);
 005    -ms-transform: rotate(-5deg);
 006    transform: rotate(-5deg);
 007    color: #fff;
 008    text-shadow: 2px 2px 2px rgba(0,0,0,0.7);
 009 } 

Opposites attract

As in the previous step, we rotate the content <div> tag back the opposite direction of the angle class. This time though, we are targeting the even children and the content is rotated five degrees to compensate. Save this now and when you view in the browser, you’ll see we have the basis for our tutorial covered. Now we will concentrate on improving the design.

001 .angle:nth-child(even) .content{
 002    -webkit-transform: rotate(5deg);
 003    -moz-transform: rotate(5deg);
 004    -o-transform: rotate(5deg);
 005    -ms-transform: rotate(5deg);
 006    transform: rotate(5deg);
 007 } 

Reduce the heading

We’re going to reduce the size of the headings now for smaller screens. So, once the page is viewed on a tablet or lower, the heading is reduced down to 40px. Save this file, refresh the page and try changing the width of the browser to see the change in action.

001 @media screen and (max-width: 767px) {
 002    .content h3{
 003        font-size: 40px;    
 004    }
 005 } 

Even smaller changes

Now we add our final CSS for when the display screen is less than 400px. We increase the width of the margins to 95% for the paragraph and reduce the padding left and right on the content class. Save this, refresh your browser and return back to the HTML document while we make some final changes.

001 @media screen and (max-width: 400px) {
 002    .content p{
 003        width: 95%;
 004    }
 005    .angle:nth-child(odd) .content,    
 006    .angle:nth-child(even) .content{
 007        padding-left:60px;
 008        padding-right:60px;
 009    } 
 010 }

Add  a background image

Back in the HTML document find the first angle class in the document; it will have the heading ‘Full Throttle’ after it. Change the class to have the addition of full then add the data attribute. This will tell the jQuery plug-in which image to use as the background image for this section.

001 class=”angle full” data-stretch=”img/speed.jpg”

A couple more images

Similar to the previous step, find the third and fifth ‘angle’ class and change accordingly to each of the lines shown below. The Anystretch jQuery plug-in will stretch the background image to fit but will not rotate the image despite the angle of the class.

001 class=”angle full” data-stretch=”img/    lightning.    jpg”
 002 class=”angle full” data-stretch=”img/eco.    jpg”
 003

Link to the libraries

Before the closing body tag in the HTML document, add the following two lines of code – these link to the jQuery library and to the Anystretch jQuery plug-in. More information on the plug-in can be found at github.com/danmillar/jquery-anystretch. Another advantage of using this is that it keeps the image centred vertically.

001 <script src=”js/lib/jquery-1.7.1.min.js”></    002 script>
 003 <script src=”js/jquery.anystretch.min.    js”></    script>
 004  

Activate the images

Finally, to complete this project, add the following few lines below the previous code snippet. This tells the Anystretch plug-in to stretch the image to fill the background on the ‘full’ class which were added in Steps 19 and 20. Save the document now and refresh the browser to see the finished tutorial in action, complete with background images and angled design.

001 <script>
 002 $(“.full”).anystretch();
 003 </script>
 004
×