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
As you might already know, I'm Dutch. This simply means that I was born and live in a country called The Netherlands (a.k.a. Holland). When looking at prejudices: The country of cheese, wooden shoes, windmills and (legal) drugs.
But I'm not the only one having roots in this part of the world. A couple of (big) companies started their business here. Some of them became really big and grew to international sizes.
Today, I present you a list with business logos from companies that have their roots in the Netherlands. One this really noticed me when making this list: Loads of logos use the colour blue.
I have to admit: These logos are not the most beautiful ones I've ever seen. Still, I'm pretty sure you can draw some inspiration by looking at these. Get ready to get your identity design fluids going!
Tags: dutch company logo inspiration design
First things first here: I'm a Mac guy. But I must say: Windows 7 has made quite a lot improvements compared to it's predecessor (Vista). The first time I booted the OS and saw flying orbs create the Windows logo, I was impressed.
I was even more impressed by the amazing user interface improvements made by Microsoft. For those that aren't familiar with these, here's a complete list with sweet UI improvements on Windows 7. Below is the startup screen created by the flying orbs.
A small little diclaimer here: I've fully skipped the "Windows Vista Era", since I moved to Mac OSX right after Windows XP. There might be some things in this list that were already implemented in Vista, but I wasn't aware of those. Also, this list only shows the graphical improvements - not the technical.
That being said, let's check out the slick UI improvements Microsoft brought to their new OS. It could be pretty inspirational for you too!
Tags: windows 7 user interface improvement microsoft
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 61 - 75 of 360|