Drop Shadows using images – works on all browsers

Drop Shadows using images – works on all browsers

by | Apr 4, 2012 | Software Development

Drop shadow is a very common thing widely used in web designs to make them attractive and pleasant. There are many ways to implement this design in websites.

One of most working implementation for all browsers, is the use of tranparent png images adjusted across the edges of target box. For this, you have to draw a box with shadow and slice it in Adobe Photoshop. You can learn this thing at http://designlovr.com/photoshop-quicktip-2-shadows/

Let see the example for the implementation in webpage.

#page {
	position: relative;
	background: white;
	display: inline-block;
	border: 1px solid;
	margin: 26px 20px 26px;
}
.top-edge {
	background: url("../images/top-edge.png") repeat-x scroll left top
		transparent;
	display: block;
	height: 23px;
	position: absolute;
	top: -12px;
	width: 100%;
}
.left-edge {
	background: url("../images/left-edge.png") repeat-y scroll left top
		transparent;
	display: block;
	height: 100%;
	position: absolute;
	top: 0px;
	left: -14px;
	width: 15px;
}
.right-edge {
	background: url("../images/right-edge.png") repeat-y scroll left top
		transparent;
	display: block;
	height: 100%;
	position: absolute;
	top: 0px;
	right: -14px;
	width: 15px;
}
.bottom-edge {
	background: url("../images/bottom-edge.png") repeat-x scroll left top
		transparent;
	display: block;
	height: 23px;
	position: absolute;
	bottom: -12px;
	width: 100%;
}
.top-left-corner {
	background-image: url("../images/top-left-corner.png");
	background-repeat: no-repeat;
	display: block;
	top: -12px;
	left: -14px;
	height: 23px;
	width: 15px;
	position: absolute;
}
.top-right-corner {
	background-image: url("../images/top-right-corner.png");
	background-repeat: no-repeat;
	display: block;
	top: -12px;
	right: -14px;
	height: 23px;
	width: 15px;
	position: absolute;
}
.bottom-left-corner {
	background-image: url("../images/bottom-left-corner.png");
	background-repeat: no-repeat;
	display: block;
	bottom: -12px;
	left: -14px;
	height: 23px;
	width: 15px;
	position: absolute;
}
.bottom-right-corner {
	background-image: url("../images/bottom-right-corner.png");
	background-repeat: no-repeat;
	display: block;
	bottom: -12px;
	right: -14px;
	height: 23px;
	width: 15px;
	position: absolute;
}

 


<div id="page" align="center">
	
<div class="top-edge"></div>

	
<div class="left-edge"></div>

	
<div class="right-edge"></div>

	
<div class="bottom-edge"></div>

	
<div class="top-left-corner"></div>

	
<div class="top-right-corner"></div>

	
<div class="bottom-left-corner"></div>

	
<div class="bottom-right-corner"></div>


	
<div id="content"> Shadow Sample </div>

</div>

Remember, the box(HTML ELEMENT) for that you want shadow, must have CSS property ‘position: relative;’ and the shadow ELEMENT must be positioned absolutely ‘position: absolute;’. You can adjust the position using left,top,bottom,right css properties. You can also use IMG for this thing with absolute position but that will not a good idea because if image loading fails then your design may be distorted.

The above way is a very time consuming way of implementing the shadow but good thing is, it works fine in all browsers. but you need to slice the images very carefully and always try to decrease the size of image so that loading time should not be affected. Now, Shadows are supported in CSS also but compatibility is a issue for them, because different versions of Internet explorer make problem with them.

My Computer doesn’t have GPS but maps.google.com can mark my current location. Amazing!!!

My Computer doesn’t have GPS but maps.google.com can mark my current location. Amazing!!!

by | Feb 25, 2012 | Software Development

I found out this thing when I was seeing a contact webpage of a computer shop. Unintentionally, I clicked on “Get Direction” button and it asked for the permission to share my location information with the maps.google.com, I grant it then Google maps showed my current location with the difference of 15 to 20 feet as normally seen in GPS devices. I opened the guide of my laptop and searched about GPS or other location sensor device but didn’t find anything related to this topic. I went to my old PC and try this thing and it gives me the same location. This thing was amazing to me. A simple idea came to my mind that it would probably be a topic of IP Addressing but how? This question is very important. I tried this on Firefox too. Firefox asked for permission and there was also a link about geolocation http://www.mozilla.org/en-US/firefox/geolocation/. I went through it and find that my simple idea was right.
Firefox geolocation guide says about its working,
“Firefox gathers information about nearby wireless access points and your computer’s IP address. Then Firefox sends this information to the default geolocation service provider, Google Location Services, to get an estimate of your location. That location estimate is then shared with the requesting website.”

The most important thing for consideration is that if we are tracking by unauthorized parties? so, the answer is “NO” as stated in the guide,

“Firefox only requests a location when a website makes a request, and only shares your location when the user has approved the request. Firefox does not track or remember your location as you browse.”

Read this link for more information http://www.mozilla.org/en-US/firefox/geolocation/.

Now, Let’s play with a javascript code,
In Google Chrome, press Crtl + J and enter this code in console. It will ask for permission and display you an object in console with your longitude and latitude.

navigator.geolocation.getCurrentPosition(function(position){
console.log(position);
});

You can use this in your web applications to implement functionalities related to geolocation.
Read this link for more information about the working http://compnetworking.about.com/od/traceipaddresses/f/ip_location.htm.