Mavenous Studios : Code Labs

Shadow offset bottom right

#box_a { 
	-moz-box-shadow: 8px 8px 2px rgba(0, 120, 155, 0.5);
	-webkit-box-shadow: 8px 8px 2px rgba(0, 120, 155, 0.5);
}

Shadow blurred and enlarged Enlarge Firefox only

#box_b { 
	-moz-box-shadow: 0 0 4px  5px rgba(0, 120, 155, 0.5);
	-webkit-box-shadow: 0 0 8px  rgba(0, 120, 155, 0.5);
}

Multiple shadows and effects.

Multiple shadows can be defined by separating each with a comma.

#box_c { 
	-moz-box-shadow: 0 0 2px 1px rgba(255,255,255,0.5), 
		0 0 4px 1px rgba(0,0,0,1), 
		3px 5px 3px 4px rgba(0, 120, 155, 0.5), 
		-3px -5px 3px 4px rgba(0, 120, 155, 0.5);

	-webkit-box-shadow: 0 0 2px rgba(255,255,255,0.5), 
		0 0 4px rgba(0,0,0,0.7), 
		3px 5px 3px rgba(0, 120, 155, 0.55), 
		-3px -5px 3px rgba(0, 120, 155, 0.55);
}


Copy to Clipboard