A Mac OS X-style Dock In JavaScript Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily. An example is shown below (a larger demonstration is available on a separate page). Compatible browsers The code has been tested and confirmed to work in the following browsers: Firefox 1.5 on Mac OS X Firefox 2 on Ubuntu Linux Firefox 2 on Windows (slightly jerky due to event handlers being given a higher priority than intervals) Internet Explorer 6 Internet Explorer 7 Konqueror 3.5 on Ubuntu Linux Opera 9 on Windows Safari 2 on Mac OS X Safari 3 on Windows Implementing the Mac-style Dock Before implementing the dock, please read the notes on usability. Download one of the files listed above and upload it to your website. The constructor takes five paramaters: node name
Create an apple style menu and improve it via jQuery Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery. This is what we are going to build (don’t forget to hover over the menu) Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks: Part 1: Conceptional work First of all you should do some conceptional work since you need to know the height of your menu itemsyou need to know the width of your menu items, both in normal and hover state.you need to know how many items you want Part 2: Photoshop Part 3: HTML and CSS
CSS Decorative Gallery Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.
TV des Entrepreneurs > Accueil Videolink : plugin javascript pour la balise video HTML5 Tutorial to create a Beautiful, simple, horizontal CSS menu | Tutorial to create a Beautiful, simple, horizontal CSS menu This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. First of all let us write CSS code for menu. here goes the code.. [code lang=”css”] Second of all let us write HTML list for menu. [code lang="html4strict"] [/code] Yeah..! Check out the demo below.. DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:
Beautiful Photo Stack Gallery with jQuery and CSS3 In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the […] View demoDownload source In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. We will use jQuery and CSS3 properties for the rotated image effect. We will also use a bit of PHP for getting the images from each album. So, let’s start! The Markup In our HTML structure we will have several elements. The opacity of the album div is going to be 0 in the beginning, we will then use JavaScript to fade in the columns. The structure for the dark overlay and the preview with the photo stack is going to look like this: The PHP The CSS We will continue with the style of the preview. The JavaScript