Image Zoom Magnifying Glass Effect with CSS3 and jQuery

Ever wanted to add a magnifying glass effect to your product images for an awesome zoom-in and a great user experience ? You’ll be surprised to know that using CSS3 and jQuery, it’s really easy to integrate this effect to your website or webapp.

Continue reading “Image Zoom Magnifying Glass Effect with CSS3 and jQuery”

The New and Final CSS3 Linear and Radial Gradients Syntax

The specs have always been in a state of flux. But it seems to be decided on the CSS3 linear and radial gradients syntax finally (hopefully). Let’s just discuss the changes and how you’ll need to modify your current/old code accordingly.

Continue reading “The New and Final CSS3 Linear and Radial Gradients Syntax”

HTML5 Canvas Drawing Lines with Smooth Edges

In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues.

Continue reading “HTML5 Canvas Drawing Lines with Smooth Edges”

Creating a Paint Application with HTML5 Canvas

Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API. Although the app will be small, there’s going to be quite a bit of information for intake. So I’ll break the entire process into different tutorials (posts).
Continue reading “Creating a Paint Application with HTML5 Canvas”

The Real Beauty of CSS3 Box Shadows

You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show you.
Continue reading “The Real Beauty of CSS3 Box Shadows”

Discussing Server-side and Other Essential Components for Your Playground

The aim of this entire series was to teach you how easy it is to create a playground like CSSDeck, in reality. We covered everything from building the environment to making it secured. Then we integrated an amazing piece of code editor and finally discussed how to build a nice, performant and secured gallery to show the “real” interactive but scaled down previews of your creations. Although, you might need some extra bells and whistles.

Continue reading “Discussing Server-side and Other Essential Components for Your Playground”

Cancel CSS3 and JS Animations to Prevent High Memory and CPU Consumption

So you got your creations gallery up on your site and shared the link on some social networks like twitter and facebook. Your loyal fans clicked your link and ended up crashing their browser. OMG! What happened ? Did you have any experiment with lots of amazing CSS3 and JS animations ? Most probably, that’s what happened then. Your experiments were awesome enough to eat up all the RAM and CPU and what not of your fan’s computer and crash it eventually.
Continue reading “Cancel CSS3 and JS Animations to Prevent High Memory and CPU Consumption”