What’s the difference?Hey everyone, today’s post will be about using CSS3. The new tools provided by CSS3 provide font-end developers with new ways to style elements, many of which previously required walk-arounds and hacks. The target of the article will be: Screenr

Screenr relies heavily on the use of images as text to create a great portion of their homepage. Though the page looks lovely–don’t get me wrong–similar effect can be achieved with html text and css styling.

We’ll focus primarily on the intro section, and some of the elements which can be converted over.

I’ll be using Blueprint to assist with the structure of the site, but wont go into much detail on the setup.

If you want to jump ahead and see the result, it can be found here: Screenr Copy

We’ll begin by targeting the logo they have. Now, logo design tends to usually be an image in most cases; however, We’ll look at keeping as much of the design to html/css as we can

1
2
3

 <div id="logo" class="span-5">
      <h1>screenr <span class="tm">tm</span></h1>
 </div>

What I’ve done is encased each item that needs styling in different tags. Firstly, css3 introduces the ability to round corners without the use of hacks/images, just pure css. The two lines that bring this are -moz-border-radius: 4px; & -webkit-border-radius: 4px;

The difference between moz and webkit is that moz refers to Mozilla Firefox, and webkit refers to browsers based on the webkit engine (Safari, Chrome)

With the background box styled, the next thing was to manipulate the text to resemble the original logo. Now it’s not perfect, but the effect was achieved by using the text-shadow: 1px 1px 1px #999999; CSS3 command.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#logo h1 {
	background:#75C8E2;
	border: 1px solid #75C8E2;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding:5px 10px;
	font-weight:bold;
	font-size:3.3em;
	letter-spacing:-1px;
	color:#fff;
	text-shadow: 1px 1px 1px #999999;
	text-align:center;
}
	#logo h1 .tm {
		font-size:10px;
		border:none;
		letter-spacing:2px;
		color:#dbf4fb;
		text-shadow:none;
	}

The majority of the left site of the design continues the use of the text-shadow property to achieve a very similar effect as seen on the original site.

The next area to focus on is the “Record Your Screencast Now!” Button. The button is composed of two images, the background yellow gradient, and the red record button. Because of this, the code is very simple and exactly how you’d regularly style a button

1
2
3
4

<a class="button">
     <img src="images/record-button.png">
     Record Your Screencast Now!
</a>

Now, the css for the button is very simple. It positions a single gradient image to the left center and sets it on repeat. Using the same round corner technique as above, we give the button it’s round corners. Then, using text shadow, we add the recessed text look to the words and position the record button using absolute & relative positioning.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.button {
	background: url(../images/button.png) repeat-x left center #000;
	padding:0px 30px;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
 	border-bottom:1px solid #3A96B4;
	text-decoration:none; color:#24809F;
	font-weight:800;
	font-size:18px;
	position:absolute;
	line-height:40px;
	font-family:  arial; text-shadow: 0 1px 3px #fff;
	letter-spacing:0.02em;
	margin-top:15px;
	width:314px;
}
.button img {
	position:relative;
	top:4px;
	padding-right:10px;
 
}

The final target for this post will be the video container. This piece uses a new line of code, -webkit-box-shadow: 0px 0px 30px #3D9EBF; Now, as you notice, it’s webkit only. What this means is that the shadow effect we will apply to the box will not be seen in Firefox, but will be seen in Chrome and Safari.

1
2
3

<div id="video">
     <img src="images/box.png">
</div>

Very simple. Wrapped the image in a div, and then styled it accordingly.

1
2
3
4
5
6

#video img{
	background:#7CCBE4;
	padding:10px;
	-webkit-box-shadow: 0px 0px 30px #3D9EBF;
	margin-top:110px;
}

And that’s that! Once again, you can see the final result here: Screenr Copy Try it in a webkit based browser and tab back and fourth between the copy site and the real site. Similar? Not only does this method speed up load times, and lower requests, this provides actual text on the site which benefits for search engines as well as users wishing to copy and paste information.

Endnote: Iif anyone has any suggestions on another site they would like to see converted over, please bring it up in the comments, and thanks for reading.