integration
Get flash to fully experience Pearltrees
Advanced CSS Menu Trick
CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.
A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product, but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash.
Making an Impressive Product Showcase with CSS3
jQuery plugin: Fullscreen Background
If you’re a webdeveloper or designer I am pretty sure you’ve run into the problem of people wanting to have “fullscreen content” or just background images that will stretch in the most optimal way to the users screen. Lately I found that a lot of people are asking for fullscreen backgrounds, videos and other types on stuff.
This week we are creating a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names. The HTML
CSS3 Animated Bubble Buttons
Posted on Mar 5th, 2010 While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this MicroTut I am going to show you my favorite involving CSS and jQuery. But first, the basics: Horizontal centering with CSS It is as easy as applying a margin to a div:
MicroTut: Centering a Div Both Horizontally And Vertically
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements. The HTML The first step is to define the HTML backbone of the website. We are using HTML5 tags extensively, so we will need to include the HTML5 enabling script for IE in the head section of the document.
Making a CSS3 Animated Menu
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)
Create an apple style menu and improve it via jQuery
How to Create a CSS3 Tabbed Navigation
Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same. Note: Support for IE7 & 8 is there but limited in that the functionality works perfectly but some of the overlay styles aren’t treated properly. If not for the wonderful and awesome CSSPIE and Dean Edwards fix, there would be no support for any version other than IE9.Animated horizontal tabs Author: Dynamic Drive These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. The selected tab is first stretched vertically by giving it a thick bottom padding, then plucked out thanks to the CSS "top" property value that's smaller than the normal tabs'.
Dynamic Drive CSS Library- Animated horizontal tabs
How to Code an Overlapping Tabbed Main Menu | Codepal
Main navigation menu is that part of a website design that makes the whole site look lively and complete.
CSS Sprites2 - It’s JavaScript Time
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites.In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left ... View demo Download source
Slide Down Box Menu with jQuery and CSS3
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
This entry is part 16 of 16 in the CSS3 Mastery Session - Show All « Previous Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.Second Picture is devoted to original tutorials about 3D graphics, Photoshop, Photography and Web Design. 31.10.2008 Category: Web Design In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements.
CSS UL LI - Horizontal CSS Menu
Published by Chris Coyier This article is an update to this old article , which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here . Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content.