background preloader

Website Design Stuff

Facebook Twitter

0to255. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial. Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2.

Beautiful Photo Stack Gallery with jQuery and CSS3. In this tutorial we are going to create a nice and fresh image gallery.

Beautiful Photo Stack Gallery with jQuery and CSS3

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. Beautiful Slide Out Navigation Revised. After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation.

Beautiful Slide Out Navigation Revised

Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order […] View demoDownload source After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. End of Page Slide Out Box with jQuery. The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the last part of the article.

End of Page Slide Out Box with jQuery

It shows another article from the same category and I thought that it might be something interesting for any […] View demoDownload source The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the last part of the article. It shows another article from the same category and I thought that it might be something interesting for any blog or website. The idea is to have an element in the page (here it is in the last paragraph) that triggers the box to appear. Ok, let’s start! The Markup First, we need a paragraph somewhere in the page with the id “last”: Then, we need the following html for the box: The link element with the class “close” will give the user the option to close the box and it will not appear again.

The CSS The JavaScript And that’s it! Enjoy! Contextual Slideout Tips With jQuery & CSS3 – Tutorialzine. Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack.

Contextual Slideout Tips With jQuery & CSS3 – Tutorialzine

Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips. Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines. The idea.