How to create equal height columns?

Equal height columns have been required for all projects and will be needed forever. To make any row visually perfect with different amount of content you have to make equal height for all the columns. You can set fix height to make them equal, but this is not the right solution for responsive and dynamic websites.

I will recommend to use jQuery, it support all the browsers. You can also use CSS properties but it has compatibility issue in older browsers version.

Let’s start with jQuery equal height first then we will explain about the CSS properties for equal height.

How to create interactive website background using particles.js?

A simple way to create interactive background

Particles.js is a lightweight JavaScript library which can help you to create lots of moving tiny particles to make your website background interactive. It’s super easy to use and you need only following things:

• particles.js library
• A div using an ID
• Few line of JS and CSS code

The easiest way of image preloading

Image preloading is the most important way to make faster website. We looks for the better way but unable to decide which will be best and easy to implement. Images always play important role for good website and people prefer to get an overview about the topic from the used images and for that we have to use informative and good quality images which may make our site slower. So what do you think? will we skip using images? No, there are extremely easiest and useful way which will help to make your site smooth and faster.

Lets implement the image preloader using following javaScript lines in your master page, it will not take more than 5 minutes.

Future of one page website with FREE example

One page website aim to provide important information about the business/profile using minimum content, as people’s wants to know everything reading minimum content. Generally users make their decision within few seconds that they will stay in the same site or leave it. So one page website is one of the best option for small business. Hope you can also understand that good design also an important part of your website to force visitors to stay in the website.

When you are going to create one page website then you have the area to play on design but in multi pages website its little difficult to work in similar way for every pages. You can also make story line with proper plan in a single page flow that how your website will behave when users will access it in desktop or mobiles.

A bunch of readymade social media icons

We all know about the importance of social media and these days, we are almost every day sharing photographs, articles or any interesting things through social media. If you check ten reputed or good websites then you can see all of them using social media icons and if you are a developer or designer then you must know that you have to implement social media icons in every project.

Today I will share you a bunch of ready made social media icons which you can directly copy and paste in your next project without using development time and hopefully you will love them from every angle – design wise, special animated effects or color combination wise.

How to create Pie Chart within few minutes?

If you regularly follow our post from the beginning or if you have knowledge on CSS then this article will be very interesting for you. We saw pie chart in several web sites and applications which generally show site or business health, and most of the time we use third party or complicated paid version pie chart. But today we will learn that how you can easily create pie chart within few minutes.

We can create different type of pie chart but today we will discuss on only one pie chart which help you to create any kind of pie chart using the same concept.

How to create mobile friendly responsive menu?

We have posted several topics on responsive and you know how it’s important for any web sites. If you are going to make responsive website for all devices then you must have to make responsive menu also, so that users can access all pages.

But as you know that mobiles devices has small space to display menu items with the content, so we have to think that how we can show it in small area and user also can easily find it.

If you spent few hours on internet then maybe you can find several resources on responsive menu, but most of them doesn’t support all devices and leading browsers or can faced problem during implementation in small screen. That’s why I am going to share you a simple and useful mobile friendly responsive menu with source files.

How to use computers or devices icons in your web application?

A small icon says enough about the content which makes reading additional text unnecessary.

Websites or Mobile Applications can be quite boring without using icons and we can see most of the websites using them today to get better understanding about content or navigation.

When you use icons for your applications, keep the proximity principle in mind and group them with content they related to and of course about the icon sizes.

Previously, we directly used images for icons and later started to use sprite images through CSS and these days most of the site used icon fonts where have to used Vector Graphics images and need help from other sites, but do you know you can use icons from the used computers/ devices by using a small CSS and its really very light weighted.

Create Beautiful Quotation Mark without using any images

A blockquote can use anytime when you are using a comment from any other source, speaker or website. But if you check, most of them using images to make it noticeable, where it can be possible to make noticeable with most popular techniques to put large quotation mark at the upper left and lower right of the blockquote area through few lines of CSS code.

How to create an Image Gallery with CSS3, without using any JavaScript or jQuery?

Image gallery is really necessary to create your interactive portfolio website or product base website and if you create it something different from other websites then visitor will spend more time on your website. If you search for a image gallery then you will find out 100 gallery samples on Google, but can you imagine that 99 gallery will be developed with JavaScript or jQuery.

Today you will learn how to create an interactive image gallery with CSS3, without using any JavaScript or jQuery.

CSS3 Animation

Many web developers and designers are attracted with the power of CSS3, as we have discussed in my previous post. Today I will discuss about the power of CSS3 on animation.

If you have a basic knowledge on CSS and HTML then it’s really very easy to do a small animation.

We will create a small animation with HTML5 and CSS3 that will help you to create new animation on different story or theme and hope you will enjoy it.

How CSS3 offers a new ways to apply advance style and design on Webpage?

The CSS3 is the latest standard for Cascading Style Sheet. CSS3 offers a new ways to apply advanced style and design on webpage using style sheet. The CSS3 adds several new features, where designers/ Developers can create rounded border, Box Shadow, Stretchable background, Text Effects, Transition, Multiple columns and even Animation by simply specifying the CSS3 properties.

1. CSS3 Rounded Border
2. CSS3 Box Shadow
3. Stretchable Background
4. Text Effects
5. Transition
6. Multiple Columns
7. Animation

How to place a box in the middle of the browser window?

Sometime developers are really afraid to do a silly thing, like how to center a div or how to middle align a custom pop-up or how to middle align an image. Even they looking for HTML expert help or spent lots of time on browsing to find out the solution. But can you imagine that a single class can do all the above things.

Suppose you want to use a message box in the middle of the browser window. Then see how you will do it with a single class for all monitor resolution.

CSS Fixed/ Footer

We all developers/designers are tried to use fixed footer for our website/application and most of them got content overlapping problem. But today I will give you some tips, where you can simply use fixed footer with a few lines of CSS and surly it will work on all leading browsers.

How it will work on browsers:
The footer always will be visible at the end of the browser even you use a single line of content or view it on any resolution. You never face content overlapping issue on maximum page content.

How to use awesome fonts from Google Web Fonts API?

Everyone has a hidden creativity and few are express their creativity through pen or pencil and few are with their visibility and preferences. So let's a customer don't want the system fonts (Arial, Verdana, Times New Roman, Georgia etc) and asking for little different font to make his/her website little different by typography.

Don't worry about the requirement and even don't need to convince them to use images or any other options other than Google Web Fonts API. The Google Web Fonts is really beautiful, readable, accessible and open source. Just choose the suitable one and apply on the website, hope your customer will be happy.

Create Ribbon Design Element without using any images

If you want focus on a particular/ important message on your webpage then you have to do something different so the area will be easily visible for the site visitor. The ribbon design element implementation is one of the good ideas, which can be fit for any website design. Just you need to change the color code to match with the website color theme.

Create Interactive World Map through CSS and HTML

Whenever you will try to develop some interactive features on the website then always flash software will come in your mind. But Mobile devices users, such as iPhone users will be noticed that the Flash websites can not be navigate on iPhone and even the search engine does not support properly. That's why the most business oriented website owner avoid flash base webistes and their features.

See Interactive Map in CSS and HTML.

North America Europe Africa Asia Latin America Oceania

How to create Multi Labels Vertical Menu, Horizontal Menu, Tabbed Panel, Accordion, Collapsible Panel and Tool Tips within a minute?

If you start to develop any website then the above things will be most useful to make your website more user-friendly and interactive. But most of the developers spend lots of time to create those things where they can create within a minute.

Let’s see how you can create it within a minute.

These days Adobe Dreamweaver is most useful software in the Web Development. So I assumed that you know about the Adobe Dreamweaver and have installed Dreamweaver software.

Responsive Web Design

These days’ mobile devices are really very essential to promote business. Almost every client wants a mobile version website to promote their business. But it’s really expensive to create separate website for each mobile device and even it will be painful to maintain multiple website for a single business.

Responsive web design is the solution of the above issue and it can work on screen size, platform and orientation. If you follow the responsive web design process then the developed website should automatically switch to a compatible resolution, images size and even the design format.

Perfect CSS Tab with Sub Menu

Use perfect CSS Tab with sub menu. Hope you will love it.

• 2012
  • Pages
  • Archives
  • New Posts
  • Recent Comments
• 2011
  • Get to know us
  • Find out what we do
• 2010
  • E-mail Us
  • Use Our Contact Form