It’s hard to imagine that something we see and use on a daily basis can exude so much beauty in photography. I’m talking about the scenic paths we hike on and explore, the roads we take to get to work and to travel across and beyond the boundaries of the country. Given our daily exposure to roads and paths, I expected myself to take their existence for granted, not be dazzled by them. But when I stumbled across a few of them on the Net, I got a unique and up-lifting feeling instead.

I think roads are more than just a physical entity; they are symbolic to some extent. They symbolize our journeys towards a destination, much like the goals and dreams we work hard to achieve in our lives. I figure this was probably why I felt inspired by each of the 50 exquisite photography shots of roads and paths that follow.

As you scroll down each of them, observe the feeling each snapshot evokes in you. Notice how the different angle, backdrops, colors, etc used in the shots change your mood. It will be quite an interesting experience for you, I’m sure.

Recommended Reading: Breathtaking Cloud Photography

The Scenic Path (Image Credit: Cichutko)

Curve (Image Credit: Roger Arleryd)

Drunk N Tunnel (Image Credit:Jerry Berry)

Road to Nowhere… (Image Credit: Petra Oldeman)

Road to Dyrholaey (Image Credit: Piotr Adam Szuszkiewicz)

Road to Karahnjukar Hydropower (Image Credit: Piotr Adam Szuszkiewicz)

The Road to Your Destiny (Image Credit: Stealth37)

Along the Road (Image Credit: MyINQI)

Autumn Road (Image Credit: F3rd4)

Glossy Autumn Road (Image Credit: Tomsumartin)

Up the Road (Image Credit: Rscorp)

Coppins Crossing Road (Image Credit: NathanaelB)

Dawn on the Great Alpine Road (Image Credit: CBS Interactive)

Empty Road (Image Credit: Stock Project)

Green Tunnel or ‘The Road to Hobbiton’ (Image Credit: Hauke Steinberg)

Hong Kong – Rail and Road Traffic Trails (Image Credit: Markus Bahlmann)

May the Road Rise With You (Image Credit:Eric Hill)

Merthyr Road in Mist (Image Credit: Stuart Herbert)

Midnight Road (Image Credit: AJHosgood)

Northport Road Summer (Image Credit: Denny Moutray)

Old Dirt Road (Image Credit: nuaHs)

Open Road(Image Credit: ClaudiuNenu)

Green Misty Road (Image Credit: Dianora)

Yellow Brick Road (Image Credit: Daryn Moffitt)

What’s a Road Trip Without a Road (Image Credit: David Bailey)

Morocco (Image Credit: Markel)

Towards the Dark – Lecce, Salento, Italy (Image Credit: Paolo Margari)

The Turn Around Road (Image Credit: Scott M. Tiek)

The Road to Ribblesdale (Image Credit: Luc B)

The Road To… (Image Credit: Lorien, Joe & Moshe)

The Open Road On a Sunny Day (Image Credit: Mahira K. Muliotoh)

Sparse Road (Image Credit: Trey Ratcliff)

The Leafy Road to Llantrisant (Image Credit: Stuart Herbert)

The Endless Road… (Image Credit: Laura-in-china)

Spaghetti Junction (Image Credit: Chris Gin)

Sandstone Dome, Kolab Road (Image Credit: Louis Vest)

The Road Never Ends(Image Credit: Ben Heine)

Smooth Road (Image Credit: Korulkumi)

Overlook Road (Image Credit: Jason St Peter)

Black & White Road (Image Credit: AZ-designer)

Road Ahead (Image Credit: Tomsumartin)

Dark Skies & the Road (Image Credit: Damnengine)

The Morning Road (Image Credit: Barnulf)

Roller Coaster Road – Spring (Image Credit: Bill)

Road to Nowhere II (Image Credit: Ugur Yildiz)

Road to Eternity (Image Credit: Mariusz)

Road to Madinah (Image Credit: AG Bek)

Road Into Darkness (Image Credit: Pasotraspaso)

Road the Winter Can Come From (Image Credit: Robertmekis)

On the Road (Image Credit: Embuz)

Related posts:

1. 100 Exquisite Airplane Window Shots
2. Showcase of Water Photography in Black and White
3. 20+ Picturesque Shots of Rainbow
4. Group Photography: Tips and Beautiful Examples

In this post, we are going to work on a fictional project, creating a single product page to offer iPhone 4S, and in this project we are also going to implement the methods that we have discussed in the previous posts; the <details> element and the negation selector.

Let’s get started.

The HTML5 Markup

First, we need to create an html document with the following markup:

  <div class="product">      <header>      <hgroup>        <h1>Apple iPhone 4 - 16GB</h1>        <h4>The most amazing iPhone yet.</h4>      </hgroup>    </header>      <figure>      <img src="http://media02.hongkiat.com/html5-single-product-page/iphone4s-3d.png">    </figure>      <section>      <p>The faster dual-core A5 chip. The 8MP camera with all-new optics also shoots 1080p HD video. And introducing Siri. It's the most amazing iPhone yet.</p>      <details>     <summary>Product Features</summary>        <ul>          <li>8 mega pixel camera with full 1080p video recording</li>          <li>Siri voice assitant</li>          <li>iCloud</li>          <li>Air Print</li>          <li>Retina display</li>          <li>Photo and video geotagging</li>        </ul>    </details>      <button>Buy Now</button>      </section>    </div>  

We use several new tags from HTML5 spec., like the header, hgroup, figure, section, and one we’ve discussed before; the details and summary tag.

However, we are not going to dig into these tags, not because we are not willing to, but rather these are basic topics that you can find easily elsewhere. So, if you are really new to HTML5, I would recommend you read the following references of those tags; they have explained them comprehensively:

• Let’s Talk about Semantic
• The HTML5 Header Element
• The hgroup Element
• HTML5 Tag Reference

Now let’s see our page’s first appearance.

Well, it looks sensible without any styles. At the very top there is the header, and then comes the section for the image, description and lastly the ‘Buy Now’ button. Now, let’s perk up this page.

The Styles

We will start off by normalizing all default styles using this stylesheet and add a gradient background to the html tag.

  html {    height: 100%;    background: #f3f3f3;    background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(50%,#ffffff));    background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);    background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);    background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);    background: linear-gradient(top, #f3f3f3 0%,#ffffff 50%);    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );  }

Remember that our product elements are all wrapped within a div with the product class. So, here we would like to center the wrapper and set the width to be about 650px.

  .wrapper {    width: 650px;    margin: auto;    padding: 25px 0px;  }

The header section

In the header section we have two headings h1 and h4, so let’s style these elements.

  h1, h4 {    font-family: Helvetica Neue, Arial, sans-serif;    font-weight: normal;    margin: 0;  }  h1 {    font-size: 24pt;  }  h4 {    font-size: 16pt;    color: #aaa;  }

And then add a little space at the bottom of the header with a margin.

  header {    margin-bottom: 20px;  }

If you look at the very right side of the header, there would be a lot whitespace in that side.

So why don’t we also put the Apple logo in there.

  header {    margin-bottom: 20px;    background: url('../http://media02.hongkiat.com/html5-single-product-page/apple.png') no-repeat right center;  }

The Product Image

Next, float the image to the left and set the image maximum width to 350px.

  figure {    float: left;  }  figure img {    max-width: 350px;  }

Since the image has been pushed to the left, then we will float the description section to the right and set the width to 300px.

  section {    font-family: Tahoma, Arial, sans-serif;    line-height: 150%;    float: right;    width: 300px;    color: #333;  }

Now let’s see the result so far.

It starts looking good, but the details tag still doesn’t work yet (except in Chrome), so let’s style the button next.

The Button

For the button styles, we will mimic the one from the Apple.com Store. And here is all the syntax you need to put in your stylesheet for the button.

  button {    background: #36a9ea;    background: -moz-linear-gradient(top, #36a9ea 0%, #127fd2 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36a9ea), color-stop(100%,#127fd2));    background: -webkit-linear-gradient(top, #36a9ea 0%,#127fd2 100%);    background: -o-linear-gradient(top, #36a9ea 0%,#127fd2 100%);    background: -ms-linear-gradient(top, #36a9ea 0%,#127fd2 100%);    background: linear-gradient(top, #36a9ea 0%,#127fd2 100%);    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#36a9ea', endColorstr='#127fd2',GradientType=0 );    border: 1px solid #00599d;    color: #fff;    padding: 8px 20px;    -webkit-border-radius: 3px;    border-radius: 3px;    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);    text-shadow: 0px 1px 1px #156cc4;    filter: dropshadow(color=#156cc4, offx=0, offy=1);    font-size: 10pt;  }    button:hover {    background: #2f90d5;    background: -moz-linear-gradient(top, #2f90d5 0%, #0351b7 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f90d5), color-stop(100%,#0351b7));    background: -webkit-linear-gradient(top, #2f90d5 0%,#0351b7 100%);    background: -o-linear-gradient(top, #2f90d5 0%,#0351b7 100%);    background: -ms-linear-gradient(top, #2f90d5 0%,#0351b7 100%);    background: linear-gradient(top, #2f90d5 0%,#0351b7 100%);    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2f90d5', endColorstr='#0351b7',GradientType=0 );  }    button:active {    background: #127fd2;    -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0);    box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0);  }

Now the button should look better.

Problem in Internet Explorer

As usual IE (Internet Explorer) always causes some trouble; if you open this in any IE lower than 9, the page will remain un-styled.

This is because Internet Explorer does not recognize the new elements (section, header, etc.) so the styles that we’ve specified failst to apply. Thus, in the next step we will work on solving this problem.

Testing Browser Support

In our previous post, we have tackled the browser support for the details element using this polyfill; so that it could work in the unsupported browsers. However, this time we will try different ways of doing it with Modernizr.

From its official website, "Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites". Technically, Modernizr will test the browser support for certain new elements and features. If support is not provided, we must then provide a fallback whether it is by giving different styles or providing polyfills. In this case, we will use Modernizr to help us test the details and summary element.

1. Go to Modernizr and proceed to its download page.

2. In the download page, Modernizr provides some options to configure the library, so you only have to select certain features you really need for your website. In this case, we need:

   • HTML5Shiv 3.4
   • Add CSS Classes, this feature will automatically insert classes in the html tag.
   • the Modernizr.load,
   • go to the community add-ons box and select elem-details,
   • In the Extensibility section, select Modernizr.addTest.
3. Generate and download the file.
4. Link it to your html and reload the page in Internet Explorer. The page should’ve now been styled since Internet Explorer can now recognize the tags.

And, if you view the source or inspect element, you will find the no-details class has been inserted in the html tag; indicating that the browser where we are previewing the page; is currently not supporting details element. @@@@ [ I can't understand this sentence. ]

We can then create a fallback using this class as the hook, which we will be doing in the next step.

The Fallback

In this step we will provide similar details element functionality for other browsers (excluding Chrome). In the previous post, this step was automatically done using this script, but this time we will create it on our own.

Note: Just reviewing a bit from our previous post; the details element is currently only supported in Chrome browser.

So, let’s start working on the CSS first.

On the summary tag, we change its cursor mode to pointer, so the user will notice that it is clickable.

  summary {    cursor: pointer;    font-size: 12pt;    outline: 0;  }

To give more spaces at the top and bottom of the details element with a margin.

  details {    margin: 20px 0px;  }

By default, the summary tag will have an arrow. But here we would like to replace it with a plus-minus icon.

Note: Before proceeding, I previously have downloaded the icons from this collection by Fugue, download and sprite them into one file.

Let’s add a before pseudo-element and attach the icon as background. Notice that at this point, the background position is at the top which will show the plus icon.

  details > summary:before {    width: 16px;    height: 16px;    display: inline-block;    content: '' !important;    background: url('../http://media02.hongkiat.com/html5-single-product-page/plus-min.png') no-repeat center top;    margin-right: 5px;    position: relative;    top: 2px;  }

Then, when the details element is open, the background position will move to the bottom which will show the minus icon.

  details[open] > summary:before,  details.open > summary:before {    background: url('../http://media02.hongkiat.com/html5-single-product-page/plus-min.png') no-repeat center bottom;  }

The [open] sign is a selector. In this case, it will select the details open attribute in supporting browser.

Lastly we should hide the arrow that by default is shown in Chrome.

  details > summary::-webkit-details-marker {    display: none;  }

Then, let’s see the result in a browser for a while.

The default arrow now has been replaced with our icon, and if you see it in Chrome you’ll already have a toggle effect when you click on it; the icon will change accordingly. But, in other browsers nothing will happen still. So, in the next step we will try to replicate the effect with jQuery.

The toggle effect with jQuery

Before we begin with the jQuery part, I would like to thank Ian Devlin for the inspiration, the script below is actually a slight modification of his.

All right, let’s create a variable to store the summary tag.

  var summary = $('details summary');  

Then we wrap all the sibling elements of the summary with a div.

summary.siblings().wrapAll('<div></div>');

And hide that div when the details element does not have the open class.

$('details:not(.open) summary').siblings('div').hide();

When the summary is clicked, we want the hidden div to be shown, and the opposite, when the div is initially open, it would be hidden.

  summary.click(function() {    $(this).siblings('div').toggle();    $('details').toggleClass('open');  });  

To make sure that those functions will only be executed in the unsupported browsers, we wrap them inside this conditional statement.

  if($('html').hasClass('no-details')) {    //the code goes here  }

And below is the code we have:

  if ($('html').hasClass('no-details')) {    var summary = $('details summary');    summary.siblings().wrapAll('<div class="slide"></div>');    $('details:not(.open) summary').siblings('div').hide();    summary.click(function() {    $(this).siblings('div').toggle();            $('details').toggleClass('open');      });  }

Now let’s test it in the browser; the toggle effect should’ve now worked on all browsers, I personally have checked (until Internet Explorer 7).

• Demo
• Download Source

Tips: Alternatively you can change the .toggle() with .slideToggle() to create a slide effect. Also if you want the detail to be opened initially you can add a class open in the details element.

Conclusion

We have been through all the steps of creating a single product page using HTML5, debugging for unsupported browsers as well as replicate the toggle effect for detail element on our own, so hopefully you can learn a lot from it.

However, I’m aware that I did not explain everything in detail in this post, so if you want to clear something up, feel free to post the question in the comment box below.

Related posts:

1. HTML5: How to Use <DETAILS> and <SUMMARY> Tags
2. Beautiful & Creative Single-Page Portfolio Websites
3. LESS CSS Tutorial: Designing A Slick Menu Navigation bar
4. Beginner’s Guide To: Building HTML5/CSS3 Webpages

If you happen to have a contact on Facebook who usually annoys you via chat, then you may have trouble keeping them away. As you gain more contacts on this digital network, you may want to control who gets to see you online and not, via chat. The Facebook chat is handy, that is for sure. But if in order to keep away from some annoying ‘friends’ or from any form of distraction, you have to turn the chat offline, wouldn’t you prefer a better alternative?

In this tutorial we will show you how you can selectively decide who can see you online on Facebook chat. There is no extension or plugin required, you can simply set from the chat box itself.

Recommended Reading: How To Use Images In Facebook Chat Box

Hiding on Facebook Chat

Whether or not you are familiar with these options, there are two ways to keep away from annoying people on Facebook Chat.

Hide from a friend

If there is only one person you want to hide from, click open the chat window of your friend, click the ‘gear’ button and select ‘Go Offline..’

By selecting this option, your friend will see you as offline, but you can still send them messages.

Hide from a list of friends

When there are a string of people you want to hide from on your Facebook chat, the best way is to group them in a list on Facebook.

1. To create a list, go to your Facebook Wall, look for ‘List’ on the left and click ‘MORE’.

   

2. Click on the button that says ‘Create List’.

   

3. A pop-up window will appear, in the ‘List Name’ field, you can name this list anything that’s easy to remember, then enter the name of people you want to hide from. When completed, click the ‘Create’ button.

   

Now you have created a list of people you want to hide from. Next, open your chat box and go to ‘Options’ by clicking on the gear button, and then select ‘Advance Settings…’

In the pop-up window, select the first option that says ‘All your friends see you except…’ and enter the name of the new list you have just created.

Click the ‘Save’ button and you now appear offline on Facebook Chat to the friends in the list.

To Undo Hiding

To undo hiding, go back to the ‘Advanced Chat Setting’ and clear the group name off the list. Hit ‘Save’.

Conclusion

The step to hide from selective friends on your Facebook chat is no secret; anyone can do it. Of course, while you can hide yourself, there are no options that would allow you to check who is hiding from you. Yet.

Related posts:

1. How to Use Images in Facebook Chat Box [Quicktip]
2. How to Setup Messages + Facebook Chat in OS X Lion [Quicktip]
3. How to Customize and Beautify Facebook Chat [Quicktip]
4. Facebook Chat: Emoticons, Tips & Tricks To Enhance Conversation