تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 2 از 2

موضوع: آموزش گردبر کردن گوشه های کادر

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    5.1.5
    سن
    20
    نوشته ها
    4,060
    مورد پسند
    2,642 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 17.0
    میزان امتیاز
    463

    پیش فرض آموزش گردبر کردن گوشه های کادر

    تا همین چند وقت پیش اگر می خواستیم در روی یک سند HTML یک کادر مربع شکل که گوشه های اون گرد شده باشند رو ترسیم کنیم باید شکل مورد نظر رو در محیط هایی مانند فتوشاپ رسم می کردیم و بصورت عکس، بعد از آپلود از اون استفاده می کردیم البته مسئله حجم فایل و لود صفحه هم همیشه مطرح بوده
    در CSS3 این مشکل با استفاده از کد radius حل شده به کادرهای زیر نگاه کنید


    تمامی این کادرها در واقعه یک لایه (DIV) معمولی می باشند که با استفاده از پارامتر radius و قرار دادن اعداد مختلف بدست اومدند
    ما برای radius چهار گزینه داریم :

    border-top-left-radius: Apx Bpx;
    border-top-right-radius: Apx Bpx;
    border-bottom-right-radius: Apx Bpx;
    border-bottom-left-radius: Apx Bpx;
    توجه داشته باشید که در فرم بالا گزینه های Apx و Bpx در واقع اندازه شعاع دایره مورد نظر در روی هر ظلع هستند وقتی برای پارامتر border-top-left-radius عدد می گذاریم برای دو ظلع بالا و چپ اندازه شعاع را تعریف می کنیم اگر یک اندازه تعریف کنیم نمایشگر طول دو شعاع رو برابر تشخیص داده و دایره ای مورد نظر را ترسیم می کند ولی با گذاردن اعداد نا برابر نمایشگر شکلی شبیه به بیضی نمایش می دهد

    نمونه ی 1 و 2 را با دقت ببینید :
    کد نمونه 1
    border-top-left-radius: 50px 100px; کد نمونه 2
    border-top-left-radius: 100px; وبسایت آموزشی W3Schools Online Web Tutorials امکان تمرین آنلاین با این کد را برای عموم قرار داده برای استفاده از این امکان کلیک کنید
    همچنین می توانید با مراجعه به آدرس CSS Border Radius Generator بصورت آنلاین و با جابجا کردن چند عدد یک کادر با لبه های گرد ترسیم کنید و کد رو از سایت گرفته و در وبلاگ خودتون قرار بدید
    من به ترتیب یک سری کد رو هم براتون می نویسم :

    کد:
    3:
     #cade3 { 
    		         		 border-top-left-radius: 100px;
    		         		 border-top-right-radius: 15px 15px; 
    		         		 border-bottom-right-radius: 100px;
     		          		 border-bottom-left-radius: 15px 15px;
     		 } 
    4:
     #cade4 { 
    		         		 border-top-right-radius:100px;
    		         		 border-bottom-right-radius:100px; 
     		 } 5:
     #cade5 { 
    		         		border-radius: 100px;
     		 } 6:
     #cade6 { 
    		         		border-radius: 15px;
     		 } 7:
     #cade7 { 
    		         		 border-radius:100px
     		 } 8:
     #cade8 { 
    		         		border-radius:80px;
     		 } 9:
     #cade9 { 
    		         		 border-radius:50px;
     		 } 10:
     #cade103 { 
    		         		 border-top-left-radius: 50px;
    		         		 border-bottom-right-radius: 50px; 
     		 }

    کاربر مقابل از Patch Master بابت این پست مفید تشکر کرده است:





  2. گیفت کارت آیتونز

  3. Top | #2
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Mac OS X Safari 5.1
    میزان امتیاز
    80

    پیش فرض

    تاييد شد ..
    Retired Mod <

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. آموزش آپگراید ویبولیتن ورژن 3 به 4 ( اموزش تصویری )
    توسط Reza در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 5
    آخرين نوشته: 2014/11/17, 09:38 PM
  3. اموزش روزشمار تولد به سبک وی بی ایران
    توسط Revenger در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 11
    آخرين نوشته: 2013/01/22, 08:02 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/06/01, 12:09 PM
  5. پاسخ: 0
    آخرين نوشته: 2012/01/13, 02:11 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •