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…
CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year
On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too . Introduction Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the…
Snow-Fall Effect with JavaScript – Creating Merry Christmas Greetings
On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :). Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use for creating these snow. Features and Principle Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are: No need to add…
Simple and Easy Tooltip Using jQuery & CSS3
I love jQuery and the way it makes web-designer's/developer's life easier. Although it took all a while to accept it. I still prefer to write my own stuff, I can't deny its advantages. Today I will show you a "Tool-Tip" examples of using the same very, very simple script. Features and Principle Note: Tooltip Plugin is Less than 1Kb in size. What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with…
CSS3 Buttons with Cool Effects – Pure CSS
Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you'll see what I've been working on lately. I wrote before about CSS3 buttons, so you may want to check also these articles: CSS3 Transitions Effects on Background Gradients Create Icons in CSS Without Image Hover and Click Trigger For CIRCULAR Elements With jQuery CSS3 patterned buttons features Easy-to-use. Contain the transitions on gradients hack. As you may have expected, no images used here. Instead, an base64 string is used to…
Cool Typography Effects With CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilities. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. We'll be using in order to style single letters of the words we'll be having in our big headlines. THE HTML The structure will simply be an h2 element with…
Hover and Click Trigger For CIRCULAR Elements With jQuery
Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' events to be triggered only on the circular shape of the element and not its bounding box. Applying a :hover pseudo-class to an element is widely known as the classic "hovering" over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This…
Rotating Words With CSS Animations – CSS3 Keyframes Animation Example
In today's tutorial we'll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We'll be "exchanging" certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let's start! In the following, we'll be going through demo. THE HTML We'll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: <section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Real poetry is like</span> <br /> <span>creating beautiful butterflies</span> <br…
Top 10 Reasons to Start Using HTML5 Right Now…
So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you…
Animated 3D Bouncing Ball with CSS3, Html5
Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a "bouncing" effect. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation). THE HTML Let's start with some very basic HTML: <div id="ballWrapper"> <div id="ball"></div> <div id="ballShadow"></div> </div> What we have here are 3 simple DIV elements. "#ballWrapper"…