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

Using Highcharts to make charts

High Charts-js

Charts are used to represent mass data with the help of visual aids. Initially, they were created manually, using calculators to do the math. Then came softwares like MS Excel and charts became an inseparable part of Powerpoint presentations during 1990s.

In this decade, with the internet boom, browsers have taken over everything. The strengthening CSS3 boosted the math-loving-techies to develop libraries for charts so that one need not switch to heavy software by automating the system of creation of charts using dynamic data from database and visualize it on the browser. The biggest advantage of this was to bring down the requirements to a bare minimum- one just needed a computer connected to the internet and a web browser to view your creations.

Long story short, we have tons of libraries now. Some very advanced libraries like D3.js and some very simple libraries like Chart.js. However, Highcharts is a combination of both. It is extremely easy to use, thanks to the documentation and fulfills modern requirements.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

Top Online Markdown Editors

Back in the 90s, people used Microsoft Word for writing. It provided a rich text interface with a wide variety of features. As the internet boomed and connectivity speeds soared, online versions took over, which were usually a part of office suites, although a large chunk of people still used offline software. Recently, however, the tides are changing a new format has developed.

Markdown is a plain text formatting syntax, developed almost a decade ago by John Gruber, and activist Aaron Swartz. It was designed to be converted quickly to rich text, or HTML. This essentially meant that markdown could be used as a bridge between traditional rich text and the modern HTML supported by the internet. Today, the markdown format is usually used to create “Readme” files, but is supported by a range of services, including WordPress. In this post, we take a look at a number of online markdown editors.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