Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.
Simply check out the demo to see what we're going to create. Download the source code to learn how it works, or read the tutorial for more explanation.
Sadly, fonts will render different in several browsers. I've tested this script (and made it working for) on Firefox, Chrome and Safari (even the iPhone displays it correct). Other browsers aren't tested, but the video below also shows how the animation should look like.
Ready to take a look at how this example works? Let's dive under the hood!
Tags: quote display smooth jquery quickie
Not only Internet Explorer has it flaws when it comes to parsing/using the CSS file. Even though the Webkit engine is the best CSS engine out there (at the moment), I was still able to find a little bug while searching for a solution to a problem last week.
Although the bug is really small and you'll probably never need to use it in real life, I did want to give it a little attention (just in case you do want to solve this problem). I found this one since I wanted to create another Proof of Concept for an article here. Of course, I hope this problem could be solved in the next release of the engine.
In simple words, this bug occurs when combining the generic sibling selector (in CSS:
~) in combination with the hover event (in CSS:
:hover). Dive into the example/source code to see how it looks like, and think about the effect you think it would produce.
Take note this is a
webkit bug only: The example works just fine in Firefox, Opera (and yes - even in Internet Explorer!). It doesn't work in those browsers using
webkit: Safari and Chrome. Now let's dive into the problem, and look at possible solutions for this bug.
Tags: webkit bug hover sibling selector css
It's pretty amazing at how fast people can learn certain technologies. A couple of months ago, I learned my friend and ex-classmate Sidney te Grotenhuis some (basic) jQuery. Last week, he contacted me to show off his latest creation: jPong. I was blown away.
By combining jQuery with a collision detection plugin, a line drawing plugin and some own scripting, he was able to create this game. Feel free to dig in the source code (comments were added) to see how it works. But for now, simply start the game and play.
As you might already see, this game is based on the popular Flash version called Curveball.
I want to thank Sidney a lot for sharing this great example with us. Take note this is just a simple proof of concept and not fully tested in any way. Now let's see if you can beat your browser at this neat little jQuery game! What highscore can you get?
Although I didn't like CSS animations at first, the more I work with it, the more I do like the way it's implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons have a low opacity.
I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.
The example works with all
-webkit based browsers (Safari and Chrome), but also in Firefox 4. I've included a jQuery version as well, to be used as a form of "backward compatibility". You can also see how the same effect can be achieved using CSS and jQuery.
Although the code and effect is very minimal, it'll give your website a very professional look. Let's dive into the code to see how you can implement something like this on your own website. Take not this effect can be applied to more buttons as well, not only social media icons.
Tags: css3 animation jquery social icons tutorial
Like I said in my previous article, all information about HTML5 is way too big to put into one blog article. We first looked at what HTML5 microdata can do for us, and today we'll dive into another feature W3C added to their HTML specification. It's called custom data attributes (by developers mostly referenced as
data-* attributes), and I'll explain what it is and what problems it fixes for us.
Tags: html5 data custom attribute tutorial
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 31 - 45 of 363|