December 22, 2014

How to add grayscale to an image using css?

Add grayscale to an image using css

CSS Filters are a powerful tool that you can use to achieve varying visual effects (sort of Photoshop filters). Filters are commonly used to adjust the rendering of an image, a background, or a border.

September 30, 2014

How to place text or icons inside fontawesome icon?

How to place text or icons inside fontawesome icon

Want to stack regular text on top of Font Awesome icons? It turns out that Font Awesome stacked icons are already pretty much what we need.

September 27, 2014

How to create a gradient animation using CSS3?

How to create a gradient animation using css

Earlier people used GIF to bring the gradient animation effect. Now it became much easier with CSS3 animation. Where the linear gradient is applied to the text and CSS3 animation is used. It is so colourful according to the colours you use. This effect has been much simpler and controlled fully by CSS.

September 26, 2014

How to add opacity to div without applying to the contents in it?

How to add opacity to div without applying to the contents in it

Whenever i tried to add opacity to a div container, the opacity is also added to the contents in it. Where the visibility of the content also reduces.

If you need to add opacity to the div container alone i have a solution which will help you out.

September 14, 2014

How to crop an image to fit inside a container using css?

How to crop an image to fit inside a container using css

I thought this idea when i where creating a thumbnail gallery.

An old method to do this is by editing the thumbnail to the required size using any photo editor. Here there will be two images used. One a thumbnail of a required size, where you have to make all thumbnail sizes look alike. Second a larger image. When the thumbnail image is clicked the larger image is viewed. So, here two images of different sizes are required.

September 2, 2014

How to create a horizontal line with words in the middle using css?

How to create a horizontal line with words in the middle using css

This is really useful. Some try to put --------- or ---------. This can be done with a css very easily.

How to create a sitemap for a particular label?

Create a sitemap for a particular label

This is very simple to do and this will get your blog posts a higher ranking in search results.

September 1, 2014

How to create a blogger template from the scratch?

Create a blogger template from the scratch

Many of them asked how to create a blogger template from the scratch. A person must have a knowledge of Web Design and Development in order to create blogger template otherwise reading and understanding this long article will be wasted. Lets start discussing about the main topic now.

August 19, 2014

How to make smooth scroll to top and visible on scroll?

Smooth scroll to top

Scroll down to make the scroll to top button appear. On click of it the page scrolls smoothly to the top of the page. The scroll will be visible only after a page scroll.

How to hide/fade div on scroll down?

How to hide/fade div on scroll down

This is really an interesting one. When the you scroll down you can hide an element (div/image/etc.) This is used when you need to hide the scroll down button when you scroll down the page and make the scroll to top button appear.

August 15, 2014

How to make the menu collapse when it is clicked in mobile view in Bootstrap 3?

How to make the menu collapse when it is clicked in mobile view in Bootstrap 3?

By default menu doesn't close when you select from a menu in a mobile view. It still stays when the menu is clicked and the page loads. I was trying my blog in my mobile. Then i found the solution for it. We can either use jQuery or directly use html codes. I will teach you both the ways.

Simple CSS spinners - pure CSS and HTML

Simple CSS spinners

I say CSS Spinners should be light weight and beautiful if you use the spinner for loading the page at the start. Because it is the starting thing your viewer friends might look at and the page loading should be faster too. So lets learn how to do this purely with CSS and HTML (no JavaScript).

August 4, 2014

Call Javascript function on pressing ‘Enter’ key

In most of the pages you might have noticed how you can type your queries into the search box and search by pressing the enter key instead of having to click the ‘Search’ button present in the page.

Coding

<input type="text" onKeydown="Javascript: if (event.keyCode==13) Search();">

<input type="button" value="Search" onClick="Search();">

The onClick event of the Search button calls a javascript function named Search(). To have the same function called on pressing the enter key when the cursor is in the text box, we check if the keycode is 13 and subsequently call the Search() function.

July 29, 2014

How to change background color using Javascript?

How to change background color using Javascript

You can allow your website viewers to choose the theme of your website they like. This is done by changing the background color or background image or text color easily using JavaScript by clicking on a button.

June 14, 2014

How to make button disappear onclick and show another button on hide of the active button?

How to make button disappear onclick and show another button on hide of the active button

When we click on a button the text changes. This i used in a web design to show the phone number of the person onclick.

Popular Posts

Views