تبريك + مستطيل گوشه گرد

[a.gh.n]

سلام!
اول تبريك به مناسبت اين فرم
بعدش آقا حسين echeess/ زحمت كشيدن آموزش ساخت مستطيل گوشه گرد رو دادن!
من خوندم ولي نتونستم اجراش كنم!
حالا هم كه فرم تخصصي css اومد (يا شايدم اومده بود) من خواستم از اينجا بپرسم ببينم كدشون درسته كامل؟

 

[Elfin-D]

سلام
دوست عزيز
شما سه راه داريد
استفاده از css3 كه البته هنوز برخي از بروزرها اون رو ساپورت نميكنن
استفاده از اموزش ي كه البته گفتيد نتونستيد اجراش كنيد
اجراي اموزش بنده:
اين روش رو بساري از سايتهاي بزرگ مثل ياهم براي گرد كردن گوشه هاي مستطسلي استفاده مينكنن
فرض كنيد شما چهر گوشه داريد به نامهاي:
.tr
.tl
.br
.bl
كه به ترتيب گوشه هاي سمت چپ و راست بالا و پايين رو مشخص ميكنند
اين كدهاي كه مربوط به كليت گوشه ها هست رو در قسمت استايلهاي صفحتون كپي كنيد:

.tr, .tr .tl, .br, .br .bl {
	display:block;
	font-size:0;
	line-height:0;
	margin:0;
	height:6px;
	position:relative;

}

اين كدها با فرض اين هستند كه ارتفاع عكس شما 6 پيكسل و سل پد 2 پيكسل هست
كدهاي زير مربوط به ريز جزءهاي گوشه ها هست كه ادرس عكسها و ديگر مشخصات اونها درش مشخصه:

.tr, .br {width:100%;right:-2px}
.tr .tl, .br .bl{width:100%;left:0px;left:-4px }
.tr{
background:transparent url(top right image address) no-repeat  bottom right;top:+2px}
.tr .tl{
background:transparent url(top left image address) no-repeat  bottom left;}
.br{
background:transparent url(bottom right image address) no-repeat  bottom right; top:-2px}
.br .bl{
background:transparent url(bottom left image address) no-repeat  bottom left;}

حالا كافيه در ابتدا و انتهاي تيبل خودتون از تگهاي div به صورت زير استفاده كنيد:

  <table border="0" cellspacing="0" cellpadding="2">
            <tr>
              <td><span class="tr"><span class="tl"></span></span>Your data<span class="br"><span class="bl"></span></span></td>
            </tr>
          </table>

موفق و پيروز باشيد

 

[a.gh.n]

ممنون ولي مثل اين كه شما از اين كد ها استفاده كردين كه چندتا عكس داره كه گوشه هاش گرده!
ولي من كد cssبدون نياز به عكس رو لازم داشتم! ;-)

 

[Elfin-D]

دوست عزيز
اون اموزشي رو كه شما فرموديد هم با استفاده از عكس بود!بدون عكس ممكن نيست مگر با استفاده از css3

 

[a.gh.n]

فكر نمي كنم!
يه بار بريد به : http://forum.majidonline.com/showthread.php?t=56018
من قبلا" هم تو سايت محسن طالب تيتر آموزش ش رو ديده بودم كه اتفاقا" جزو پر بازديد ترين ها بود ولي بالا نمياد ديگه!

 

[Elfin-D]

شما ميتونيد براي ff opera , ... از css3 استفاده كنيد و به وسيله ي لينكي كه داديد(البته به شكل ديگه اي)براي ie از عكس استفاده كنيد
اين رو هم بگم كه اگر روشي بهتر از اين موجود بود هيچ وقت ياهم از اين روش استفاده نميكرد
مرسي از توجه شما

 

[a.gh.n]

ياهم ؟؟؟
منظورتون رو متوجه نشدم!!

 

[Elfin-D]

ياهو هم(ادغام شد:دي)

 

[a.gh.n]

خوب ياهو كجاي سايتش از css استفاده كرده كه اينجا استفاده كنه؟؟؟

 

[tabib_m]

مگه ياهو هميشه از بهترين ها استفاده ميكنه؟
روي چه اساسي بايد از ياهو برداشت بهترين ها رو كرد؟

 

[Ali_ix]

برای کادرهای لبه گرد بدون عکس یا باید از خصوصیات vendor specific مثل -moz-border-radius و ... استفاده کنید.
یا اینکه خودتون رو بکشید و با کلی کد نویسی اضافی پیکسل به پیکس اون لبه گرد مورد نظرتونو بازسازی کنید.

مثلا میتونید div های یک پیکسلی داشته باشید و کنار هم بچینید ! (برای یک گوشه)
یا اگر میخواید دو سر سک کادر گرد بشه میشه بسته به مقدار گردی مورد نظر n تا div داشت که به ترتیب یک پیکسل - یک پیکسل (یا شادیم دوتا دوتا) عرضشون کم بشه و چنین حالتی ایجاد کنه....

ولی کلا نسبت به انرژی و وقتی که میبره اصلا توجیه عقلی نداره که از این روش دوم استفاده بشه. (مگر برای نشون دادن قدرت طراحی یا یک نکته و تکنینک خاص در خلال این موضوع)

/

من شخصا اگر خیلی برام مهم باهش که لبه گرد داشته باشم از چهار div تو در تو با عکس استفاده میکنم...
اگر هم زیاد برام مهم نباشه از همون moz استفاده میکنم.

موفق باشید

 

[mazoolagh]

سلام استاد
من هم از همون تکنیک قدیمی class همراه با کد جاوااسکریپت استفاده میکنم و چون کاملا" پارامتری هست هیچ تغییری در طراحی اصلی لازم نداره.

 

[mazoolagh]

ضمنا" غیر از گرد کردن پخ هم میشه زد!

 

[a.gh.n]

دستت درد نكنه علي آقا

 

[Ali_ix]

سلام استاد
من هم از همون تکنیک قدیمی class همراه با کد جاوااسکریپت استفاده میکنم و چون کاملا" پارامتری هست هیچ تغییری در طراحی اصلی لازم نداره.

استاد شما از همون قدیم کارتون خیلی درست بوده .... الان دیگه درست تر !

ما رو از این گنجینه کدهای به درد بخور جاوا اسکریپتتون بی نصیب نگذارید !

 

[amirlol]

من که نفهمیدم آخرش لیلی زن بود یا مرد

 

[siavashmusic]

برای نیجه بخش بودن اموزش های اینچنینی مثال +فایل های پیوست شده رکن مهمی هستند شما خیلی کلی توضیح دادید دوستانی که اشنایی ندارد نمیتونند کار کنند
اکثر اوقات دوستان نیازمند رفع مشکل هستند تا یادگیری اونوقت بدون اطلاعات اولیه و چنین اموزش کلی (رو به حرفه ای) مسلما نمیتونند بهره کوچکی از این زحمات شما ببینند

پیوست:این انجمن رو توی توضیحات مدیر کل انجمن دیدم ایجاد شده منم یه جورایی دستی بر Css دارم یعنی یه جورایی خیلی دوسش دارم انشالله کم کم آموزش ها شروع میشه

 

[mazoolagh]

آموزش چی؟

 

[mehdi_25]

ببخشید ها ولی چی شروع میشه ؟

مگه تا حالا شروع نشده
منظور شما اینه که بچه هایی که آموزش میدن مثال هایی مرتبط هم به صورت فایل اینجا بزارن ؟ آره ؟

 

[amirlol]

داش مهدی با اینکه از قیافت می ترسم میگم ولی
اینو خوب اومدی