ورود

View Full Version : گرد کردن و سایه دادن به text box



saeidejafari
شنبه 03 بهمن 1388, 10:51 صبح
سلام بر همگی
من یه text box دارم که میخوام لبه هاش گرد باشه و یه سایه هم توش داشته باشه. از این سایت کد هاشو گرفتم ولی کار نمیکنه
http://www.cssportal.com/form-elements/text-box.htm
یعنی تلفیقی از Rounded Corners و Gradient 2. اینم کدم:


<!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>
<title>Example</title>
<style type="text/css">
/* Gradient 2 */
.tb7 {
width: 221px;
background: transparent url('etc/images/bg.jpg') no-repeat;
color : #747862;
height:20px;
border:0;
padding:4px 8px;
margin-bottom:0px;
}
/* Rounded Corner */
.tb5 {
background: url(etc/images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}

</style>
</head>
<body>
<input type="text" class="tb5" value="search" />
</body>
</html>

mahshid_3253
دوشنبه 17 تیر 1392, 14:56 عصر
کار نکرد که!!!!!!!

Beginner67
چهارشنبه 30 مرداد 1392, 17:18 عصر
کسی میتونه این سوال رو جواب بده؟مشکل منم هست.

دانیال دزفولی
چهارشنبه 30 مرداد 1392, 18:11 عصر
با border-radius: کارت حله

mehbod.rayaneh
چهارشنبه 30 مرداد 1392, 18:29 عصر
سلام
از این کد استفاده کنید :


<!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>
<title>Example</title>
<style type="text/css">
.tb5 {
height: 22px;
width: 230px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: inset 0px 0px 7px #000000;
-webkit-box-shadow: inset 0px 0px 7px #000000;
box-shadow: inset 0px 0px 7px #000000;
}
</style>
</head>
<body>
<input type="text" class="tb5" value="search" />
</body>
</html>

برای کم و زیاد کردن گردی گوشه ها باید این 3 مقدار را کم و زیاد کنید :

-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;

و برای کم و زیاد کردن و تغییر رنگ سایه هم باید این مقدار را کم و زیاد و کد رنگ را تغییر بدید :

-moz-box-shadow: inset 0px 0px 7px #000000;
-webkit-box-shadow: inset 0px 0px 7px #000000;
box-shadow: inset 0px 0px 7px #000000;

tadayoni
چهارشنبه 30 مرداد 1392, 18:38 عصر
برای گرد کردن گوشه ها از border-radius استفاده کن
همچنین برای سایه دادن به کادر از box-shadow
برای سایه دادن به متن هم از text-shadow

Beginner67
چهارشنبه 30 مرداد 1392, 19:36 عصر
اگر بخوام وقتی کلیک میکنم توی textbox دور کادر رنگ خاصی بگیره باید از چه تابعی استفاده کنم؟

دانیال دزفولی
چهارشنبه 30 مرداد 1392, 20:32 عصر
می تونی این کارو بکنی
id:focous}border:2px solid #000}


برای اینکه راحت تر متوجه شی یه کتاب مفید بخر درباره ی طراحی وب مقدماتی

دانیال دزفولی
چهارشنبه 30 مرداد 1392, 20:33 عصر
اگه هم باز سوال داشتی برو توی وبلاگم اگه بتونم جواب می دم

merikhiha.mihanblog.com

tadayoni
چهارشنبه 30 مرداد 1392, 20:41 عصر
توی این مقاله انواع روش ها رو کامل با مثال توضیح دادم
http://tadayoni.ir/sss/

Beginner67
چهارشنبه 30 مرداد 1392, 20:48 عصر
برا یه کار کوچیک فرصت کتاب خریدن و خوندن ندارم....لطفا یه راه بهتر بگید.

tadayoni
چهارشنبه 30 مرداد 1392, 21:41 عصر
این که کتاب نبود . مقاله کوچیکی بود که بخش به بخش بود
با شبه کلاس :active این کار رو انجام بدید