Impressive CSS Slide Panel image

it’s sliding panels animation with CSS 3.  Without using JS – Javascript this is a very smooth image animation play with CSS only. Wonder  full demo with tutorial to follow it through make most of this. Cheers.  Tutorial…!

Sliding Image Panels

Gist of the radio button selection with beautified images – labels is here.


Our aim is to first hide those radio buttons by covering them up with labels. In web browsers, clicking on a label will make the respective checkbox or radio button selected. Giving an ID to the input, we can use the for = idref attribute of the label to reference the respective input.

Second, we want to place all the background images correctly and third, we want to show the respective image slices and titles when clicking on a label.

So, lets first syle the section and give it a white border with some subtle box box shadow:

<span class="hljs-class">.cr-container</span><span class="hljs-rules">{
	<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">600px</span></span></span>;
	<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">400px</span></span></span>;
	<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
	<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> auto</span></span>;
	<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">20px</span> solid <span class="hljs-hexcolor">#fff</span></span></span>;
	<span class="hljs-rule"><span class="hljs-attribute">box-shadow</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> <span class="hljs-number">1px</span> <span class="hljs-number">3px</span> <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.1</span>)</span></span>;
<span class="hljs-rule">}



  1. Demo 1: Slide to right
  2. Demo 2: Odd/even slide to left/right
  3. Demo 3: Odd/even slide up/down
  4. Demo 4: Scale up/down

And that’s it! I hope you enjoyed this tutorial and find it inspiring!


Horse Play Google Doodle in CSS

A very impressive CSS version of a little Google Doodle animation. Really impressive work without Any Javascript, It’s pulled off fluid excellent !

Google Doodle



It is important to change the radio input to a checkbox input so that when the player button is re-clicked (clicked again, after playing), the animation stops/pauses. Also the player image is a <img> element now, instead of being a background to the <label> element. This helped in getting rid of the player-slide keyframes by using simple transitions to slide the <img>.

Next, a new parent div has been introduced for the grids and the horse image has been set as a background image to the new div instead of the small divs. Then I applied a 5 secondtransition to the background-position of the new container to imitate the rewind effect. The rewind effect is then followed by the normalanimation which has an animation-delayset to 5 seconds to let the rewind effect occur entirely.


Google Web Designer HTML5 Tool is Updated

Originally, this application was launched in September 2013 and it is marked as one of the largest update since the release. Users can download this software for free. With this application, designers can see and tweak the code behind the design tools and can experience amazing designing experience.

The association says that ads built with Web Designer have now been seen over 2.5 billion times. The infancy of users (72%) are outward of a U.S. and 20% are returning users.

Google Web Designer HTML5 Tool

Google always put a concentration for Web Designer on producing interactive ads. And while a apparatus offers a series of ad-centric features, there is zero that would stop we from regulating it to develop any other kind of content, as well. If we wish to build ads with Web Designer, though, a new chronicle now facilities a significantly deeper formation with that service, too. You can now tell your creations directly to DoubleClick Studio, for example, and those ads are automatically tagged with a right account, advertiser and debate information.

Google’s AdWords use for advertisers now also supports HTML5 ad creatives from Web Designer. This outlines a initial time AdWords can hoop HTML5 ads. Google also says that Flash ads that are uploaded to Adwords will be automatically converted to HTML5 now, too.

While that’s good for advertisers, other users will expected conclude a further of a series of new animation collection to Web Designer more. The group reworked a animation timeline in a collection to now embody facilities like animation scrubbing, timeline events and automobile keyframing, which should make it utterly a bit easier to build animations inside a tool. The group also combined a few new 3D features, that should make a animations some-more interesting, too.

Other new facilities embody an formation with Google Drive to make it easier to share Web Designer files with others, as good as integration with a CodeMirror content editor. On a some-more technical side, a group rewrote any member in a application as a web component. This includes things like galleries, maps and YouTube embeds.

Developers can easily create more interactive and animated content with Google Web Designer HTML5 Tool after its update. Google Web Designer HTML5 Tool is announced by Google, this week. After this update, developers can easily develop more interactive and animated content and can also bring tighter integration with AdWords.

So Download and Enjoy!! Download


IE compatibility issue? add X-UA-Compatible Meta Tag

What is “IE=edge” and why should we add?

“IE=edge” will instruct browsers to use the latest version of IE. Also note that individual user settings in IE settings may override X-UA-Compatible content setting, forcing pages to render in compatibility mode.

However, “IE=EmulateIE8” will override user settings and is one way to get past that issue and force IE 8 rendering mode.

Designating “IE=edge” is the best practice because it ensures Internet Explorer uses the latest engine. The most current Internet Explorer version includes the latest security updates as well as feature support. The current version is also the fastest version.

Add following meta in head section of the web page

The most common way to designate which version’s compatibility mode to use is including a X-UA-Compatible META tag in the page’s head. This is done using an http-equiv META tag, specifying “X-UA-Compatible” and the content to the IE version. Setting the version to ‘edge’ tells Internet Explorer to use the latest engine to render the page and execute JavaScript.

Please note that “It has to be the very first meta tag in the head (but can be after the title tag)”

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Do not use Chrome=1 Info for IE, Google Chrome Frame is no longer supported and retired as of February 25, 2014, more details are at developer FAQs.


What is viewport meta tag?

The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you’re not actually changing your site’s design for mobile, and it renders better with a larger or smaller virtual viewport.

Without viewport your device uses a virtual viewport which by default is effectively a zoomed out version of your website, this is around 980 px on iPhone and 800px on andriod. As soon as you set the viewport and disable this zooming out, the device treats the website as it should and measures out at around 480px wide or 320px depending on device and orientation etc.

Full resource here below, my advice is that whenever your working with responsive & mobile, always set the viewport first. It is the best way to normalise device zoom and ensure your site is shown using an actual device width as opposed to any virtual widths.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The viewport meta tag supports a handful of other properties for the “content” attribute:

Property Description
width The width of the virtual viewport of the device. Enter a
number (pixels assumed), or the keyword “device-width” to
set the viewport to the physical width of the device’s screen.
height The height of the virtual viewport of the device. Enter
a number (pixels assumed), or the keyword “device-height
to set the viewport to the physical height of the device’s screen.
initial-scale The initial zoom of the webpage, where a value of 1.0
means no zoom.
minimum-scale The minimum level the user is able to zoom out of
a webpage, where a value of 1.0 means the user isn’t able to at all.
maximum-scale The maximum level the user is able to zoom in on
a webpage, where a value of 1.0 means the user isn’t able to at all.
user-scalable Sets whether the user can zoom in and out of a webpage.
Set to yes or no.

CSS3 color formats

CSS2: Color formats

  • Hex format – #cccccc
  • Shorthand hex format – #ccc
  • rgb() format – rgb (red, green, blue)
  • Named colors – white, red, blue, etc

CSS3: New color formats

  • HSL – hsl(hue, saturation, lightness)
  • CMYK – cmyk(cyan, magenta, yellow, black)
  • HSLA – hsla(hue, saturation, lightness, alpha)
  • RGBA – rgba(red, green, blue, alpha)


  • HSL stands for Hue, Saturation, Lightness
  • A format that is easier for humans to understand and manipulate
  • HSLA – hsla(hue, saturation, lightness, alpha)

Responsive Images

Responsive Images

There are various way available to make images responsive, like with JQuery, media-queries, <picture> tags, but I think below is the best and easiest way to make image responsive.

img {
border: 0;
width: 100%;
display: block;
max-width: 100%;
height: auto;

Above way will work in supported browsers, images will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.

Table sorter

I come across excellent Table sorter jQuery plugin, with good examples and excellent documentations.

Table sorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

I liked this because it’s multi-column sorting and supporting almost all browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)

Check this out URL: