With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers.

Below are clever ways to leverage CSS3 for Web developers:

Responsive Images

Responsive web design allows a design to scale perfectly based on the context. Responsive images function in a similar way where images are sized based on whether they are rendered on a handheld or a desktop interface.  This scaling takes into consideration that the HTML, CSS and JavaScript used is light enough to be rendered reasonably fast across these platforms.  Any images that need to be loaded responsively are referenced from the mobile-friendly version of the image size by adding a “.r” prefix to the file extension and using the “data-fullsrc” HTML5 custom attribute to determine the image screen resolution.

Progress Bar

Did you know that you can create a fancy progress bar without using flash or even images? To achieve this stunning effect, you will need an HTML file that contains your markup, a CSS file for your styles and a JavaScript library file called “progress.js” that will contain the needed JQuery animations to animate the progress bar. Inside the CSS file are 2 classes; the .ui-progress-bar which acts as the container and the .ui-progress class which contains the green progress bar.  The CSS file can be downloaded from this link: http://ivanvanderbyl.com/

Image Transitions

Very elegant transitions can be applied to images using JQuery plugins such as Nivo Slider. While most of these plugins use JavaScript, it is possible to implement image transitions using CSS3 animations.  CSS3 transitions have the advantage of producing new effects like rotations which JavaScript plugins like Nivo Slider cannot.  Whether you are implementing bars, blocks, warps or concentric image effects, CSS3 can be used for these kinds of animations.

Cool Text Effects

By playing around with colors, offset and blurring effects in CSS3, it is possible to create some stunning and clever text effects. Some cool text effects that can be produced using CSS3 include retro or vintage, inset, neon, fire and anaglyphic among others. The neon effect, for example, works by creating up to 8 shading levels where each of the 8 shadow values are increased progressively while getting them darker. The white fill text base and the darker effect blend to produce the neon aura.

Shapes in CSS

Almost any shape can be drawn using CSS and a single HTML element. After defining the shape in your CSS, you can then define the dimensions and other attributes such as the transparency, color and border options. The code below draws up a red triangle facing up:

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

Folded Corner Effect

This technique does not need any extra markup and is implemented using these few lines below:

.note:before { Content:””; Position:absolute; Top:0; Right:0; Border-width:0 16px 16px 0; Border-style:solid; Border-color:#658E15 #fff; }

As HTML5 and CSS3 continue to gain traction on the Web, we can expect to see developers coming up with more creative and clever ways of implementing these relatively new techniques in their work.

...

Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling.

Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol.  Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect.

Why am I talking about retro video games on a web development site?  Well, the simple answer could easily be because they’re awesome, but that’s not why.  Parallax scrolling is a cool design concept that is making its way in to the web design world.  Nike were one of the first to use this technique with great success when they hired marketing giants Weiden and  Kennedy to develop their original site for Nike Better World.  The Nike Better World site has since been updated and replaced with a new one, however there is another site that is quite similar, Activate sports drink.

You’ll notice as you scroll down the page that there are several different elements of the site that are all moving at different speeds.  Let’s take the page in our image above as an example.  As you scroll down through this page you’ve got blue dots in the far background that are slightly blurred, these appear to be moving at the same rate as the scroll bar.  You then have a grouping of blue dots that are more in focus and in the foreground that are moving slightly faster than the scrollbar.  Faster than those dots is the text, “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” as well as the main “Products” header for the page.  Finally there are images of the products themselves, smaller, more out of focus ones towards the background and larger, in focus ones in the foreground.  The background product images are moving at about the same speed as the text, while the foreground product images are moving faster than the text.  This is parallax scrolling at its best, various layers of images stacked on top of each other, all moving at different rates and giving a 2D visual a 3D effect.

Parallax scrolling is not solely restricted to things moving vertically, or in straight lines for that matter.  Leave it to Nintendo to be the ones providing us with an excellent example of this.  Flashing back to the early nays of original Nintendo, our characters typically moved horizontally across the screen from left to right and not vertically down our screen from top to bottom like we were when scrolling through the Activate site above.  Take a trip through MarkioKart Wii and let’s talk about some of the cool things going on here.

The first thing you’ll notice is like I just pointed out about the early days of Nintendo, the site scrolls horizontally across the screen and not vertically.  Sure, that’s cool, but it’s also not that new of a concept either.  You’ll notice the parallax effect with Yoshi and shells in the background, Mario and Luigi in the foreground and the main content all moving at different speeds.  But once you scroll between the highlights page and the attack page you’re no longer moving in a perfectly horizontal line any more.  Same goes for the transition from the rediscover and SNES pages.  The images not only maintain their different rates of horizontal movement, but now they change direction and go vertically as well.

It’s also worth noting that utilizing a parallax scrolling effect in your site does not have to limit you to a faux-3D effect.  German design firm Webseitenfactory is a testament to that as they utilize some parallax scrolling effects to help bring their site to life with various icons moving, growing, and shrinking as you scroll through their site.

Parallax scrolling can also help you spice up a site that doesn’t necessarily require all that much content.  What if all your site required was a mission statement, or about us section, and some contact info?  Chances are you could do that in a single page and given the right circumstances you may be able to make that single-page website look nice, but will it be memorable and stay in peoples minds?  Probably not.  But what if you just add some parallax scrolling to it, like the folks at Spring / Summer did?

My first impression was, “Oh, this site looks nice.”  But then once I began to scroll down it immediately became, “Whoa, this site is cool!”  Just adding a simple effect like that can mean all the difference between being complimented and being remembered.

Parallax scrolling is a nice trick to have up your sleeve.  Whether you’re looking to build a complex, multi-page website, or a simple single-page web presence, be sure to check back as I begin my tutorial on how to develop a parallax scrolling website.

...

This week we’re going to finish up the portfolio slider on our homepage that we have already started.

At this point, if you view your index.php file and scroll down to the secondary screen it should look something like this.

We’re close, all we have to do now is plug in our jQuery elements and then add some CSS to make our secondary portfolio slider screen responsive.

Go ahead and download the Java files you’ll need from here, keep the js directory in your root folder and check out what out the image below to see what your finished product will look like.

Let’s begin in our index.php file.  The first thing we’re going to do is add some links inside our heading that point to our java scripts. These are the jQuery and JavaScript’s that power our slider. As you can see I sandwiched mine between the link to my style sheet and the closing of the head tag.

<link href="main.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. }); </script> </head>

At this point you should have a fully functioning slider, but it’s not quite responsive yet.  To make our slider responsive we just have to add a few more things in our media queries and we’ll be done.  First up will be our media query for landscape view tablets with a max width of 1024 px, all we need to do is add our #mainBG2 tag under our #mainBG tag.

#mainBG2 { border-top:10px solid #EDEAE5; background:...

We’re going to wrap up our tutorial on how to develop a responsive website this week by making our secondary page, well, responsive.

We created our large layout for the page in our last tutorial, but now we want to make it fluid so that it will display nicely across various platforms, ranging from tablets and mobile devices to PC’s. 

Let’s take a quick peak at what we’re working towards.

Notice how once we hit the skinnier, mobile version of the site we go to a more vertical layout.  This makes it easier to read the text as it allows someone browsing the page from their touch-screen mobile device to navigate the page with one hand, as they can hold the device in their palm while vertically scrolling with their thumb.

The first order of business is to set some parameters for our main “services” id section under the landscape tablet media query.  We want to use our medium sized image to cut down on load time.  So, under the Tablet Layout: 768px  @media only screen and (max-width: 1024px) and (orientation:landscape), I have added the following bit of CSS.

#services { background: url(images/servicesMed.jpg) no-repeat fixed; background-position:center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }

Once we have shrunk our background image down a bit we’re going to want to do the same with our services bubbles, and all of the content within the bubbles.  You’ll notice that I also changed the margins up a bit to accommodate the smaller sized circles.

.servCats { width:100px; height:100px; margin-left:12%; } .servCats p { width:100px; text-align:center; margin-top:30px; } .servCats a { font-size:1.2em; }

That does it for the landscape tablet view, so now let’s scroll down a little further in our main.css file and tweak the portrait view.  This will be the exact same code as above.

#services { background: url(images/servicesMed.jpg) no-repeat fixed; background-position:center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .servCats { width:100px; height:100px; margin-left:12%; } .servCats p { width:100px; text-align:center; margin-top:30px; } .servCats a { font-size:1.2em; }

Last up on the docket is our mobile media query.  What we’re going to do here is take our two “servColumn” elements and display them one on top of the other, instead of side-by-side like they are in the larger formats of our design.

Displaying these elements vertically like this will make the content much easier to read on mobile device.  To maintain the same appearance as we did in our larger design we would have had to shrink the text so small that it was unreadable, or if we maintained a reasonable size font we would have averaged a word or two per line.

First things first, go ahead and define the small image for the mobile query.

#services { background: url(images/servicesSmall.jpg)...

We’re going to begin to wrap up our tutorial on creating a responsive website this week by creating a secondary services page to feature the necessary, and important, content of our site.  Keeping a sites layout visually appealing is a crucial aspect of keeping a visitor on your site.

Having a simple box filled with verbiage running from left to right is not very inviting, nor aesthetically pleasing.  When displayed like that, the sheer amount of text could be enough to cause your visitor to quickly back up and off your site.  That’s why we’re going to break our text up and display it a little more creatively on our larger format.

Let’s first take a look at what we’re going to create and download the work up to this point, if need be.

When developing a site I typically use my homepage as a template by utilizing the “Save As” feature and renaming it what ever my new page will be.  Feel free to start from scratch or follow along on my code deleting rampage.

Open up your index.php file and save it as services.php.  Once it’s saved as services.php we’re going to need to delete some of the content.  We’ll start in the head of our document by deleting most of the Java scripts and links, with the exception of the two lines following the link to our CSS file.  These two lines call the jQuery and link the the JavaScript necessary for the Twitter feed in our footer to work.  The rest of the Java links can go, they were only necessary for features on our homepage and are no longer relevant.

My <head> section now looks as follows.

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> <title>Responsive Web Design</title> <link href="main.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="js/twitter.js"></script> </head>

We’re going to rename our “mainBG” div to “services”.  Go ahead and make that switch and change class “homeContent” to “servContent”.  You’ll also swap the note that closes our services div from “mainBG” to “services” to prevent any future confusion.

Next we’re going to want to ditch our “blurb” class, and the final thing we’re going to want to nix is the entire “mainBG2” section, which contains all of the information for the portfolio slider that’s on our homepage.

At this point, weather you gave your delete key a work out or exercised your words per minute, your page should look as follows.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> <title>Responsive Web Design</title> <link href="main.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"...

We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer.

In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well.  In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work.

If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick look at what we’ll be finishing up today.

We’ll begin with our Twitter feed and break it down in to three parts.  The first thing we’re going to need to do is retrieve our tweets and set it up so that we can easily change the account name, how many tweets we want displayed, and what element we want it to look for to display our tweets.  To do this we’re going to utilize AJAX to call the Twitter API in JSON format and then process it.  My code looks as follows.

JQTWEET = { user: 'TheScottStanton', numTweets: 1, appendTo: '.twitter', loadTweets: function() { $.ajax({ url: 'http://api.twitter.com/1/statuses/user_timeline.json/', type: 'GET', dataType: 'jsonp', data: { screen_name: JQTWEET.user, include_rts: true, count: JQTWEET.numTweets, include_entities: true }, success: function(data, textStatus, xhr) { var html = '<div class="tweet">TWEET_TEXT<div class="time">AGO</div>'; for (var i = 0; i < data.length; i++) { $(JQTWEET.appendTo).append( html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text)) .replace(/USER/g, data[i].user.screen_name) .replace('AGO', JQTWEET.timeAgo(data[i].created_at)) .replace(/ID/g, data[i].id_str) ); } } }); },

Next we’re going to want to create a dynamic calculator that can tell us how long ago we posted the tweet.  We’ll start by getting the time it was posted, which will require having to make an exception for IE as it can’t handle the screwy Ruby dates.  After that we’ll create a series of if statements to give our time stamp a relative time like “seconds ago”, or “about 1 hour ago.”

timeAgo: function(dateString) { var rightNow = new Date(); var...

In the last post, Creating and Manipulating Modal Popups, I discussed what the JavaScript method showModalDialog is used for and how to implement it in your website.

Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent.

User Experience

Manipulating data in the popup window can be tricky, because modal windows do not function like normal ones. In a normal window, when your page does a postback, the postback is rendered in the same window as the original page.  In a modal popup window, the postback opens a brand new window to re-render the popup. However, the original popup window does not close. In addition, this new window does not conform to the window feature settings defined in the parent page’s showModalDialog(), instead it opens based on the browser’s default for new windows.

Not good. Now your user is looking at two versions of the popup, the original (opened by the parent.htm page) and a second normal sized “non-modal” view of it (opened by the postback), which leaves the user with a poor experience of your website.  To circumvent this catastrophe, you’ll want to use the <base> tag in the head of your popup page.  Here is the syntax of the <base> tag:

<head> <base target=”_self” /> </head>

This simple tag will ensure all postbacks of the child page are re-rendered within the same popup window object.

The Pass Back

Next, let’s examine the window.returnValue property, which is used to return a value or object back to the parent window. The showModalDialog method returns a value back to the parent window only when the window.returnValue property has been set in the popup.

Below is the parent.htm page which includes the javascript to open the child window and a textbox in the body which will be used to display data passed in from the child.htm page.  Try it by copying the markup into a new page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Modal Popup Example</title> <script type="text/javascript" language="javascript"> function openPopUpWithSize(theURL, title, heightInPX, widthInPX) { document.getElementById("MyParentTextbox").value = window.showModalDialog(theURL, title, 'dialogHeight=' + heightInPX + 'px;dialogWidth='+ widthInPX + 'px'); } </script> </head> <body style="text-align: center;"> Modal Popup Example <br/> Parent Page <br/> <br/> <input...