نمایش نتایج: از شماره 1 تا 4 , از مجموع 4

موضوع: آموزش ساخت اشکال مختلف با استفاده از css

  1. #1
    کاربر اخراج شده
    تاریخ عضویت
    Sep 2011
    محل سکونت
    همین جا و هر جا
    نوشته ها
    65
    تشکر تشکر کرده 
    18
    تشکر تشکر شده 
    57
    تشکر شده در
    30 پست

    Post آموزش ساخت اشکال مختلف با استفاده از css

    چگونه از این کدها استفاده کنم ؟

    برای نمایش هر یک از اشکال زیر به راحتی می توانید از کدهای زیر در قسمت <head> قالب و یا کدهای HTML سایت خود در کنار دیگر کدهای CSS سایت خود استفاده کنید و سپس در مکانی که دوست دارید آن شکل در سایت شما نمایش داده شود کافی است از کد زیر استفاده کنید.
    1 <div id="name"></div>






    توجه داشته باشید که بجای عبارت name در کد بالا باید از نام هر یک از اشکال زیر در کد HTML سایت خود استفاده کنید.

    نمایش مربع و مستطیل با استفاده از CSS

    ساده ترین شکلی که با استفاده از کدهای CSS می توانید تولید کنید شکل یک مربع و یا مستطیل در صفحات سایت شما است. در زیر کدهای CSS مربوط به ساخت یک چهار ضلعی را در صفحات وب مشاهده می*کنید.
    1
    2
    3
    4
    5
    #square {
    width: 100px;
    height: 100px;
    background: #555;
    }







    تنها کافی است عرض ( width ) و طول ( height ) چهار ضلعی که می خواهید نمایش پیدا کند را در کد بالا وارد کنید.

    نمایش دایره با استفاده از CSS

    دومین شکلی که می خواهیم با استفاده از کدهای CSS در صفحات وب رسم کنیم شکل دایره است که در طراحی های شما می تواند یکی از پرکاربردترین اشکال باشد.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #circle {
    width: 100px;
    height: 100px;
    background: #555;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    }




    توجه داشته باشید که کدهایی که در ابتدای آن ها از moz استفاده شده است برای نمایش این شکل در مرورگر فایرفاکس و کدهایی که در ابتدای آن ها از webkit استفاده شده است در حقیقت برای نمایش صحیح شکل در مرورگرهایی مانند گوگل کروم و … و کدی که در ابتدای آن o برای نمایش صحیح کد ها در مروگر اپرا ( Opera ) نوشته شده اند.

    نمایش بیضی با استفاده از CSS

    وقتی می خواهیم با استفاده از CSS در صفحات سایت خود یک بیضی رسم کنیم تمامی مراحل مانند زمانی است که می خواستیم شکل دایره را رسم کنیم با این تفاوت که عرض و یا طول شکل شما تغییر می کند و مقدار انحنای خط دور نیز باید تغییر بکند مانند کدهای زیر که مشاهده می کنید.
    1
    2
    3
    4
    5
    6
    7
    8
    #oval {
    width: 200px;
    height: 100px;
    background: #555;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    }







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

    نمایش شکل مثلث با استفاده از CSS

    در هنگام رسم یک مثلث با CSS می توانیم مثلث نمایش داده شده را مانند کدهای زیر به جهات مختلفی چرخش دهیم.
    1
    2
    3
    4
    5
    6
    7
    #triangleup {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #555;
    }




    مثلث به سمت بالا




    1
    2
    3
    4
    5
    6
    7
    #triangleup {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #555;
    }



    مثلث به سمت پایین



    1
    2
    3
    4
    5
    6
    7
    #triangleup {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #555;
    border-bottom: 50px solid transparent;
    }





    مثلث به سمت راست


    1
    2
    3
    4
    5
    6
    7
    #triangleup {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid #555;
    border-bottom: 50px solid transparent;
    }





    مثلث به سمت چپ


    همانطور که می بینید نمایش یک مثلث توسط کدهای CSS بسیار آسان و البته جذاب است.

    نمایش شکل متوازی الاضلاع با استفاده از CSS

    شکل متوازی الاضلاع نیز به ما کمک می کند در این آموزش شما را با متد جدید Skew آشنا کنیم که از آن برای تعیین انحنای درخواستی خود در رسم اشکال استفاده کنید مانند کد زیر
    1
    2
    3
    4
    5
    6
    7
    8
    #parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: #666;
    }





    باز هم پیشنهاد می کنم برای اینکه بهتر با متد Skew آشنا شوید مقدار درجه ورودی متد Skew را در کدهای بالا تغییر دهید تا متوجه شوید که چگونه انحنا را می توانیم بر اساس محور x تعیین کنیم.

    نمایش ذوزنقه با استفاده از CSS

    باز هم برای نمایش دادن شکل بعدی یعنی ذوزنقه مانند شکل مثلث از تنظیم خصوصیات مربوط به خط دور اشکال به صورت زیر استفاده می کنیم.
    1
    2
    3
    4
    5
    6
    7
    #trapezoid {
    border-bottom: 100px solid #666;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    }







    رسم شکل ستاره با استفاده از CSS

    با استفاده از کدهای زیر می توانیم یک ستاره ۶ پر را رسم کنیم.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #starsix {
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #666;
    position: relative;
    }
    #starsix:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #666;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
    }







    همانطور که می بینید با استفاده از after می توانیم تعیین کنیم که بعد از یک شی در صفحه وب ما چه چیزی می خواهیم نمایش داده شود و ما در کدهای بالا از این خاصیت برای رسم یک مثلث دیگر برعکس مثلث قبلی استفاده کرده ایم و با استفاده از position : relative توانسته ایم که این دو شکل را بر روی همدیگر نمایش دهیم که در نهایت شکل ستاره ۶ پر را می توانید در مرورگر وب هود مشاده کنید.

    نمایش پنج ضلعی در صفحات وب با استفاده از CSS

    حال برای نمایش یک پنج ضلعی معمولی در صفحات وب خود با استفاده از کدهای CSS زیر این کار را انجام می دهیم.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #555 transparent;
    }
    #pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #555;
    }







    در رسم این شکل نیز از before در کدهای CSS استفاده کرده ایم که دقیقاً برعکس after است.

    نمایش یک قلب در صفحات وب با استفاده از CSS

    یکی از دیگر اشکالی که ممکن است به آن در هنگام طراحی صفحات وب نیاز داشته باشید شکل قلب است که می توانید با رنگ های مختلف و تنها با نوشتن چند خط کد CSS در صفحات وب خود از آن استفاده کنید
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    #heart {
    position: relative;
    width: 100px;
    height: 90px;
    }
    #heart:before, #heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #666;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    } #heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
    }







    البته برای تغییر اندازه نمایش این قلب می توانید با تغییر مقادیر در کدهای CSS بالا به راحتی شکل ظاهری و اندازه نمایش داده شده این قلب را تغییر دهید

    نمایش حباب های گفتگو با استفاده از CSS

    یکی دیگر از اشکالی که در بسیاری از سایت ها از آن در صفحات وب استفاده می شود شکل حباب گفتگو است که می توانید برای رسم این شکل نیز در صفحات خود از کد زیر استفاده کنید.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #talkbubble {
    width: 120px;
    height: 80px;
    background: #666;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    #talkbubble:before {
    content:"";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid #666;
    border-bottom: 13px solid transparent;
    }

  2. تعداد تشکر ها ازhabashi به دلیل پست مفید


  3. # ADS




     

  4. #2
    کاربر اخراج شده
    تاریخ عضویت
    Dec 2011
    محل سکونت
    هتزنر آلمان
    نوشته ها
    258
    تشکر تشکر کرده 
    177
    تشکر تشکر شده 
    591
    تشکر شده در
    421 پست

    پیش فرض پاسخ : آموزش ساخت اشکال مختلف با استفاده از css

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

  5. تعداد تشکر ها از porya_spy به دلیل پست مفید


  6. #3
    کاربر اخراج شده
    تاریخ عضویت
    Sep 2011
    محل سکونت
    همین جا و هر جا
    نوشته ها
    65
    تشکر تشکر کرده 
    18
    تشکر تشکر شده 
    57
    تشکر شده در
    30 پست

    پیش فرض پاسخ : آموزش ساخت اشکال مختلف با استفاده از css

    حتما دوست عزیز در خدمت دوستان هستیم

  7. تعداد تشکر ها از habashi به دلیل پست مفید


  8. #4
    عضو انجمن amirlord آواتار ها
    تاریخ عضویت
    Jul 2010
    نوشته ها
    802
    تشکر تشکر کرده 
    1,304
    تشکر تشکر شده 
    2,008
    تشکر شده در
    1,149 پست

    پیش فرض پاسخ : آموزش ساخت اشکال مختلف با استفاده از css


  9. تعداد تشکر ها از amirlord به دلیل پست مفید


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

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

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

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

  1. پاسخ ها: 2
    آخرين نوشته: February 13th, 2017, 16:16
  2. آموزش ایجاد بسته ی نصبی جوملا
    توسط whdesign در انجمن Joomla-Mambo
    پاسخ ها: 0
    آخرين نوشته: December 14th, 2016, 11:29
  3. پاسخ ها: 12
    آخرين نوشته: October 27th, 2015, 16:16
  4. آموزش ساخت بسته نصبی برای جوملا 3
    توسط ali09366 در انجمن Joomla-Mambo
    پاسخ ها: 1
    آخرين نوشته: May 25th, 2015, 01:19
  5. پاسخ ها: 17
    آخرين نوشته: July 27th, 2013, 10:21

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

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