A little bit of sad news; This will be the last post on Marcofolio on 2009. I'm going to Austria for two weeks and enjoy a winter sport vacation. But don't worry, I'm planning on finishing this year with another great article.
Just like last year, I contacted several (web)design bloggers and asked them the following question: Could you provide me with the URL of what you think is the best article that you wrote in the past year (2009)? If you do, please add a short description why you found that article the best one. As you can imagine, this post is a round up with the actual best posts from the past year from several great blogs.
I have nothing left to say except to wish you a safe and joyful new year's eve and I hope to see you back (with all your fingers) in 2010! Check out this Christmas card from me and my girlfriend, wishing this to everybody in the world.
Now let's see what the people behind the blogs consider to be their best article from the past year. Smashing Magazine has two entries, but I allowed them since they're from different authors.
Tags: roundup inspiration weblog 2009 best of webdesign
As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.
At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the
-webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.
With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.
Tags: CSS3 animations jquery webdevelopment CSS
Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
This tutorial takes on the following CSS(3) properties:
As you could expect, this demo only works in browsers that support the new CSS3 features. This code fully works in Safari / Firefox 3.6, but hasn't been tested in other browsers. Now let's see how you can create this kind of sweet menu yourself!
Tags: tabs navigation css3 webdesign css
Normally, I would ask questions/opinions from people through Twitter. But sometimes, you really need more space for the question/opinion than 140 characters. That's why I wanted to try a new concept on Marcofolio, called Your two cents. I'll lay down two statements (one cent each), and you're free to share your opinion with the world. Of course, I'll share my opinion too.
Keep in mind these are just opinions from me (and hopefully others in the comments) and not facts. If this concept gets loads of response, I'll continue thinking about other statements.
Here are the two statements on which I'm very curious about what you think about them:
“Animation properties, as added in CSS3, don't belong there.”
Webkit based browsers (Safari and Chrome) support CSS animation (
animation). It allows the designer to animate an element across a given timespan.
“Lazyloading images should be implemented on every website.”
Lazy loading delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
So, what do you think about these two statements? Join the discussion!
Tags: two cents opinion comments css3 transition lazyloading
Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. Lately, I came across some news about a new "Hero" game: DJ Hero. Since I really love Proof of Concepts/experimenting, I wanted to bring the vinyl to the browser. That's why I present to you: jQuery DJ Hero.
By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).
To achieve the desired effect, I made use of jQuery, Animate CSS Rotation and Scale jQuery Patch and the jQuery Easing library. The picture of the vinyl has been taken from stock.xchng.
Since we're using CSS3's
transform property (to
rotate the vinyls), this example only works in browsers that support CSS3 (Currently, the latest versions of Safari, Firefox and Chrome support this). I've added a video for those people that don't use those browsers and still want to see how the effect looks like. Make sure to check out the demo and let's see how you can create that yourself.
Tags: dj jquery css3 proof of concept experiment webdevelopment
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 61 - 75 of 362|