/ آموزش ساخت اشکال ( Shape ) با استفاده از CSS
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 3 از 3

موضوع: آموزش ساخت اشکال ( Shape ) با استفاده از CSS

  1. #1
    A.YOU.L آنلاین نیست.
    A.YOU.L
    کاربر فعال و مفيد
    45نوشته92مورد پسند

    تاریخ عضویت
    Feb 2013
    شماره عضویت
    615
    پسندیده است
    67 پست
    بلاگ
    پست
    میزان امتیاز
    102
    No Set

    آموزش ساخت اشکال ( Shape ) با استفاده از CSS

    سلام به کاربران عزیز

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    آموزش ساخت Shape های مختلف با استفاده از Css رو براتون آماده کردم که میتونید استفاده خیلی خوبی از این دستورات در طراحی استایل ها داشته باشید.

    مربع :

    کد:
    .square { width: 250px; height: 250px; background: #f05e5e; }
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 250px; height: 250px; background: #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مستطیل :

    کد:
    .rectangle { width: 350px; height: 250px; background: #f05e5e; }
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 350px; height: 250px; background: #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    دایره :

    کد:
    .circle { width: 250px; height: 250px; background: #f05e5e;-moz-border-radius: 200px; -webkit-border-radius: 200px; border-radius: 200px; }

    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 250px; height: 250px; background: #f05e5e;border-radius: 200px;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    بیضی :

    کد:
    .oval { width: 450px; height: 250px; background: #f05e5e;-moz-border-radius: 450px / 250px; 	-webkit-border-radius: 450px / 250px;border-radius: 450px / 250px; }
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 450px; height: 250px; background: #f05e5e;border-radius: 450px / 250px;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث :

    کد:
    .triangle { width: 0px; height: 0px;border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 250px solid #f05e5e;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 0px; height: 0px;border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 250px solid #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( پایین ) :

    کد:
    .triangle { width: 0px; height: 0px;border-left:  150px solid transparent; border-right: 150px solid transparent;  border-top: 250px solid #f05e5e;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div  style="width: 0px; height: 0px;border-left: 150px solid transparent;  border-right: 150px solid transparent; border-top: 250px solid  #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( چپ ) :


    کد:
    .triangle { width: 0px; height: 0px;border-top: 150px solid transparent; border-bottom: 150px solid transparent; border-right: 250px solid #f05e5e;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 0px; height: 0px;border-top: 150px solid transparent; border-bottom: 150px solid transparent; border-right: 250px solid #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ


    مثلث ( راست ) :

    کد:
    .triangle { width: 0px; height:  0px;border-top: 150px solid transparent; border-bottom: 150px solid  transparent; border-left: 250px solid #f05e5e;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div style="width: 0px; height: 0px;border-top: 150px solid transparent; border-bottom: 150px solid transparent; border-left: 250px solid #f05e5e;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( بالا-چپ ) :

    کد:
    .triangle { width: 0px; height: 0px;border-top: 150px solid #f05e5e; border-right: 150px solid transparent;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div  style="width: 0px; height: 0px;border-top: 150px solid #f05e5e; border-right: 150px solid transparent;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( بالا-راست ) :

    کد:
    .triangle { width: 0px; height: 0px;border-top: 150px solid #f05e5e; border-left: 150px solid transparent;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div  style="width: 0px; height: 0px;border-top: 150px solid #f05e5e; border-left: 150px solid transparent;"></div>

    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( پایین-چپ ) :

    کد:
    .triangle { width: 0px; height: 0px;border-bottom: 150px solid #f05e5e; border-right: 150px solid transparent;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div  style="width: 0px; height: 0px;border-bottom: 150px solid #f05e5e; border-right: 150px solid transparent;"></div>
    ـــــــــــــــــــــــــ ــــــــ

    مثلث ( پایین-راست ) :

    کد:
    .triangle { width: 0px; height: 0px;border-bottom: 150px solid #f05e5e; border-left: 150px solid transparent;}
    برای نمایش نتیجه به آدرس http://www.wikivb.ir/editor.html رفته و کد زیر رو در ادیتور کپی کنید :

    کد:
    <div  style="width: 0px; height: 0px;border-bottom: 150px solid #f05e5e; border-left: 150px solid transparent;"></div>
    این پست آپدیت خواهد شد...

    15 نفر از اعضا پست A.YOU.L را پسندیده اند



    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. نوين وردپرس تبلیغات شما

  3. #2
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir
    بسیار تاپیک عالی هست واقعا ممنون

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    3 نفر از اعضا پست The Ph@ntom را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

  4. #3
    gafas آنلاین نیست.
    gafas
    کاربر سايت
    6نوشته2مورد پسند

    تاریخ عضویت
    Feb 2013
    شماره عضویت
    520
    پسندیده است
    2 پست
    بلاگ
    پست
    میزان امتیاز
    12
    forum.likeface.ir

    قلب

    خيلي عالي
    ولي مورد قلب و ستاره رو نديدم ميشه زحمت اونو هم بكشيد!‌

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

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

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

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

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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