Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and Each pulsing is in same duration/period of time. This can be easily done with CSS3 animation. No flash or images are required. A heart does not double in size when it beats. 10% change in size looks better to me. I like it getting both larger and smaller When it stops moving altogether it looks dead to me. Even when it isn't beating. So, it needs to expand or contract a little to look alive :). I explicitly have the heart start…

The stats helper monkeys prepared a 2015 annual report for this website (). Here’s an excerpt: The Louvre Museum has million visitors per year. This blog was viewed about 120,000times in 2015. If it were an exhibit at the Louvre Museum, it would take about 5 days for that many people to see it. The busiest day of the year was January 29th with 796 views. The most popular post that day was CSS Custom Cursors. Click here to see the complete report. We respect your privacy. Your information will not be shared with any third party and…

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…

The stats helper monkeys prepared a 2014 annual report for this website (). Here’s an excerpt: The Louvre Museum has million visitors per year. This blog was viewed about 150,000 times in 2014. If it were an exhibit at the Louvre Museum, it would take about 6 days for that many people to see it. The busiest day of the year was July 22nd with 1,539 views. The most popular post that day was Animated bubbles upwards continuously with pure CSS. Click here to see the complete report.

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…

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…

After working on Responsive_DG_Slider, which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement. Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery. Configuring Your Slider As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination. The HTML <div class="fluid_container"> <div class="fluid_dg_wrap fluid_dg_charcoal_skin"…

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider Responsive_DG_Slider. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it's features and API later. Here I am showing It's full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of…

For designers, the most difficult and interesting aspect of responsive web design has been the flexible nature of it. We've constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design, or as I like to call it, 'Getting’ Flexy'. Responsive CSS for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop the number of people who are using the tablets…

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow. Introduction I played around with trying to hack box-shadow into background-image in the same way that you can add linear gradients to text, but to no avail. Well, in any case, I finally was able to get something to work, and yes, it is pretty killer. That’s it right there. But, let’s take a look at how and why this works. First let’s…