A while ago (I think it was around the release of the iPad), the Apple.com website got a new navigation menu on the top of the page. This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That's the moment I thought we could do better, using some nifty CSS3 techniques. So today, I present you the Apple.com navigation menu created using only CSS3.
Since this demo heavily relies on CSS3, make sure you view it using a CSS3 compatible browser. The Webkit browsers (Safari and Chrome) display the effect the best, followed by the latest version of Firefox. Opera and IE don't display everything correct, but the menu seems to be working.
The menu on the Apple.com website also updated their search suggestion, which hasn't been implemented in this demo (yet), but I might create that later. For now, let's check out all the CSS3 you'll need to be able to create this fancy looking navigation menu.
Tags: apple navigation menu css3
Just like I said in my previous article; Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Next to the :any() CSS selector, another cool CSS feature was added to the Gecko engine that I wanted to check out, and is called the
According to the specification, this function does the following: Starting in Gecko 2.0, you can use the
element() CSS function to use an arbitrary HTML element as a background image for
background-image. That sounds pretty interesting! Take note this only works in the latest version from Firefox, and still needs the
-moz- vendor prefix (so the complete function call will be
You can directly view the source from the demo to check what kind of small experiments (or checking out some bad practices) I did, but I would recommend you to read why the experiments are interesting.
Tags: element css function firefox background
Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Ofcourse, this is a great thing, since Firefox has a rock solid place as 2nd most popular web browser. More people will actually be able to see all the nifty stuff you'll create using CSS.
I recently came accross a CSS selector that was included in Firefox 4 (and is added to Webkit (nightly) as well), called the
:any() selector. We'll take a look at what this selector does, and why you would want to use it.
Be aware that the
:any() is not part of the CSS3 specification (yet), but since Webkit already implemented it, I'm pretty sure others will follow as well. Also, to make it work in Firefox, use the
-moz- vendor prefix, resulting in
-webkit- vendor prefix for Webkit). So let's see what this
:any() selector can do for you.
Tags: any css selector firefox webkit
Today, we're going to give away three member accounts on UltimateDesignerToolkit. As you might have guessed by the name of the site, they have a huge collection of all kind of designer items in one place. Examples of these items are Photoshop brushes, vector files, PSD layouts, Photoshop actions and other design resources that may come in useful in your project.
Read the contest rules below to find out more about UltimateDesignerToolkit, and how you can enter this contest. Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.
Tags: designer toolkit contest giveaway
Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.
With the help of some small HTML, nifty CSS and loads of jQuery, we're able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it's built.
You can easily change the script by changing some variables. It also features image preloading and keyboard navigation (try pressing the numeric keys). The background images have a width of 2000px, just to cover most of the currently used screen resolutions. Check out the demo what we're going to create!
The script uses the Templates and Easing jQuery plugins. Tested and working on Firefox, Safari and Chrome. I've added a reference video below to show how the page should look like. As always, comments are left on the source code to explain what it does.
Tags: slideshow animated fullscreen jquery
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 31 - 45 of 371|