Archive for June, 2012

Showcase of creative facebook timeline cover images

Wednesday, 27 June, 2012

As the old saying goes ‘a picture is worth a thousand words‘. Well, with the introduction of facebook’s groundbreaking feature called ‘timeline’, people got a new and innovative way to personalize their facebook profile page with a huge cover image of their liking. In addition to the usual facebook profile display picture we can also use this timeline cover image to display additional graphic content to spice-up the public profile page. Talented folks use this space to display their creativity part by brilliantly combining the timeline and profile pictures.

Facebook cover images are becoming an integral part of any facebook profile or page. Here I am presenting you all with a collection of beautiful and creative facebook timeline cover images. All of these images are linked to its original source. The images are bookmarked with the original URL, each of these image has its own copyright terms of usage. If you’d like to use one of these images, please contact the copyright owner for the right permission.

capital FM - Facebook Timeline Cover


MarioGembell - Nature Facebook Timeline Cover on the Behance Network


Paylane - Facebook Timeline on the Behance Network


Fabio Pisano, a graphic designer from Milan - facebook cover


ekkapong - Top 10 Facebook Timeline Cover Designs


scott lamb - Facebook Timeline Cover


Jeremy bronson - Facebook Timeline Cover : Creative Examples Photo


Gianmarco - Facebook Timeline Cover : Creative Examples Photo


Sune Adler - Facebook timeline covers


Creamy and Smooth - Facebook Timeline Cover


Master Chef - Cooking Facebook Timeline Cover


Sune Adler - funny creative facebook timeline cover


Enri Pedernerea - Funny Facebook Timeline Cover


Xafar quraishi - Facebook new profile timeline psd


Jeffrey Diana - Facebook-Timeline-Cover-Photo.JPG (1113×599)


Ekkapong - facebook-cover-photo-sample-2.jpg (616×293)


Mohammad L Assam - Stay hungry stay foolish


Campofrio - Facebook Page Timeline Design on the Behance Network


Missão Sorriso - Facebook Page Timeline Design on the Behance Network


Lev Detrez FB Timeline design


Child Wise - Facebook cover

Pure CSS – HTML accordion using Details & Summary elements

Monday, 11 June, 2012

Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets.

HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc… those things were possible only with Javascript or flash earlier.

Demo

Before we continue to the css/html code, let’s take a look at the fully-functional accordion widget here…

Details and Summary Elements

By using the <details> and <summary> elements together we can create an accordion like toggle widget.
As per W3C specification the detail element is defined as

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
W3C defines the summary element as

The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view/hide the details.

However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.

Usage – Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>

Browser Support

It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh which will do the trick on other browsers.
source: http://caniuse.com/details