Designing a Clean Website: Gradients [developerDrive]
This is our third installment of how to design a clean a minimalist website.
First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3.
Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage.
We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have all those things in place let’s go ahead and put in a few small quick-info type boxes underneath our main image. You can populate these boxes with anything you want, news headlines that link to a blog or news page, images, ads, testimonials, you name it.
For this tutorial I’m just going to use a few of the most recent blog posts off Developer Drive. We’re going to use the <article> tag for these boxes and add a little bit of style to help polish them up. Three of the main style elements I’m going to use on these are rounded corners, drop shadows and gradients.
I styled an article tag with the class “home” and made it 248 px wide by 190 px tall so that they’d align nicely underneath our main image. I also added margins, padding and the rest of the styling as follows.
article.home {
float:left;
width:248px;
height:190px;
padding:5px;
margin:11px 11px 11px 0;
border:1px solid #737373;
-moz-border-radius:7px;
border-radius:7px;
-webkit-border-radius:7px;
box-shadow: 2px 2px 2px #838383;
overflow:hidden;
}Next we want to make it look a little less flat and dull and gradients are an excellent way to breathe a little bit of color in to a site and help give it that nice, glossy, modern look.
To make a gradient cross-browser compatible requires a lot of redundant coding, so that’s when a site like Colorzilla comes in handy. Colorzilla generates cross-browser gradient code for you with a few simple clicks of the mouse.
When making a gradient you set start and stop points for each color, as well as opacity. Adding a simple gradient to something like a navigation bar, or in our case to use as a background, can require a lot of repetitive coding.
Colorzilla makes this process a breeze, click the colors you want, slide the bars to where you want the colors to change, then highlight the automatically generated code and paste it in to your CSS file. You even get a real time preview of what your gradient will look like.
I created a gradient that was a soft grey color that faded to white and we’re going to have it start with the light grey at the bottom of the box and fade to white towards the top. I added the following code that Colorzilla generated for me to my article.home class in my CSS file.
article.home {
float:left;
width:248px;
height:190px;
padding:5px;
margin:11px 11px 11px 0;
border:1px solid #737373;
-moz-border-radius:7px;
border-radius:7px;
-webkit-border-radius:7px;
box-shadow: 2px 2px 2px
overflow:hidden;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 79%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(79%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 79%,#dddddd 100%); /* W3C */
}Since we’re going to be displaying some news headlines, let’s style a few other tags that will become useful. I’m going to use and h3 tag for the headline of each article, along with an h3 img tag so that we can include the author’s gravatar image as well.
I also created a h5 tag for the author’s name and the date and then styled a paragraph tag. These are all optional and could be unnecessary if you’re doing something different inside these boxes. When all was said and done my code ended up looking like this:
article.home h3 {
font-size:14px;
margin:0;
padding:0;
color:#404648;
}article.home h5 {
font-size:10px;
margin-bottom:0;
padding-bottom:0;
color:#404648;
}
article.home h3 img {
float:left;
margin-right:10px;
}
article.home p {
border-top:3px solid #6BA5BD;
font-size:12px;
color:#737373;
margin:0;
padding-top:5px;
}Now that we’ve got all of the styling we need for our little promotional boxes under our main image, let’s jump back in to our index.php file and create the HTML needed and drop in the content.Staying within the <section> tag, and just under the img src code for our main image, go ahead and place three instance of <arcticle class=”home”>. I just pulled some content out of a few recent Developer Drive articles, so my HTML ended up looking as follows.<section>
<img src="images/main.jpg" /><article class="home">
<h3><img src="http://1.gravatar.com/avatar/5e4c689cf3621361f2c7ebe5b4eafbe0?s=40&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />Developing With The HTML5 Video Element</h3>
<h5>By Scott Stanton - November 23, 2011</h5>
<p>Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005. But it wasn't until the release of HTML5 that web developers have had a lightweight solution to playing the video. In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.</p>
</article><article class="home">
<h3><img src="http://0.gravatar.com/avatar/ad76000eb5dc4b306853179632d77400?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />Creating a PHP User Survey: Writing to Database Tables</h3>
<h5>By Gerald Hanks - November 22, 2011</h5>
<p>In the first two parts of this series, we created the data layer that will hold the polling data and established methods for setting the variable values and reading from the database tables.<br>
In this part, we will build the methods that will write new polls and answers to the tables.
</article>
<article class="home">
<h3><img src="http://1.gravatar.com/avatar/b8eb0184e62e8a6e71a2d1d7be558248?s=40&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" />An Introduction to HTML5's Video API Part 2</h3>
<h5>By Louis Lazaris - November 21, 2011</h5>
<p>This is the second part in our introduction to HTML5′s video API. In part 1 of this series, I introduced you to the basic markup we'll be using to play the video, then I helped set up a simple script with which we were able to make the controls visible, while ensuring that the native controls will still be visible when JavaScript is disabled.</p>
</article></section>Now that we’ve got our boxes and everything in place on our homepage we can utilize another cool new HTML5 tag, <footer>. I kept mine simple and just included some basic info that was wrapped in a <p> tag. Note how I take advantage of the php file and use a tiny snippet of code to dynamically generate the year.<footer>
<p>All Content © Developer Drive <?php echo date ('Y') ?></p>
</footer>I gave it some real basic styling back in my CSS file, the only real noteworthy bit being the border-top that helps separate the footer from the rest of the content. My footer styling looks like this.footer {
position:absolute;
top:747px;
border-top:1px solid #838383;
width:805px;
text-align:center;
margin-left:105px;
}
footer p {
font-size:10px;
}Now you’ve got a basic homepage that is clean, simple, polished, and minimalist. You can leave it the way that it is and run with it, or supercharge it by turning your image in to a slider that cycles through several images.Stay tuned next time where we will cover sub-pages and how to easily display content in a manner that will quickly load and not require the viewer to load a new page on each link they click.
