This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result. Enjoy!

Firstly, we need to create list menu using unordered list element :

/* Sample #1 */


		
			 Webstuffshare Home
		

		
			 Subscribe RSS Feed
		

		
			 Subscribe Email
		

		
			 Follow Twitter
		


/* Sample #2 */


		
			 Webstuffshare Home
		

		
			 Subscribe RSS Feed
		

		
			 Subscribe Email
		

		
			 Follow Twitter
		

They are arranged vertically by default, so we must arrange them horizontally using CSS property ‘float‘ with ‘left‘ value. Next, add CSS transition to make any properties change on it animated, we set the duration in 0.3 seconds or 300 milliseconds.

.cleaner {
	clear: both;
}

#fly-menu, #fly-glow-menu {
	margin: 1em auto 0 auto;
}

	#fly-menu li, #fly-glow-menu li {

		/* Basic style */
		list-style-type: none;
		margin-right: .5em;
		float: left;
		font-size: 15px;
		background: #cacaca;
		padding: 10px;
		cursor: pointer;

		/* Add shadow */
		-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);

		/*
			Add animation using transition
			-webkit : Safari & Chrome.
			-moz : Firefox
			-o : Opera
		*/
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}

Since each menu is having float with left value, we need a cleaner element to make another element not floating into the menu.
The last are reading hover event on each menu by adding pseudo property :hover and change the ‘margin-top‘ properties into -1em. This will make our menu fly upwards when user hovering them.

#fly-menu li:hover {
	margin-top: -1em;
}

We can also make the animation nicer by changing menu’s background color and modify its box shadow properties or anything we need.

#fly-glow-menu li:hover {

	margin-top: -1em;
	background: #fff;

	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}

In this tutorial we are going to create our own dashboard menu as in Leopard dashboard. Dashboard menu in Leopard usually uses as a container for a tons of widgets we have and that will be nice if we have one on our web application. First, take a look at below demo to know the result we want to build.

Basic Technique
The dashboard will be hidden out of the webpage, in this case on the bottom of the page. We can do that by setting the dahboard position into absolute, put its bottom position with minus point and set the body’s overflow properties into hidden.

The problem with this technique is our document content will also hidden since the body’s overflow properties was set into hidden, we can solve them by moving the dashboard into the top of the page, but in this demo we’ll continue to put them on the bottom.

Expected Result:

Build Dashboard
We’ll separate the dashboard contents into 3 parts : toggle for showing and hiding dahsboard, dashboard menu for wrapping widgets list and dot container for wrapping dashboard’s background with metallic effect. Wrap them all on one div (as a container) so we can easily move these 3 parts only by styling this div.

Now we will styling them. Set the dashboard’s width into 100%, position absolute, bottom into 0px and also add inset box shadow into them to make emboss effect. Put the toggle’s position on top of the dashboard to make it always visible even the dashboard is hidden.

#dashboard {
	font-family: Arial;
	font-style: normal;
	background: #a3acb7;
	display: block;
	width: 100%;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	position: absolute;
	bottom: 0px;
}

#dashboard-menu {
	position: absolute;
	display: block;
	z-index: 2;
}

#dot-container {
	display: block;
	width: 200%;
	text-align: left;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#toggle {
	display: inline-block;
	margin-top: -3em;
	left: 0;
	position: absolute;
	cursor: pointer;
}

Expected Result:

Create Metallic Effect With CSS and jQuery
The most interesting technique is how to create metallic effect on dashboard’s background using only CSS and jQuery. The effect are a groups of black circle div with white shadow on it, we can repeat them horizontally until it’s equal to document width and after that repeat them vertically. Move some pixel the odd dots group’s position to make it more real.

.dot {
	background: #1f1f1f;
	width: 4px;
	height: 4px;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 1px 0px #ffffff;
	-moz-box-shadow: 0px 1px 0px #ffffff;
	box-shadow: 0px 1px 0px #ffffff;
	margin-right: .3em;
}

Expected Result:

We won’t create each dot by copy and paste the span since jQuery can generate and repeat them dynamically. Repeat horizontally the dots until it’s equal to document’s width and after that repeat them vertically. The last thing to do is insert them into dot container div.

//Create base variable, check document width and count how much dot per line.
var a, b, element = '';
documentWidth		= $(window).width();
dotLength			= parseInt(documentWidth/10);

//Loop dot per line
for(a=0; a<= 11; a++) {

	//Check is even or odd to add some pixel to the margin left
	className= ((a%2) == 0) ? '0' : '0.4em';
	element 	= element + '
\n';

		//Loop to create the dot
		for(b=0; b<=dotLength; b++) {
			element = element + '\t ';
		}

	element = element + '

';
}

//Insert dots on #dot-container
$('#dot-container').html(element);

Put The Widgets
The dashboard was setted perfectly, now we’ll put the widgets list. Put each widgets on unordered list and add its widget name below the widget.

		 
 Dashboard
		

		 
 E-Mail Client
		

		 
 Calendar
		

		 
 Geolocation
		

		 
 Sticky Note
		

		 
 AirPort
		

		 
 Calculator
		

Expected Result:

The list still appear vertical, now we must set them into horizontal orientation by set its display properties into inline-block. Add the distance on each widget and set its margin properly.

#dashboard-menu {
	position: absolute;
	display: block;
	left: -65em;
	z-index: 2;
}

	#dashboard-menu ul li {
		display: inline-block;
		text-align: center;
		margin-right: 2em;
		margin-top: 1em;
		color: #313235;
		text-shadow: 0px 1px 0px #fff;
		font-weight: bold;
	}

	li img {
		margin-bottom: .7em;
		border: 0;
		cursor: pointer;
	}

Expected Result:

We want the widgets is moving from left to right when the dashboard is show up, so we need to set its left property into -65em.

Hide and Seek
Now we’ll add some jQuery code to the dashboard to make it able showing and hiding. Firstly we must hide the dashboard position by setting its position with some minus pixels, so it will be hidden.

#dashboard {
	font-family: Arial;
	font-style: normal;
	background: #a3acb7;
	display: block;
	width: 100%;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	position: absolute;
	bottom: -150px;
}

Add toggle function to the image toggle, the first function will rotate the image toggle by set its rotate property into 45 degree (we need zachstronaut’s plugin for doing this), show the dashboard by set its bottom property value into 0px and show the menu by set its left into 3em. These action is in animate function so any change will have animation. For the second function we just need to revert these value.

//Add event toggle on #toggle
$('#toggle').toggle(

	function() {

		//Rotate toggle
		$(this).stop().animate({rotate : '-=45deg'});
		$('#dashboard').stop().animate({bottom : '0px'});
		$('#dashboard-menu').stop().animate({left : '3em'});
	},

	function() {

		//Revert rotate toggle
		$(this).stop().animate({rotate : '0deg'});
		$('#dashboard').stop().animate({bottom : '-150px'}, 700);
		$('#dashboard-menu').stop().animate({left : '-65em'});
	}
);

That’s it we just made our simple dashboard menu, hope you enjoy my post and thank your for reading!

As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, I usually add the effect using some images but now we’ll create that one using pure CSS.

Drop Down Technique
To create drop down menu like the demo we can use a div for the menu container and an unordered list for the menu. Wrap the unordered list on the div and hide them, we’ll only show the menu when user hovering the div. Take a look at following image :

As you mention above, the unordered list (the menu) is hidden, positioned inside the div and under the text “Please choose following menu”. So when the user hover the menu container the menu will have sub menu below it.

The Object and Its Style
As I said above the menu container will contains unordered list as the menu, so we will wrap the unordered list with the div :

	+   Please choose following menu


			
				 Subscribe RSS Feed
			
		

			
				 Subscribe Email Subscription
			
		

			
				 Follow My Twitter
			
		

The important thing is we must fixed the menu container’s height (class name : drop-menu) so no matter how much list (class name : sub-menu) element inside, its height will not change. We can also make it more cute by set up its padding, font size, border and also the cursor property.

.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	border: 1px solid #f6f0e4;
}

Expected Result:

We need an hover event in the menu container for showing up the menu, we can use CSS pseudo-class :hover. Since we want to show the menu by menu container hover event we can use CSS nesting :

.drop-menu:hover .sub-menu {
	display: inline-block;
}

Next is styling the menu, set its width, background and padding equal to its parent. Add a shadow effect by setting its box-shadow property, set x-axis to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. This will make the shadow has a gradient effect.

.sub-menu {
	display: none;
	width: 400px;
	background: #fff;
	padding: 10px 10px;
	margin-left: -11px;
	margin-top: 10px;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

	.sub-menu li {
		list-style-type: none;
		display: block;
		border-bottom: 1px dotted #eaeaea;
		font-size: 19px;
		height: 22px;
		padding: 8px 0;
	}

		.sub-menu li img {
			margin-right: .5em;
		}

	.sub-menu li:hover {
		border-bottom: 1px dotted #bababa;
	}

Expected Result:

We also will add a little animation to the plus symbol, if the user hovering menu container we will rotate the plus symbol into 45 degree so it will transform into crosswise.

.plus {
	display: inline-block;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
}

.drop-menu:hover .plus {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

Wrap them up :

* {
	margin:0; padding:0;
}

body {
	font-family: Georgia;
	background: #fff9ec;
	text-align: center;
	color: #464530;
	text-shadow: 0px 1px 0px #fff;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: -1px;
	margin-top: 3%;
}

a, a:visited {
	color: #464530;
	text-decoration: none;
}

label {
	font-size: 20px;
}

#content {
	display: block;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	border: 1px solid #f6f0e4;
}

	.plus {
		display: inline-block;
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}

	.drop-menu:hover {
		border: 1px solid #fff;
	}

	.drop-menu:hover .sub-menu {
		display: inline-block;
	}

	.drop-menu:hover .plus {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}

	.sub-menu {
		display: none;
		width: 400px;
		background: #fff;
		padding: 10px 10px;
		margin-left: -11px;
		margin-top: 10px;
		border: 1px solid #fff;
		-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
		-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
		box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	}

	.sub-menu li {
		list-style-type: none;
		display: block;
		border-bottom: 1px dotted #eaeaea;
		font-size: 19px;
		height: 22px;
		padding: 8px 0;
	}

		.sub-menu li img {
			margin-right: .5em;
		}

	.sub-menu li:hover {
		border-bottom: 1px dotted #bababa;
	}

Conclusion
That’s it, we have made simple drop down menu using pure CSS. By using CSS3 properties we can tune our element into another level and also we can minimize the use of images. Thanks for reading!

Tobias Ahlin is a great designer from Sweden, I admire his work and his way showcasing his portfolio. It comes up with the list of all his works and the anchor for filtering work type above them, we can choose one of the filter and it’s automatically hiding and showing portfolio item using horizontal slide effect. Now, in my view, I am going to explain how they beautifully works.

The Technique
As you can see on the demo page, the image items are showing and hiding with horizontal slide effect based on user choice. Horizontal slide effect produced by manipulating item’s width, when hiding the item we will change the item width into 0 pixel, and when showing the item we will return its default width.

To make the item’s width transformation smooth we will also change its opacity, for hiding the item set the opacity from 100% to 0% and vice versa for showing them. We can show and hide the item but we won’t see the slide effect transition, so we must use built-in jQuery function, animate().

Setup The Item’s View
We’ll create two separated section, first the navigation and the last is the items list. The navigation will contains anchor links which will navigate the items visibility, while items list will contains image item which will be show and hide.

Now, create navigation and items list like following script :

All Tutorial
jQuery Tutorial
CSS Tutorial
Free PSD

As you mention above, each navigation and item has rel attribute that represent each category. The purpose is when user choosing one of the navigation, the items that will be displayed only an item which has same rel attribute with the navigation, the others will be hidden.

We will styling the navigation first, set the list display with inline-block so the unordered list will be displayed horizontally. If the user select one of the navigation, we will add “selected” class name to them. “selected” style are having green background with box-shadow and border radisu, so the selected navigation will have different style with the siblings.

ul.menu {
	margin-left: .5em;
	margin-bottom: 1em;
}

ul.menu li {
	list-style-type: none;
	display: inline-block;
	font-weight: bold;
	text-shadow: 1px 1px 0px #f3f5da;
	padding: 2px 15px;
}

	.selected {
		-webkit-border-radius: 15px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background: #acac75;
		-webkit-box-shadow: 1px 1px 0px #8c8c5d;
	}

	.selected a, .selected a:visited {
		text-shadow: 1px 1px 0px #8c8c60;
		color: #fff;
	}

Now styling the image items, set each item display with block, list style type with none, float with left and margin with 0.5 em. Each image inside the list will have 5pixels white border thickness, border radius 5 pixels and also box shadow.

ul.item li {
	list-style-type: none;
	display: block;
	float: left;
	margin: .5em;
}

	ul.item li img {
		border: 5px solid #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px #ac987e;
		-moz-box-shadow: 0px 0px 5px #ac987e;
		box-shadow: 0px 0px 5px #ac987e;
	}

Slide Effect With animate()
The slide effect will fire up when user click the navigation, so we will add click event to them. After that, remove “selected” class name from all navigation and add it to selected navigation. This will make selected navigation will have different style with its siblings.

$('.menu li a').click(function() {
	$('.menu li').removeClass('selected');
	$(this).parent('li').addClass('selected');

Next, get its rel attribute value and check it. If the value is “all” (which mean showing all image item) we will display all image item and if the value is other we will search any image item that has same rel attribute value and display it then hide the others.

thisItem 	= $(this).attr('rel');

if(thisItem != "all") {

	$('.item li[rel='+thisItem+']').stop()
	.animate({'width' : '110px',
				 'opacity' : 1,
				 'marginRight' : '.5em',
				 'marginLeft' : '.5em'
				});

	$('.item li[rel!='+thisItem+']').stop()
	.animate({'width' : 0,
				 'opacity' : 0,
				 'marginRight' : 0,
				 'marginLeft' : 0
				});
} else {

	$('.item li').stop()
	.animate({'opacity' : 1,
			 'width' : '110px',
			 'marginRight' : '.5em',
			 'marginLeft' : '.5em'
			});
}
})

As you can see above, for displaying the item we search all item which having same rel attribute value with the selected navigation. Then we start the animation which will animate the item width to the image’s width, set its opacity to 100% and set each margin left and right to 0.5em. To prevent animation queue, we use stop() function before animate() function.

For hiding the sibling we use the same technique as above except the animation properties’s value, set each animation properties’s value to 0.

At this point our item will be show and hide using slide effect, triggered by the navigation. The last thing we will do is to make the image items smoother by adjusting its opacity. Set each image opacity to 50% using animation and hover toggle event, if the user hovering it, animate its opacity to 100% and revert it value to 50% when user hovering out.

$('.item li img').animate({'opacity' : 0.5}).hover(function() {
	$(this).animate({'opacity' : 1});
}, function() {
	$(this).animate({'opacity' : 0.5});
});

Ok, that’s it. Thanks for reading and hope this post useful

In previous tutorial I was explained how to stylize input element with photoshop effect (color gradient, smooth border, box shadow, drop shadow) using CSS3 only. In this post We will play in depth with them, since they have advantages on their own field I’m not going to compare both of them nevertheless.

Common Photoshop Techniques
When I need a shiny buttons with color gradient inside them, smooth bevel like Mac-style, I usually create them in Photoshop, but recently I realized that CSS3 properties can do some of Photoshop’s task like Color Gradient, Stroke, Drop Shadow, Smooth Bevel and even Layer Masking. Take a look at following images :

What I have done are adding color gradient inside the buttons, masking half of buttons with white layer in 50% opacity, smooth bevel, smooth drop shadow and white shadow on each text inside the buttons. I guarantee CSS3 can do exactly the same techniques as I did before with Photoshop.

CSS3 Techniques
This will be refresh your memory about replacing Photoshop techniques using only CSS3 properties. Some techniques we’ve discussed in previous post, the other techniques are smooth bevel and layer masking :

• Color Gradient using -webkit-gradient or -moz-linear-gradient property.
• Stroke using border property.
• Drop Shadow using -webkit-box-shadow, -moz-box-shadow or box-shadow property.
• Rounded Corner using -webkit-boder-radius, -moz-border-radius or boder-radius property.
• Smooth Bevel using border property on one side or more with 1pixel thickness, white color.
• Layer Masking using stacked layer where the top layer’s height is an half of bottom layer’s, fill with any matched color and of course set its opacity.

Test Case #1 : Buttons
Now we will create buttons with Photoshop effect using CSS3 properties above. First we create the HTML element :

	
		Preview
	

The anchor element will be a whole button’s body, while span element will be a smooth bevel placeholder. Now fill the anchor with color gradient, set span’s top border with 1pixel thickness, fill with white and set opacity into 60%.

.button-red {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 200px;
	height: 50px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1px;
	cursor: pointer;
	text-align: center;
}

If the user is hovering the buttons we set the lighter color for the buttons and revert it when it’s active.

.button-red:hover {
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
	background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
}

.button-red:active {
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
}

Expected Result :

And that’s it we’ve created a smooth and shiny buttons with only CSS3.


Test Case #2 : Squares
Another techniques we’ll use to create a button are drop shadow and layer masking. Create the HTML element :

	
	
		OK
	

There are no different with previous test case except the span with class name “square-shade”, the “square-shade” will be a layer masking. Fill the anchor with color gradient, set span’s top and bottom border with 1pixel thickness, fill with white and set opacity into 70% for the top border and 30% for the bottom border. Don’t forget to set box shadow property with black and its opacity into 50%.

.square-blue {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 60px;
	height: 60px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
	background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1px;
	cursor: pointer;
	position: relative;
	text-align: center;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
}

	.square-blue:hover {
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(108, 196, 255)), color-stop(1, rgb(0,133,222)));
		background : -moz-linear-gradient(center top, rgb(108, 196, 255) 25%, rgb(0,133,222) 100%);
	}

	.square-blue:active {
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
		background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
	}

Set the “square-shade” position into absolute so it will be pile up with the “square-inner”, set its width as anchor’s width and set its height into an half from anchor’s height. Set its top border radius into 5 pixels and botton border radius into 0 pixel. Fill with white color and set its opacity into 20%.

.square-shade {
	display: inline-block;
	position: absolute;
	width: 60px;
	height: 30px;
	margin-top: 2px;
	background: rgba(255, 255,255, .2);
	-webkit-border-radius: 5px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-radius: 5px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

Expected Result :

Sweet isn’t it? Now we’ll create a badges. Badges usually used for displaying small information from a product or anything important. Take a look at following case :


Test Case #3 : Badges
The technique for creating badges is very simple, we just need a rectangular element, fill it with color gradient and text as we did on test case #1 and #2 then rotate them into 40 degree.

Wrap them together in the Div which contains an image and set its overflow property into hidden, this will make the badges looks like shielding the Div. The last step is adding drop shadow into the badges to make it looks more real.

Prepare an images which we will put badges, set the HTML element into following code :

New!

The “badges-webstuffshare” div will be a div wrapper that contains an image, “badges-inner-left” will become the badges and badges-text will contains any text we will show. Set “badges-banner” background with your prepared image, set its width and height based on image’s width and height. Set its position into relative and overflow into hidden.

.badges-webstuffshare {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 365px;
	height: 214px;
	background: url('images/webstuffshare.png');
	position: relative;
	overflow: hidden;
	text-align: center;
}

Set “badges-inner-left” position into absolute, fill with color gradient, rotate into 40 degree and add box shadow.

.badges-inner-left {
	position: absolute;
	left: -3.7em;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
	padding-top: 1px;
	height: 40px;
	width: 200px;
	font-size: 20px;
	color: #fff;
	text-shadow: 0px 1px 0px #6c0909;
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
	}

.badges-text {
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	padding-top: 9px;
}

Expected Result :

If you want to modify badges position you can set “badges-inner-left” top and left property based on your need. Try increasing its height to get bigger badges.

Expected Result :

Next Post : Test Case #4 – CSS Music Player
For next post tutorial, I will continue explaining CSS3 test case, I choosed Music Player using only CSS3 like following image, so stay tune

Expressjs has a nice button menu. Yes it absolutely nice since it has opacity and box shadow on each button, automatically widen when mouseover and again opacity to transparent when mousedown. I’d like to explain how they works with pure CSS version and jQuery version.

The Technique
There are two techniques we want to do, opacity and widen the button. Opacity is an effortless technique since it was supported by CSS while widening the button is only CSS technique by increasing the button’s current padding with some pixels number. So, when the user mouseover the button we will add its padding to make it wide and decrease the button’s opacity when user click it.

Pure CSS
Now based on the technique above we’ll create these button using pure CSS. First we create the button list using unordered list and then we set its style. Set the list’s display with inline, fill its background color with black and opacity with 20% (CSS value : 0.2), add box-shadow and set its border-radius into 15px to make it rounded. For opacity on background color we will use rgba().

Home
About
Portfolio
Contact

#menu-css li {
	display: inline;
	list-style: none;
}

#menu-css li a {

	/* Border Radius */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* Border Shadow */
	-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

	color: #ffffff;
	background: rgba(0,0,0,0.2);
	display: inline-block;
	padding: 5px 15px;
	outline: none;
	text-decoration: none;
}

When user mouseover the button we’ll adding its padding and increase its opacity into 50% (CSS value : 0.5) and when user click it we decrease its opacity into 10% (CSS value : 0.1).

#menu-css li a:hover {
	background: rgba(0,0,0,0.5);
	padding: 5px 25px;
}

#menu-css li a:active {
	background: rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

CSS Animation
Until above step we’ve a list of nice buttons but since they don’t have animation with them, the opacity transition and widening effects will not seen. So we’ll add the animation effect into each button, in this example each button represented by anchor element (<a>) it means we’ll put the animation on anchor style.

#menu-css li a {

	/* Animation (Webkit, Gecko & Mozilla) */
	-webkit-transition-duration: 0.20s;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-duration: 0.20s;
	-moz-transition-timing-function: ease-out;
}

-webkit for Webkit-based browser and -moz for Mozilla-based browser. The trasition-duration represent how long the transition should last and transition-timing-function represent how the animation will proceed over time. On the CSS above we just create the animation in 0.20 seconds with ease-out function.

These step will add animation into any style changes and make them animate. For example the anchor has property width with value 20px and the anchor has different style when user hover it (ie : width: 40px), the width changes from 20px to 40px will be animated.

#menu-css li {
	display: inline;
	list-style: none;
}

#menu-css li a {

	/* Border Radius */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* Border Shadow */
	-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

	/* Animation (Webkit, Gecko & Mozilla) */
	-webkit-transition-duration: 0.20s;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-duration: 0.20s;
	-moz-transition-timing-function: ease-out;

	color: #ffffff;
	background: rgba(0,0,0,0.2);
	display: inline-block;
	padding: 5px 15px;
	outline: none;
	text-decoration: none;
}

	#menu-css li a:hover {
		background: rgba(0,0,0,0.5);
		padding: 5px 25px;
	}

	#menu-css li a:active {
		background: rgba(0,0,0,0.1);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	}

Browser Issue
Since -webkit-transition has supported by latest Webkit-based browser including Safari and Chrome, Our pure CSS menu with animation above will works perfectly. Unfortunately -moz-transition will be introduced on Firefox 3.7 (Gecko 1.9.3) so the animation will not works on latest Firefox.

jQuery Animate
For a while Browser issue was disrupt our pure CSS menu, but of course we won’t stop to make it works. Using jQuery we can replace the CSS animation with $.animate() function. Surely with $.animate() function we just need to specify the pixels number for increasing the button’s padding.

For button opacity we can’t use opacity property in $.animate() function because it will make our button and text transparent. Since we just need to make the button (background) transparent we need $.animate() property that support rgba, we can use Mehdi Kabab’s plugin which is modification (to support rgba) from John Resig’s background color plugin.

If the user mouseover the button, we set its default padding and animate it by increasing its padding and opacity and when mouseout we revert to the default CSS value. When user click (mousedown) the button we decrease the opacity into 10% and revert to 50% when mouseup the button.

$(document).ready(function() {

	$('#menu-jquery li a').hover(

		function() {

			$(this).css('padding', '5px 15px')
		 .stop()
		 .animate({'paddingLeft'	: '25px',
					 'paddingRight'	: '25px',
					 'backgroundColor':'rgba(0,0,0,0.5)'},
					 'fast');
		},

		function() {

			$(this).css('padding', '5px 25px')
		 .stop()
		 .animate({'paddingLeft'	: '15px',
		 			'paddingRight'		: '15px',
		 			'backgroundColor' :'rgba(0,0,0,0.2)'},
		 			'fast');

	}).mousedown(function() {

		$(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');

	}).mouseup(function() {

		$(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
	});
});

Conclusion
CSS3 offers us many advantages but sometimes we can’t take that advantages due to browser support, thankfully for jQuery offers us the alternative. Thanks for reading and happy coding! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

CSS Pseudo-selector come like a saviour, it makes our life easier by saving our time for traversing the Document Object Modelling (DOM). Especially for nth-child pseudo-selector, it can make us choose any element we want by pointing its index number (start from 1), it means we can easily choose any object element we want to modify.

Not just CSS, jQuery also support :nth-child selector. We can use :nth-child(n) in any element we want then jQuery will search for them. For example, we have an unordered list that contains four list items and we want to modify the third element, we just need to call this script $(‘li:nth-child(3)’) and your third element from the list was selected.

The Case
Each user has a different tastes in viewing our content, including data in a table. I, for example, always enjoy seeing the font in a smaller size but my friend didn’t. It just a font size, how about font style, text alignment, text color or the background color? I don’t think we need to create a user interface for each user, create a tool to stylize our table instead.

The tool will have a function similar to a toolbar on a text editor, it will make a font size bigger or smaller, make it bold or italic, change its alignment, adding a background color and etc. User also can choose any content they want to modify by clicking its element and modify it using the tool in the toolbar.

The Technique
So the case we want to make a simple toolbar for stylize our table. As we know before we can traversing our every object element by jQuery pseudo-selector and jQuery tarversing function but we will use only :nth-child, parents() and children() function. The :nth-child selector we will use for choosing pointed object, parents() for choosing the selected object’s parent and children() for choosing the selected object’s children.

The only main task is we need to create a button and its function that can automatically adding and removing class name to the selected object. That class which contains css properties will handle the styling of an object, so if we have a button to make the font bolder it means the button represent some css properties that will make the object bolder, and so forth.

The selected object we divide into two section, pre-defined and user-defined selected object. In this implementation, the pre-defined selected object are “All Content” which represent all contents in the table, “Content in Column #2″ which represent each contents in column number 2 and “Content in Row #2″ which represent each contents in row number 3.

User-defined selected object will represent any contents of the table selected by the user. The user will choose the object by clicking and the script will automatically save its information, row and column indexes. That informations are needed when the user want to modify the object, by these information we can locate the selected object and modify it.

CSS and jQuery
We prepare the HTML and CSS first, the button and the style for styling the object.

italic
strong
underline

span {
	display: inline-block;
	width: 23px;
	height: 23px;
	text-indent: -9999%;
	cursor: pointer
}

span:hover {
	background-position: bottom left;
}

.trigger-strong {
	background: url('images/bold.png') top left;
}

.trigger-italic {
	background: url('images/italic.png') top left;
}

.trigger-underline {
	background: url('images/underline.png') top left;
}

.trigger-background-selected{
	background: url('images/background.png') top left;
}

.trigger-italic-selected {
	background: url('images/italic.png') top left;
}

.trigger-center-selected {
	background: url('images/center.png') top left;
}

The script above will create a button and some style (*-style) we will add or remove from the object. Now we add a function to the button.

$('.trigger-italic, .trigger-strong, .trigger-underline').toggle(function() {

	className =	$(this).attr('class')+'-style';

	$('td').addClass(className);
	$(this).addClass('selected');

},function() {

	$(this).removeClass('selected');

	className =	$(this).attr('class')+'-style';

	$('td').removeClass(className);

});

First we add a toggle function to the button, this will make a button can be selected and unselected. If the button being selected, we will create a class name based on the button class (we just adding ‘-style’ text for the class name). So, if the button have class name ‘trigger-italic’ the script will generate a new class name ‘trigger-italic-style’. We add that class name to every ‘td’ we have (this represent ‘All content’), and then add ‘selected’ class to the button to make it look selected.

If the button being unselected, we just need to remove all the classes we add before. For the ‘Content in Column #2′ we must change $(‘td’) to $(‘tr td:nth-child(2)’), this will select the ‘td’ (column) that have index number 2. For ‘Content in Row #3′ we must change $(‘td’) to $(‘tr:nth-child(4)’), this will select the ‘tr’ (row) that have index number 3. I put index number 4 because we start counting from the row header.

$('.trigger-background-2, .trigger-right-2, .trigger-center-2').toggle(function() {

	className =	$(this).attr('class')+'-style';

	$('tr td:nth-child(2)').addClass(className);
	$(this).addClass('selected');

},function() {

	$(this).removeClass('selected');

	className =	$(this).attr('class')+'-style';

	$('tr td:nth-child(2)').removeClass(className);

});

$('.trigger-background-23, .trigger-small-23, .trigger-big-23').toggle(function() {

	className =	$(this).attr('class')+'-style';

	$('tr:nth-child(4)').children('td').addClass(className);
	$(this).addClass('selected');

},function() {

	$(this).removeClass('selected');

	className =	$(this).attr('class')+'-style';

	$('tr:nth-child(4)').children('td').removeClass(className);

});

And the last is reading user-defined selected object.

$('td').click(function() {

	thisIndex 	= $(this).index() + 1;
	parentIndex	= $(this).parents('tr').index() + 1;

	$.cookie('thisIndex', thisIndex);
	$.cookie('parentIndex', parentIndex);

	$(this).append('
Content Was Selected

');
	$('.td-selected').fadeOut(1000);

});

The script will locate the object by reading its index and its parent index then save it in the cookies, tell the user that they have select an object. We will add a function to the button so it can locate the selected object.

$('.trigger-background-selected, .trigger-italic-selected, .trigger-center-selected').toggle(function() {

	className	=	$(this).attr('class')+'-style';
	cookieTR		= $.cookie('parentIndex');
	cookieTD		= $.cookie('thisIndex');

	if(cookieTD != null && cookieTR != null)  {
		$('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').addClass(className);
		$(this).addClass('selected');
	} else {
		alert('Choose a content on a table first');
	}

},function() {

	$(this).removeClass('selected');

	className =	$(this).attr('class')+'-style';
	cookieTR		= $.cookie('parentIndex');
	cookieTD		= $.cookie('thisIndex');

	$('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').removeClass(className);

});

By reading the cookies that contains the object’s index informations we can locate the object and modify them.

Bug Issue for Chrome User
Since we’re using cookie and Chrome disable cookie on an opened file (file://) the user-predefined selected object will not working properly, to make it work put the demonstration file on your www folder an access them using http://. But you can still enable cookie on an opened file with the command line flag –enable-file-cookies. For further information please visit this following link.

Thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

As a web developer or designer we must be frequently facing a task to create a webpage layout. In creating that, positioning a stacked-random element usually put through a nightmare for us, fortunately CSS and its beautiful properties help us cure that nightmare and in this post i will explain how to take advantage of the two CSS positions, relative and absolute.

Relative Versus Absolute
Before we go to take these advantages we must be acquainted with them. I quote these two positions explanation from w3schools, here they are :

Relative : Generates a relatively positioned element, positioned relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.

Absolute : Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.

Got the point? Yes the element that have position relative will take itself relatively positioned based on our request and its previous elements while absolute will take itself absolutely positioned based on our request where it must be positioned in our webpage.

Top, Left, Bottom or Right
So we can use the absolute position to put our any elements in the webpage accordance to our wishes, at this point we can use another properties such as top, left, bottom or right, unfortunately if we use these properties our element will relatively positioned with the document, then the question is how to make the element relatively positioned to the other element? In simple words our absolutely positioned element’s position will be limited by another element.

The question can be solved by bind the absolutely positioned element with relatively positioned element, the last element will automatically being a limiter to its absolutely positioned content and this is the advantage of engaging them. We can easily manipulate any elements to absolute position with limitation.

HTML

CSS

#container {
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	min-height: 100px;
	background: #fff;
	padding: 5em 5em 5em 8em;
	text-align: center;
	position: relative;
}

.new {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	height: 108px;
	width: 108px;
	background: url('images/new.png') top left no-repeat;
}

.sticky {
	position: absolute;
	left: 6px;
	top: 120px;
	display: block;
	height: 213px;
	width: 218px;
	background: url('images/sticky.png') top left no-repeat;
}

.get-pro {
	position: absolute;
	right: 0;
	top: -21px;
	display: block;
	height: 185px;
	width: 90px;
	background: url('images/get-pro.png') top left no-repeat;
}

The script above will generate three elements with absolutely positioned and one element with relatively positioned, for setting these three elements position we manipulate its left, right or top properties and they will overlapping its container element that relatively positioned. We can use this tecnique (for example) to display stacked-random element, overlapping element from its container, etc.

That’s it, thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

jsPlumb is a jQuery plugin aim to help us connect every elements with “plumbing”, very useful for us as web developer or designer to create for example blocks node, hierarchical sitemap or even randomized blocks with connected each other. jsPlumb using advantages of Canvas element and for browser-supported issue solved by using Google’s ExplorerCanvas script.

This plugin works on most common browser including Firefox, Chrome, Safari, Opera and IE (with Google’s ExaplorerCanvas). See this, this and this demo to see how jsPlumb beautifully works.

You must be familiar with css button with hovered and pressed-style, we always meet them around the internet world with ease. Fortunately, we can make them with a very simple css technique. By using built-in css pseudo selector (:hover and :active) we can manipulate a boring link navigator into a cute one.

As i said before we’ll use css pseudo selector, :hover and :active. :hover is a pseudo-selector to read user’s hovering action to our element while :active read pressing action. To make the button we need button image sprites as the background image, the image sprites divided into three states : normal state, hover state and press state.

We’ll put the image sprite as background image and play it’s position based on the user action, for example in the normal state the background image position will be set to ‘top left‘, hover state set to ‘center left‘ and press state set to ‘bottom left‘. These setted position will automatically set our background image position as our request.

We’ll set the html into following script :

This is a Yellow Button

And the last script is CSS :

.yellow-button {
	display:block;
	width: 201px;
	height: 46px;
	padding: 21px 0 0 0;
	background: url('images/yellow-button.png') top left no-repeat;
	margin-bottom: 2em;
	margin-right: 2em;
	float: left;
}

	.yellow-button:hover {
		background-position: center left;
	}

	.yellow-button:active {
		background-position: bottom left;
		padding-top: 22px;
	}

Ok, that’s it, thank you for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated