CSS - Cascading Style Sheets

Request Desktop view and disabled zoom viewport meta tag for all mobile browsers

Today, I am going to brief about the working of - "Request a Desktop Site" & "Switch from a Mobile Site" or, Choose “Request Desktop Site” link and let the current webpage reload to the full desktop version of that site. I mean to say that, i am sharing a trick about disabling the responsiveness of webpage in mobile browser. As we know, there are several mobile Operating Systems and that's why each browser has it's own implementation of the viewport meta tag according to respected OS. Different combinations will work on different browsers & OS. Android OS: Android : viewport…
Continue Reading »
JAVASCRIPT

10 Useful Beginners JavaScript / jQuery tips and tricks

I consider myself as a advanced when it comes to coding in JavaScript or jQuery however recently I played a bit more with this language and stumbled upon a number of random things i assumed were worth sharing. As you know, JavaScript is the best programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has several other implementations. So, if you are new to JavaScript or simply don’t understand it as well as you'd like, I hope you find this article helpful. 1. 0 ==…
Continue Reading »
CSS - Cascading Style Sheets

Add style to console log statements

Searching for errors in programming code is called code debugging. Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing. Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your browser with the F12 key, and select "Console" in the debugger menu. Have you recently checked out Google Plus because they implement some awesome effects?  I…
Continue Reading »
JAVASCRIPT

JQuery or JavaScript tricks for mobile devices like – Android, Windows, BlackBerry, Apple, iphone, ipad

JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features. Most mobile phones are running some version of WebKit (what Chrome runs on), so you're pretty much guaranteed better support than IE8 provides if you're developing for mobile. Detecting Mobile Devices Instead of using jQuery you can use simple JavaScript to detect it: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera () ) { // some code for mobile } or you can combine them both to make it more accessible through jQuery. $. =…
Continue Reading »
CSS - Cascading Style Sheets

CSS Custom Cursors

The cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Now, when you'd like to customize a cursor, and CSS lets you do it quite easily! Click here for a list of the cursor styles supported by the CSS W3C recommendations. Rollover on the above image and see the CSS custom Cursor   The CSS The cursor CSS property accepts a series of cursors, and using…
Continue Reading »
CSS - Cascading Style Sheets

Animated aquarium with pure CSS

Here is a pure CSS experimental work to create a aquarium. Image / javascript hasn't been used for aquarium or it's animation. I have used jQuery only for random air-bubbles. All these animation is created by Pure CSS. Some times ago, I had written a article about "Animated bubbles upwards continuously with pure CSS". You can also use this trick for air-bubbles. For Creating Aquarium's water, sand, rocks and plants few lines of HTML required. The HTML <div class="bubbles"></div> <div class="ground"></div> <div class="rock_1"></div> <div class="rock_2"></div> <div class="rock_3"></div> <div class="rock_4"></div> <div class="rock_5"></div> <div class="rock_6"></div> <div class="rock_7"></div> <div class="plant_1_wrap"> <div class="plant_1"></div> <div…
Continue Reading »
CSS - Cascading Style Sheets

Creating a CSS Game – Tic-Tac-Toe

One year ago, I had posted a puzzle game called “Doraemon Puzzle”. It was developed with the help of most powerful JavaScript library jQuery. Now, I have developed a game using CSS only. Have you remembered a favorite game which we always played in school/collage days? Yes this is "Tic-Tac-Toe". My version works as any normal Tic-tac-toe game would: 2 players can play against each other, it can result in either a win or a tie. Players can also restart the game. HTML <div class="tic-tac-toe"> <input id="block1-1-1" type="radio" class="player-1 left first-column top first-row first-diagonal turn-1"/> <label for="block1-1-1" class="turn-1"></label> <input id="block1-1-2" type="radio"…
Continue Reading »
CSS - Cascading Style Sheets

Animated 3D Background Pattern using HTML5 < canvas >

Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. What is canvas element in HTML? Canvas was initially introduced…
Continue Reading »
CSS - Cascading Style Sheets

Analog clock using css3 and jquery

Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands a rotating effect. The HTML Html part is very simple. <div id="clock"> <div id="hour" style="transform: rotate();"><img src=""></div> <div id="minute" style="transform: rotate(54deg);"><img src=""></div> <div id="second" style="transform: rotate(108deg);"><img src=""></div> </div> The CSS Now, It's time to play with some cool css3 properties like transition, transform and css easing. #clock { background-image: url(""); height: 200px;…
Continue Reading »
CSS - Cascading Style Sheets

Merry Christmas Greetings – JavaScript and CSS Parallax effect

I hope you have enjoyed my previous article about 3D Parallax effected webpage. Now, like previous year, on occasion of Christmas and winter Holidays, I thought to wish this festival by create a wonderful webpage greetings too. So, today I had created this Christmas greeting card using 3D Parallax effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :) . Introduction - What is Parallax? Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two…
Continue Reading »