سلامدوستان چطوری میشه گوشه های یه پنل رو گرد کرد (از حالت شکسته به حالت کمانی تبدیل کرد)ممنون
Printable View
سلامدوستان چطوری میشه گوشه های یه پنل رو گرد کرد (از حالت شکسته به حالت کمانی تبدیل کرد)ممنون
برای این کار فقط راهی که وجود داره اینه که از جدول یا div استفاده کنی و چهار تا لبه اون را از عکس لبه گرد به عنوان پس زمینه استفاده کنی !!!!!:لبخند:
مشکل اینجاست که من چندتا از این پنلها در صفحه اصلیم دارم و اگه بخوام از عکس استفاده کنم حجم فایلم بالا میره و باید دو ساعت بشینم تا برنامم لود بشه!!!!!!؟
اگه از پنل asp.net استفاده میکنی خودش در IE نیمچه گرده اما در Firefox ببینی چهارگوشه
تنها راهش استفاده از عکسه
از چه کد HTML و CSS ای استفاده می کنه که این شکلی میشه؟!!نقل قول:
اگه از پنل asp.net استفاده میکنی خودش در IE نیمچه گرده اما در Firefox ببینی چهارگوشه
هر دو کد تولید شده html مشابه هستن اما در دو مرورگر متفاوت نشون داده میشن !نقل قول:
از چه کد HTML و CSS ای استفاده می کنه که این شکلی میشه؟!!
http://i4.tinypic.com/7y6tvza.gif
<div>
<div id="Panel1" style="height:50px;width:203px;text-align: left">
<fieldset>
<legend>
Title
</legend>
<br />
</fieldset>
</div>
نه عزیز هیچ تاثیری روی حجم نداره !!نقل قول:
نوشته شده توسط hesam_hma
فقط باید از چهار تا عکس 1 کیلو بایتی استفاده کنی که وفتی یک بار لود بشه کافیه و می تونی توی 100 پنل استفاده کنی !!
باید فقط چهار تا گوشه عکس بزاری و بقیه رو از border و css کمک بگیری !!!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
.My_Form_Login
{
background-color:#f9f9f9;
}
.My_FT_L
{
height:4px;
width:4px;
background-image:url(Set.gif);
}
.My_FT_R
{
height:4px;
width:4px;
background-image:url(Set.gif);
background-position:right top;
}
.My_FB_L
{
height:4px;
width:4px;
background-image:url(Set.gif);
background-position:left bottom;
}
.My_FB_R
{
height:4px;
width:4px;
background-image:url(Set.gif);
background-position:right bottom;
}
.My_F_BR_R
{
border-right:solid 1px #656565;
}
.My_F_BR_L
{
border-left:solid 1px #656565;
}
.My_F_BR_T
{
border-top:solid 1px #656565;
}
.My_F_BR_B
{
border-bottom:solid 1px #656565;
}
table
{
direction:rtl;
font-size:8pt;
font-family:tahoma;
}
</style>
</head>
<body>
<table class="My_Form_Login" cellpadding="0" cellspacing="0">
<tr>
<td class="My_FT_R"></td>
<td class="My_F_BR_T"> </td>
<td class="My_FT_L"></td>
</tr>
<tr>
<td class="My_F_BR_R"> </td>
<td>پنل لبه گرد <br>قابل استفاده برای هر محیط</td>
<td class="My_F_BR_L"> </td>
</tr>
<tr>
<td class="My_FB_R"></td>
<td class="My_F_BR_B"> </td>
<td class="My_FB_L"></td>
</tr>
</table>
</body>
</html>
فایل ضمیمه رو دانلود کنید بهتری چون پس زمینه آون هم هست که به 1 کیوبایت هم نمی رسه !!!!!! :چشمک:
دانلود پنل لبه گرد
لازم به ذکر که توی 99999 هزار مرورگر موجود هم کار می کنه :D
نه، این ربطی نداره. فقط توی IE فلان المنت گوشه هاش گرد نمایش داده میشه!! ممکنه IE8 بیاد باز تیز بشه. یعنی فقط بحث رندرینگه.نقل قول:
هر دو کد تولید شده html مشابه هستن اما در دو مرورگر متفاوت نشون داده میشن !
مثل اینه که من بگم الان فایرفاکس ۳ گوشه های المنت های فرم (مثل تکست فیلد) رو گرد نشون میده!!! این فقط بحث رندرینگه و اهمیتی نداره.
در مورد گرد کردن هم تا جایی که من می دونم ۴ راه هست:
۱- همونی که رضا گفت :)
۲- استفاده از CSS های اضافی که مثلا فقط توی فایرفاکس درست کار می کنند (و البته مخصوص این شرکت هم هستند و من تو صفحهء اصلی سایتم ازش استفاده کرده بودم)
مثل:
-moz-border-radius: 10px;
۳- استفاده از فقط CSS (بدون تصویر) که توی همهء مرورگر ها درست کار می کنه اما برای «هر» border ی نمی شه ازش استفاده کرد (البته روش اول هم برای هر border ی کار نمی کنه)
مثال:
http://www.html.it/articoli/nifty/nifty1.html
۴- استفاده از CSS3:
http://www.w3.org/TR/2005/WD-css3-ba...-border-radius
شاید فعلا روش سوم رو توصیه کنم :)
موفق باشید.
منم دارم میگم تفاوت فقط در مرورگرهاست ! حالا شما میفرمایید ربطی نداره منم ربط حرف شما رو نفهمیدم !نقل قول:
نه، این ربطی نداره. فقط توی IE فلان المنت گوشه هاش گرد نمایش داده میشه!! ممکنه IE8 بیاد باز تیز بشه. یعنی فقط بحث رندرینگه.
مثل اینه که من بگم الان فایرفاکس ۳ گوشه های المنت های فرم (مثل تکست فیلد) رو گرد نشون میده!!! این فقط بحث رندرینگه و اهمیتی نداره.
سلام
من کد جاوا اسکریپت این کارو دارم البته یه کم خاص و پیچیده طراحی شده اگر تمایل داشتین ایمیل بزارین SEND کنم چون یه بار یه کد رو که خیلی هم کمیاب بود توی همین سایت گذاشتم ولی متاسفانه به نام کسه دیگه ای تموم شد (البته هزینه و وقت منو گرفته بود)
برای همین خواهش میکنم اگر کد رو گرفتین برای استفاده شخصی خودتون استفاده کنید و جایی افشاش نکنید به قول معروف CopyRight
با سلام به همه دوستان
بیا اینم کد یه panel با css که نیازی به عکس هم نداره
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>table001</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:12px;}
.curvy {position:relative; width:200px; height:70px; background:#eeb51a; color:#000; margin:1em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#eeb51a; background:#fff;overflow:hidden;}
#ctl {top:0px; left:0px;}
#cbl {top:50px; left:0px;}
#ctr {top:0px; left:180px;}
#cbr {top:50px; left:180px;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:#eeb51a;line-height:40px;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-18px;}
#quadbr {left:-25px; top:-18px;}
#text {position:absolute; top:5px; left:5px; width:180px; height:70px; color:#fff;}
</style>
</head>
<body>
<div class="curvy">
<div id="ctl"><div id="quadtl">•</div></div>
<div id="cbl"><div id="quadbl">•</div></div>
<div id="ctr"><div id="quadtr">•</div></div>
<div id="cbr"><div id="quadbr">•</div></div>
<div id="text">
<p align="center">No Images.<br>
<br>
Text in a div.
</p>
</div>
</div>
</body>
</html>
موفق باشید
You Are Perfect
سلام
کد جالبیه ولی مشکلی که داره اینه که درجه ARC رو نمیشه تنظیم کرد.ولی درکل روش جالبیه
ممنون
خیلی با روشش حال کردم ... کار خودشه نه ؟!!!!
اینم یه نگاه بندازین :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="background-color:silver;width:100px;height:100px;">
<div id="angle" style="position:absolute;top:0px;">
</div>
</div>
<script>
var d=document;
var angle=d.getElementById("angle");
var e=0.02
for(i=0;i<=.5;i+=.03){
var div=d.createElement("div");
div.style.width=e+"cm";
div.style.height=Math.sqrt(.25-i*i)+"cm";
div.style.backgroundColor="white";
div.style.styleFloat="left";
div.style.overflow="hidden";
angle.appendChild(div);
}
</script>
</body>
</html>
musiox
سلام
روشت خیلی عالیه هیچ نقصی هم توش نیست.
ببین این الان تو پر میسازه میشه فقط border بهش داد؟
خیلی کار جالبی کردی !!! فکرش رو نمی کردم که کارکتر بالت یک همچین کار جالبی بتونه بکنه !!!! ولی من خواستم کوچیکش کنم خیلی سخته !!! ولی در کل :تشویق: ایول !نقل قول:
نوشته شده توسط scorpion_man
با سلام به همه دوستان
فکر نمیکردم اینطوری استقبال بشه من در مورد گرد کردن کدهای زیادی دارم که یا خودم نوشتم یا سورسش رسیده چون 3 ساله پیش منم عاشق گرد کردن بودم هر لایه ای دستم میرسید گردش میکردم
اینم یه نمونه کد دیگه که میشه بصورت فقط border هم استفاده کرد
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>border003</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2em; color:#000000;}
#xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#e0e0e0; border-left:1px solid #a32118; border-right:1px solid #a32118;}
.xb1 {margin:0 5px; background:#a32118;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#e0e0e0; border:0 solid #a32118; border-width:0 1px;}
</style>
</head>
<body>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Scorpion_man</h1>
<h2>Barnamenevis.org</h2>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div></body>
</html>
بازم خواستین خبر بدین
موفق باشین
نقل قول:
نوشته شده توسط scorpion_man
کارتون واقعا فوق العاده بود...........
یه سوال
تو IE و فایر فاکس کار میکنه. تو بروزرهای دیگه هم چکش کردید ؟؟؟؟؟؟؟
با سلام به دوستان عزیز
بله تو هر browseri چک شده و کار میکنه
موفق باشید