Blurred text effect using CSS

The following quick-tip shows how to obtain a blurred-text effect using purely CSS. The trick is to set the color property to transparent and set an appropriate text-shadow


p.blur {
text-shadow:0px 0px 4px #333333;


Live Example


How to take full-page screenshots with Firefox’s developer toolbar

Taking screenshots of webpages is a handy and quick way of saving interesting stuff for later reference or for documentation purposes if you are a developer. While the quickest and easiest way is to just hit the Print Screen key on your keyboard and save the screenshot in an image editor, sometimes you may require to capture more than what is visible of the webpage in the current window.
With Firefox’s developer toolbar it is quite easy and straightforward to save screenshot of the complete webpage rather than just the current view-port. Here is how you can save a full-page screenshot of any website using Firefox without using any add-ons:

  • Open Developer Toolbar by going to Tools->Web Developer->Developer Toolbar or use the shortcut Shift+F2
  • A command-line will open at the bottom of the page, here type the command: screenshot filename.png --fullpage
    You can enter any name of your preference in place of the ‘filename.png’ parameter. The screenshot will be saved to your Downloads folder. You can even skip the filename parameter and Firefox will assign a name for the file containing current timestamp.

C++ tip: Check if input is of valid data type using

When accepting user inputs in C++ console applications using cin object, it is always a good idea to check the input stream for possible errors.

If you intend to read a numeric value using cin and the user inputs a character or string instead then it can lead to unexpected results and run-time errors later in program.

For example if you are using a do…while loop to implement a menu driven program, and instead of a numeric choice the user accidentally (or maliciously?) enters a character, your program can run into an infinite loop. returns true if the input stream encounters errors, most commonly which happens due to reading incorrect data type.

Here is how you can prevent it:

 int i;
if( {
  // do error handling here

You can also check for using the shortcut method :

if(!cin) {
  // this is same as

When cin fails, it is also very important to clear the input stream of any garbage value and reset the internal error flags. It can be done using the cin.clear() and cin.ignore() methods as follows :

if(!cin) {
 cin.clear(); // clears error flags
 cin.ignore(999,'\n'); // the first parameter is just some arbitrarily large value, the second param being the character to ignore till 

Putting it all together

Here is a more robust way to read any input from user which uses the functions cin.ignore() and cin.clear() :

 int i;
 while(!(cin>>i)) {
 	cout<<"Invalid data type! Please enter 'i' again";

Top Mistakes to Avoid while Designing A Website

While using the Internet, sometimes you don’t find some sites as attractive as others are. While web designing is not a difficult task, still few people fail to accomplish his job. It is very important for a website to be user friendly and interactive. It helps in directing visitors towards your site. An ill designed website will drive your visitors away from your site.
Read more…

Essentials of mobile web designing

Essentials of Mobile Website Designing

It is very essential for the mobile website designers to put an extra effort on the aspects of the website design. As the designed website should not only be user friendly but also complement your site. A few considerations while designing mobile website are as follows:
Read more…


Decrease Page Load Time by Suturing CSS and JavaScript files

While designing a medium-large site, one may require linking to multiple stylesheets and JavaScript files in the head section of HTML document.
Here is a sample HTML document that similarly includes many CSS and JavaScript files

< !DOCTYPE html>
            <title>My Site</title>
            <link rel="stylesheet" type="text/css" href="path/to/cssReset.css"/>
            <link rel="stylesheet" type="text/css" href="path/to/960framework.css"/>
            <link rel="stylesheet" type="text/css" href="path/to/base.css"/>
            <link rel="stylesheet" type="text/css" href="path/to/navigations.css"/>
            <script type="text/javascript" src="path/to/jQuery.js"></script>
            <script type="text/javascript" src="path/to/functions.js"></script>
            <script type="text/javascript" src="path/to/handlers.js"></script>
            <script type="text/javascript" src="path/to/ajax.js"></script>
            <script type="text/javascript" src="path/to/audio.js"></script>
            <script type="text/javascript" src="path/to/script.js"></script>
            <!-- body content -->

Read How to Decrease Page Load Time

Change Text Selection Background Color using CSS

Change Text Selection Background Color with CSS

Almost all web browsers by default highlight the selected text on a webpage with a light blue background. But did you know that using CSS, you can change the color, background-color or any other CSS property of a selected chunk of text?

You may have seen such effect on several beautifully designed websites and may have wondered how is it achieved.

Read more…

2018 All rights reserved | Powered by WordPress
Back to top
Theme by