Create a CSS3 Clock using no JavaScript

CSS3 has shown a true test of mettle in the field of power and speed. One can produce a pixel perfect webpage with CSS3 that will load faster, has a small overall file size and fewer HTTP requests.

CSS3 animation module provides an elegant solution to basic animation needs of webpages without requiring to trespass the realm of scripting and has the potential to be a major part of web designing practices. Using CSS3 keyframe animations, one can create smooth, maintainable animations that perform relatively well.

An example of creating an analogue clock using purely CSS would be a nice way to illustrate the power of CSS3. No Javascript is used for this purpose. This article will walk you through with various parts of the CSS3 clock, mainly focussing on the new features introduced in CSS3, like the transforms, gradients and animations.Continue Reading

Create Parallax Scrolling using jQuery

Parallax scrolling is a relatively new trend in web design. With this effect, you can create an illusion of depth on your webpage. Parallax works by making the background of the webpage scroll at a slower speed that the foreground, thus giving the scene a perceived depth. This is similar to the idea that when you are moving, objects nearer to you move at slower speeds- hence, the background appears to be behind the foreground.

So, how do we achieve this effect? Well, it’s quite simple really. Whenever a users scrolls on the page, we calculate how much the page has been scrolled. We then scale down this scroll-height and move the background image up or down accordingly. Here’s the result we wish to achieve.Continue Reading

Create a Responsive Portfolio using Twitter Bootstrap

Responsive Portfolio with Twitter BootStrap

Bootstrap is a frontend framework developed by Twitter for design purposes. Apart from being responsive, it has got different components ranging from grid systems to icons set and hence surely lead the all the other frameworks. Bootstrap is open source and is the most popular repository on GitHub.

Today we will make a responsive portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. The working demo of this tutorial can be found here.

Getting Bootstrap

Bootstrap can be downloaded or compiled to your needs from their ‘Getting Started‘ page but I would prefer using the CDN option, because it’s faster. Also, it is advised to go through the page and get yourself accustomed with some bootstrap terms, including common classes. This page also has some examples of how to use Bootstrap classes. Be sure to check them out. Observe the responsiveness by shortening your browser at various widths and noticing the difference (don’t be lazy, do that). See how the rendering differs at different widths.Continue Reading

Sticky Headers- Challenges, Considerations and How to create one?

sticky-header

Among the many trends in web designing in recent times, you must have noticed that one very important one is having a header which does not disappear when you scroll down. Navigation is very important in a website (there are people who still believe in the three click rule) and a fixed header helps in the same.  UX experts have debated whether sticky headers at the top of the page, which are always visible to the user, are the thing to go with, but the end users usually prefer such headers.

What is a sticky header?

A fixed or sticky header is a horizontal menu which stays fixed at its place even when the user scrolls down. Therefore, if you need to access some item on the header, you don’t need to scroll right to the top as it’s visible to you at any position on the page.Continue Reading

Create a Flipcard using CSS3

Card Flip Tutorial - Featured Image - Red

With the introduction of CSS3, one little thing that you could do very well with just a few lines of code was animations. As you might have observed, there are various animations on new websites that have been created with the latest technologies of HTML5 and CSS3. Most of these animations are used to bring real life simulations.

Today, we will display how a flipcard can be made using the flipping feature of CSS3. It will have 2 sides – one with a logo or an image and another side having the company details. By default, it will show the image or logo, whereas on mouse hover, it will flip to the other side with the details. The two sides of our simple example will look like the following.Continue Reading

Creating a Stitched Ribbon Banner with CSS3

Stitched Ribbon with CSS3 - No Images

In this tutorial we will learn how to create a Stitched Ribbon banner using CSS3 techniques.  We will achieve the banner effect without using any images.  Before CSS3 the only way to create a banner effect was to use images.

This is what we will be creating

Stitched Ribbon with CSS3 - No Images

Continue Reading

Create Social Buttons using CSS3 and Icon set

Social websites such as Facebook, Twitter, Google+ and others play an important role in marketing and publicity. Providing a social widget simplifies the task for the users visiting the page to share, like or rate your content, therefore helping in publicizing the same.

You have the option of using either standard social widgets or create your own social buttons using social icons on your website. However, icons are preferable as they can be customized to fit, unlike social widgets which have a standard look and dimensions, which makes them look common. We will make a simple set buttons (which can definitely be improved upon) which look like the following.Continue Reading

Create BreadCrumb Navigation with CSS3

CSS3-BreadCrumbs Final

In this post we will create a simple breadcrumb navigation using CSS3.  Earlier creation a breadcrumb navigation required the use of images but with advances in CSS it is now possible to achieve the same effect without using any images at all.

Here is what we will be creating in this tutorial.

CSS3-BreadCrumbs Final

Continue Reading

Easy image hover effects using CSS3

It is said that a picture is worth a thousand words. An image conveys a lot more than words but an interactive image with some extra glitter will make the user experience amazing. Earlier, images were displayed without much modification or if anything was done, it was done using JavaScript. JavaScript helped provide basic effects but never gave rise to creative ideas as it was difficult to implement. But, with the advent of CSS3, designers could deliver better experience with little effort as the implementation became easier.

In this post, we are going to enhance the viewing of an image by providing information and links on hovering mouse pointer above it in a beautiful way. Checkout the demo here.Continue Reading