سلام دوستان.
من میخواستم بدونم چگونه میشود با CSS مثل این فایل login ضمیمه شده ایجاد نمود.
منظورم نمای مربع گرد میباشد:
Printable View
سلام دوستان.
من میخواستم بدونم چگونه میشود با CSS مثل این فایل login ضمیمه شده ایجاد نمود.
منظورم نمای مربع گرد میباشد:
یکی از راه هایی که وجود داره و عام ترین راه هم هست استفاده از تصاویر هست که که در background قرار میگیره که جناب tarhebartar هم بهش اشاره کردند.نقل قول:
من میخواستم بدونم چگونه میشود با CSS مثل این فایل login ضمیمه شده ایجاد نمود.
اما با css و html هم میشه همیچین چیزی رو در اورد. مثلا:
در روش بالا تعدادی div رو در هر سطر قرار میدیم که هر کدوم نسبت به قبلی یه مقدار داخل تر قرار میگیرن و ارتفاع هر div هم 1 پیکسل است. در کنار همدیگه اینا گوشه گرد رو می سازن. از این روش در صفحاتی که تعدادی div با گوشه کرد درشون زیاد هست نباید استفاده کرد چون حجم صفحه رو خیلی بالا میبره.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
.roundborder
{
height: 1px;
background-color: #b0c4de;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.row1
{
margin: 0 12px;
background-color: #000;
}
.row2
{
margin: 0 9px;
border-width: 0 3px;
}
.row3
{
margin: 0 7px;
border: 0 2px;
}
.row4
{
margin: 0 6px;
}
.row5
{
margin: 0 5px;
}
.row6
{
margin: 0 4px;
}
.row7
{
margin: 0 3px;
}
.row8
{
margin: 0 2px;
height: 2px;
}
.row9
{
margin: 0 1px;
height: 3px;
}
.content
{
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="roundborder row1"></div>
<div class="roundborder row2"></div>
<div class="roundborder row3"></div>
<div class="roundborder row4"></div>
<div class="roundborder row5"></div>
<div class="roundborder row6"></div>
<div class="roundborder row7"></div>
<div class="roundborder row8"></div>
<div class="roundborder row9"></div>
<div class="roundborder content">
test
</div>
<div class="roundborder row9"></div>
<div class="roundborder row8"></div>
<div class="roundborder row7"></div>
<div class="roundborder row6"></div>
<div class="roundborder row5"></div>
<div class="roundborder row4"></div>
<div class="roundborder row3"></div>
<div class="roundborder row2"></div>
<div class="roundborder row1"></div>
</body>
</html>
خصوصیت moz-border-radius- هم توسط firefox پشتیبانی میشه که همین کار رو میکنه:
خصوصیات برای گرد کردن گوشه های خاص:
-moz-border-radius: 20px;
کلا میشه جلوه های قشنگی رو در اورد باهاش.
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
این تو یه سایت دیده بودم:
اما متاسفانه فعلا همش مال firefox هست.
border-radius خاصیتی مال css3 هست که فعلا روی opera , ie , ff پشتیانی نمیشه.
تشکر از همه دوستان که مرا درین زمنیه رهنمایی مفید نمودند ....
ابن تاپیک قدیمیه
ولی border-radius رو الان همه ساپورت میکنن
border-radius.com
اگه بخوای گوشه ی گرد ایجاد کنی بهتره از عکس استفاده کنی چون برخی مرورگر ها به خصوص نسخه های پایین تر از این امکان پشتیبانی نمی کنن.
The border-radius property is supported in Opera, Chrome, and Safari.
Firefox supports an alternative, the -moz-border-radius property.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background:#CCCCCC;
}
div{
height:300px;
width:300px;
margin:0 auto;
background:#006699;
border:2px solid;
-moz-border-radius:10px; /* Firefox */
border-radius:10px;
}
</style>
</head>
<body>
<div>Hello This is just a test</div>
</body>
</html>
با سلام
دوست عزیز من از کد شما استفاده کردم ولی برای خط آخر ایراد میگیره و میگه border-radius در css2.01 قابل شناسایی نیست .
این کدها در IE کار می کنند؟
با تشکر
این قابلیت ماله css3 هست و برای پشتیبانیش باید از مرورگر های جدیدی چون ff3.6 یا ie9 استفاده کرد ولی یک سری تکنیک ها هست که میشه این مشکل رو حل کرد اسمش css3 pie هست اینجا میتونید روش این تکنیک رو یاد بگیرید:نقل قول:
نوشته شده توسط araelectronic@ymail.com
http://saleh.soozanchi.ir/blog/1389/...rnet-explorer/
http://1webgard.ir/pie/
برای اطلاعات بیشتر در مورد border radius:
https://barnamenevis.org/showthread.p...ن-تصویر
نقل قول:
نوشته شده توسط webpower
دوست عزیز ممنون از جوابتون . برای رفع ارور در برنامه چیکار باید بکنم ؟ من از vs2010 استفاده می کنم .
چطوری css3 را اظافه کنم ؟
البته html5 را اضافه کردم علاوه از اینکه ارور درست نشد برای بقیه تگها هم warning میده .
با تشکر