CSS - Cascading Style Sheets

Javascript or jQuery Fullscreen browser window – Html5 technology

The new html5 technology – fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it. Starting the full-screen mode Due to the fact that this mode is supported by different browsers differently, we have to foresee…
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 »
CSS - Cascading Style Sheets

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

"How to change multiple background-image of body with effects?" - I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else. Here's a quick example of multiple images fading one after the other. The HTML Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade…
Continue Reading »
CSS - Cascading Style Sheets

Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

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"…
Continue Reading »
CSS - Cascading Style Sheets

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

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…
Continue Reading »
CSS - Cascading Style Sheets

Responsive CSS design – Web Design Tips

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…
Continue Reading »
CSS - Cascading Style Sheets

Pure CSS3 Animated Polaroid Gallery

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated  Polaroid pictures gallery with some of these cool features.  This is something I wished to do for a while and I finally made it. The HTML The HTML structure hasn't changed at all, simple and minimal. Here’s an excerpt: <div class="photo-album"> <h2>Dhiraj, Geetu & Atharv…
Continue Reading »
CSS - Cascading Style Sheets

Cool inset Text Effect with CSS3 Text-Shadow

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…
Continue Reading »