Lightbox or Modal dialog  is one of ajax creative solutions that helps you displaying any desired contents like images, galleries, flash movies , films of any formats and forms in the already loaded page itself. This solution overcome the constraint of pop ups that are blocked by any of well secured internet browser. The main advantage of using lightbox method is that you will be able to load only the relevant content in the specific box without needing to reload the whole page again, which decreases the loading time for more comfort browsing purposes.

Below here are a great useful chunk of light box solutions.

1.multi-box

This one  supports images, flash, video, mp3s, html.

2.GreyBox

This GreyBox can be used to display websites, images and other content easily. It is small, fast and easy to be used by anyone.

3.LightView

It’s considered one of the easiest lightboxes since it’s easily customized, looks great, resizes contents automatically to fit your screen.

4.SlimBox2

It’s very small, efficient, standards-friendly, fully customizable.

5.Dialog

It’s suitable to display information, also it could be moved and resized to the desired way.

6.prototype window

A group of codes that enables you to load different things in your current page such different dialogs and windows.

7.MochaUI

It’s web applications user interface library built on the Mootools JavaScript framework That used for Web Applications, Web Desktops,Web Sites, Widgets, Standalone Windows and Modal Dialogs

8.facebox

Another jQuery-based application that has facebook style that you could use to display images, divs, or entire remote pages.

9.Boxy

Facebook-style dialog box for jQuery that could be edited, moved and resized.

10.Modalbox

11.LightWindow v2.0

different types of lightboxes that you could be use for different purposes, as you will see you could use it for loading any content in your current page such as movies,images, flash movies and more. It’s compatible with all known browsers.

12.simplemoda

awesome group of modal boxes that could be used for loading almost anything to you page like Dialog, Contact Form and Confirmation Override.

13.Lightbox 2.8.0 plugin for WordPress

Another solution from lightbox helpful for wordpress users, this one makes  you present images in a slick window, while darkening the rest of the page in professional way easily.

14.Flexible Lightbox

useful wordpress plugin used for displaying images in very good looking way.

15.Shadowbox

Magnificent application that you could consider it a player for any type of media that can be displayed in a web page, it looks wonderful, customizable and very useful.

16.Lightbox 2

Great application used to overlay images in your current page with sleek transitions and fancy shapes. Also it groups related images to be displayed as gallery.

Related posts:

1. BEST 25 ajax photo sliding solutions
2. Lightbox , Futurebox Without Using JavaScript
3. 15 amazing jquery tabs tutorials

Who didn’t find jquery tabs in any website and didn’t fall in love with it? of course no one!!

These tabs provide a lot of advantages, beside the great way it looks, it is very useful for any tabing purposes, specially when you will be able to add the content you want and view it without needing to reload the web page that contains these tabs,THAT’S GREAT!!

Here are exceptional group of jquery tabs tutorials that we are sure it will attract and enhance your web designing skills and experience.

1.Slick Tabbed Content Area using CSS & jQuery

The Demo

Visit the tutorial

2.simple JQuery Tabs

The Demo

Visit the tutorial

3.A Tabbed Interface Using jQuery

The Demo

Visit the tutorial

4.Simple Tabs w/ CSS & jQuery

The Demo

Visit the tutorial

5.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

The Demo

Visit the tutorial

6.Playing with jQuery Tabs

The Demo

Visit the tutorial

7.How easy to create a slide tabbed box using jQuery

The Demo

Visit the tutorial

8.Javascript: JQuery Tabs

The Demo

Visit the tutorial

9.Create Flipping Content Tabs Using jQuery

The Demo

Visit the tutorial

10.Ultra simple jQuery tabs

The Demo

Visit the tutorial

11.jQuery Tabs made easy

The Demo

Visit the tutorial

12.Animated tapped content with jquery

The Demo

Visit the tutorial

13.jQuery To Fade Effects tabs

The Demo

Visit the tutorial

14.JQuery TabContainer Theme with Tab Transition Animations

The Demo

Visit the tutorial

15.jQuery Sliding Tab Menu for Sidebar Tutorial

The Demo

Visit the tutorial

Related posts:

1. Create Simple Tabs With jQuery and CSS
2. 25+ jQuery Tutorials Roundup With Examples
3. about 20 excellent jquery menus tutorials

Who didn’t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes?

of course jquery menus is the most popular menus that depend on  both functionality and eye catching designs and moving effects. For this reason you will hardly find any website that don’t use one of them. If you one of jquery fans and want to learn how you will be able to deal with them and to but theme in your website, here are about 20 jquery menus tutorials that will help you to learn, see and apply them easily in just few steps.

1. Sliding Top Menu With jQuery

visit the tutorial from here

2.Sexy Drop Down Menu w/ jQuery & CSS

visit the tutorial from here

3.jquery css example dropdown menu

visit the tutorial from here

4.Color Fading Menu with jQuery

visit the tutorial from here

5. Making a Smooth Animated Menu with jQuery

visit the tutorial from here

6.jQuery Drop Line Menu

visit the tutorial from here

7.Animated Menus Using jQuery

visit the tutorial from here

8.Horizontal Scroll Menu with jQuery Tutorial

visit the tutorial from here

9.Simple JQuery Accordion menu

visit the tutorial from here

10.jQuery Pop-up Menu Tutorial

visit the tutorial from here

11.jquery feed menus

visit the tutorial from here

12.Creating a Floating HTML Menu Using jQuery and CSS

visit the tutorial from here

13. Sliding Jquery Menu

visit the tutorial from here

14.Fading Menu – Replacing Content

visit the tutorial from here

15.Make a Mega Drop-Down Menu with jQuery

visit the tutorial from here

16.accordion menu

visit the tutorial from here

17.Simple animated menu with jquery

visit the tutorial from here

18.apple style menu and improve it via jQuery

visit the tutorial from here

19.jQuery Sliding Tab Menu for Sidebar Tutorial

visit the tutorial from here

Related posts:

1. 25+ jQuery Tutorials Roundup With Examples
2. 15 amazing jquery tabs tutorials
3. CSS and jQuery Animated Navigation

in this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using CSS.

1. conditional-css

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

usage : http://www.conditional-css.com/usage

2. CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

usage : http://rafael.adm.br/css_browser_selector/

3. adding a CSS StyleSheet to your RSS feeds

it is an old technique , but we mentioned it as it is important to broke the regular pattern of the RSS readers viewing system .

usage :

you will need to add the tag ( xml-stylesheet ) to your RSS feed file

Next you will need to create the CSS file called rss.css , how each RSS tag is displayed .

here’s an example for the RSS.css file

note : you can use the stylesheet to show or hide some feeds items to force the visitor to visit your site , but I do not support that .
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

4. CSS Watermark Effect

CSS Watermark is an unobtrusive and easy way for creating watermark (crossbrowser semi-transparent text) effect on your website’s images. You may choose between four standard and easy applicable text positions – topleft, topright, bottomright and bottomleft over the image.

Download : http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=50

5. Alternative style sheets switching via the browser menu

alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.

Usage : https://developer.mozilla.org/en/Alternative_style_sheets

6. Alternative style sheets switching via the website

Usage :

we will add the alternative style sheets to the document , in our example we have three styles : default , blue and black , inside style.css we will define the formats which will appear in all styles , and default.css is for the formats belongs to the default but it will be change in the other styles .
Note : I added the tag ( rel=”stylesheet” ) to the default style and the tag ( rel=”alternate stylesheet”  ) to the secondary.

next add the styleswitch.js file by adding this code at the head tag

you can download the styleswtich file from here

Now , the final step is to add the Switching style opthion by one of these methods :
Radio menu :

Note : we used the titles of styles to define the value of the input .

URLs :

Opthions select menu (switchcontrol) :

7. Forming Tooltip using CSS3

We used to create tooltips using JavaScript , it was hard in changing colors and shapes but with CSS3 it is very easy.

Usage :

First we will make a div
<div title=” Tooltips Test”></div>
and adding the StyleSheet code which will hide the title when moving the cursor (pointer) on the div .

now add the CSS code to show the tooltip when you move the pointer on it .

Related posts:

1. 3 Techniques For Faux Image Cropping

This tutorial show you 3 easy and fast ways to control and faux image cropping with css , these techniques is to display only a portion of an image in your content ..this is image cropping ! .

Related posts:

1. Ways to Browser Test and Validate Your Website
2. CSS techniques web developer should use
3. 8 CSS-Only Images Tutorials

DropDown Blogroll is very useful technique to include a long list of links without taking much space from your page , This tutorial showa you how to make a DropDown Blogroll with css and xhtml without using Javascript .

Related posts:

1. Lightbox , Futurebox Without Using JavaScript
2. Dojo : A Distinct Library For JavaScript
3. Create Vimeo-like top navigation with css and xhtml

This tutorial is going to show you how to use the new techniques XHTML5 & CSS3 to code a layout from scratch .
the layout we are going to make will cover most of the elements which will help you start coding HTML5 , like the page’s name and it’s slogan , a menu , a highlightend area , a post listing , an extras section with some external links , about box and a copyright statement .

Related posts:

1. Create a Dark and Sleek Web Layout Using Photoshop
2. How To Design a Colorful Web Layout in Photoshop
3. Sticky (Fixed) SideNav Layout with CSS and jQuery

This tutorial will show you how to produce a website that is a little different to the typical ones you see around. It will be a cartonny or comic scene using a variety of different graphic vectors , it also going to show you how to add a little JQuery to spice it up!

Related posts:

1. Create Simple Tabs With jQuery and CSS
2. Create jQuery Sliders Tutorial
3. How To Create Tweet Counter With jQuery

Now you are not in need to learn JavaScript or to use it to make a lightbox , because this tutorial is going to shwo you how to make a lightbox without using JavaScript , only  CSS & Xhml .

Related posts:

1. How To Create a Beautiful Dropdown Blogroll Without Javascript
2. +15 useful ajax lightbox solutions
3. Create a Cartoon Landscape Website With a little jQuery

This tutorial show you how to create a fixed sidenav layout , it allows your users to cruise through the content without scrolling back up to the top to navigate through the rest of the site .

Related posts:

1. How To Design a Colorful Web Layout in Photoshop
2. Create a Dark and Sleek Web Layout Using Photoshop
3. Coding A HTML 5 Layout From Scratch