My site + Mobile

ionutica · **My site + Mobile -** 07-14-2012, 05:57 AM

Ionut.freeiz.com supports smartphones and automaticaly redirects to mobi.ionut.freeiz.com.

Sogo7 · 07-15-2012, 01:43 PM

TIP# use a QR code to help mobile users get to the site without typing.
Google generates these special barcodes for free, just use the URL below to get a custom image.

Code:

https://chart.googleapis.com/chart?chs=220x220&cht=qr&chl=mobi.ionut.freeiz.com

ionutica · 07-15-2012, 04:59 PM

Thank you but i would like to put it in a beveled round box

Sogo7 · 07-15-2012, 07:14 PM

I can see you did your box with images, here is how to do it with CSS and add a shadow effect. Works with most web browsers and a live demo is here

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.bevelbox{
	width:220px;
	height:220px;
	background-image: url(https://chart.googleapis.com/chart?chs=280x280&cht=qr&chl=mobi.ionut.freeiz.com);
	border: 2px solid #006666;
	background-position: center center;

	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;

	-moz-box-shadow: 0px 0px 14px #444;
	-webkit-box-shadow: 0px 0px 14px #444;
	box-shadow: 0px 0px 14px #444;

	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
	
}

</style>

</head>

<body><div class="bevelbox"></div>


</body>
</html>

ionutica · 07-16-2012, 05:34 AM

But i done it with css i applyed your border-radius , box-shadow to the img tag i did it:
<!DOCTYPE HTML>
<html>
<style>
#app {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow: 0 0 25px #888;
-webkit-box-shadow: 0 0 25px#888;
box-shadow: 0 0 25px #888;

}
</style>

<img src="https://chart.googleapis.com/chart?chs=220x220&cht=qr&chl=mobi.ionut.freeiz.com " id="app">

ankitshahit · 07-16-2012, 09:42 AM

Quote:

Originally Posted by ionutica

But i done it with css i applyed your border-radius , box-shadow to the img tag i did it:
<!DOCTYPE HTML>
<html>
<style>
#app {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow: 0 0 25px #888;
-webkit-box-shadow: 0 0 25px#888;
box-shadow: 0 0 25px #888;

}
</style>

<img src="https://chart.googleapis.com/chart?chs=220x220&cht=qr&chl=mobi.ionut.freeiz.com " id="app">

Hi, friend there's an important thing while using a border-radius there should be a border-style.

kuroneko · 07-17-2012, 08:36 PM

For shadow box:

Code:

-moz-box-shadow:0 0 5px #555;
-webkit-box-shadow:0 0 5px #555;
box-shadow:0 0 5px #555;

For curved borders:

Code:

border:1px solid #ccc;

border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;

kuroneko · 09:23 PM

[double post]

khmh · 08-05-2012, 08:58 PM

nice soft btw, i like it