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

CSS Vendor Prefixes or CSS3 browser prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn't been finalized. The CSS browser prefixes are: Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS: -webkit- Opera: -o- Safari: -webkit- In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3…
Continue Reading »
CSS - Cascading Style Sheets

2013 in review

  The stats helper monkeys prepared a 2013 annual report for this blog.     Here’s an excerpt:   The concert hall at the Sydney Opera House holds 2,700 people. This blog was viewed about 16,000 times in 2013. If it were a concert at Sydney Opera House, it would take about 6 sold-out performances for that many people to see it. In 2013, there were 15 new posts, growing the total archive of this blog to 59 posts. The busiest day of the year was December 2nd with 959 views. The most popular post that day was CSS Techniques - Absolute Horizontal And Vertical…
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 »
CSS - Cascading Style Sheets

CSS Techniques – Absolute Horizontal And Vertical Centering In CSS

We've all seen margin: 0 auto; for horizontal centering, but margin: auto;has refused to work for vertical centering… until now!  But actually (spoiler alert!). I'm not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article. There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method. I had finally searched some useful techniques in a single place…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Inheritance Tips and Tricks – inherit, initial & unset

It’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of… property: inherit; The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser default, #myparent{ margin: 10px; border: 1px solid #000; } /* use the same border as the parent */ #myparent p{ border: inherit; } In practice, it’s rarely necessary to use inherit. Many of…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Modal Window Popups – sliding forms with fancybox effect

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. HTML First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups.…
Continue Reading »
CSS - Cascading Style Sheets

Creating a Puzzle game using jQuery

Today we are making a simple puzzle game called "Doraemon Puzzle". The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid's favorite cartoon "Doraemon" for square-sliding game.  I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line…
Continue Reading »
CSS - Cascading Style Sheets

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: CSS scale and CSS3 rotation. Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css. Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. The HTML <div id="colorWheel"> <span class="color01"></span> <span class="color02"></span> <span…
Continue Reading »