CSS Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own. The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5
Little Boxes Menu with jQuery Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image. Let’s get […] View demoDownload source Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. Let’s get started! The Markup The HTML will be made up of a main container with div elements inside. <div id="littleBoxes" class="littleBoxes"><div class="boxlink bg1" style="top:0px;left:0px;"><a href="">About</a><div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The positioning values are calculated from the width and height of the boxes which is 90px plus its border (2px) and some margin (1px). Let’s have a look at the style. The CSS Now, let’s add the magic:
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu 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. Step 1: Building the Navigation Bar Let's begin with a basic menu, built with an unordered list and some basic CSS styling. Creating the Menu Container We'll now apply some basic CSS styling. Now, let's see how we can improve it with some CSS3 features. For rounded corners, the syntax will be : For the background, we'll use gradients and a fallback color for older browsers. The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953. We can now add a darker border and polish the design with a "fake" inset border created with the "box-shadow" feature. HTML Part
Fullscreen Slit Slider with jQuery and CSS3 A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Let’s start with the HTML. The Markup So, our first slide will have something like this: Now, let’s style it!
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. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu. There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. ” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. So I tried coding one into html and after I succeeding thought of sharing it with you all. Step 1.Gearing Up So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. Step 2. Align the tabs vertically using grids as shown in the image above. Step 3. <! Lets look at our main navigation menu.
How to create animated tooltips with CSS3 How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after View demo Download source In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover. The unordered list will look like this: <ul class="tt-wrapper"><li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li><li><a class="tt-twitter" href="#"><span>Twitter</span></a></li><li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li><li><a class="tt-facebook" href="#"><span>Facebook</span></a></li><li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li><li><a class="tt-forrst" href="#"><span>Forrst</span></a></li></ul> The list elements will be floating left and the anchors will have the following style: Each anchor will have a different background position for the background image:
Dynamic Drive CSS Library- Animated horizontal tabs 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. BTW, the amount the selected tab jump up can be easily adjusted- refer to the comments inside the CSS. Demo: The two images used: The CSS: Code Info Rate this code: Date Posted: 04/12/2008 Revision History: None Usage Terms: Click here Your Comments (47) Got a question or need help customizing this CSS code?
Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. The main idea is to […] View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS @import url('reset.css'); The JavaScript
CSS UL LI - Horizontal CSS Menu 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. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1. Picture 1. Previous knowledge about some basic HTML and CSS is required. ul (Unordered List) li (List Item) a (Anchor / Link) This is a CSS tutorial so I'm not going to go through the creation of the graphics used in this tutorial. HTML List (ul li) With Links Let's start by creating a list with links in HTML: <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> Picture 2. UL CSS Styling First I change the background color to black.
Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery