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

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

مقاله: اموزش ساخت یک سبیل با استفاده از CSS3 & LESS

    1. اموزش ساخت یک سبیل با استفاده از CSS3 & LESS »

      اموزش ساخت یک سبیل با استفاده از CSS3 & LESS

      نگارش: , by (کاندیدای مدیریت)
      2013/03/01 08:20 PM
      امتیاز: 

      سلام عرض میکنم خدمت بچه های وی بی ایران امیداورم حالتون خوب باشه ، من امروز اولین اموزش خودم رو در رابطه با CSS3 شروع میکنم. خوب حالا شاید دوستان بگن CSS3 چه ربطی به LESS داره | Updated

      توضیحی مختصر در مورد LESS :

      LESS نیز یک زبان همانند CSS است و برای استایل دهی به یک تگ HTML استفاده میشود و تنها مزیت که نسبت به CSS داره استفاده از متغییر هاست ( زبان CSS رو با جاوااسکریپت مخلوط کرده)، با استفاده از LESS میتونید یک متغییر تعریف کنید و اون متغییر رو

      بارها و بار ها استفاده کنید ، بیشتر از این بحث رو پیچیده نمیکنم برای اطلاعات بیشتر به منبع این زبان مراجعه کنید ! (نکته : تمام کد های CSS در زبان LESS معتبر هستند )

      شروع کار :

      برای ساخت یک سبیل با استفاده از CSS باید یک تگ div و چند تا span در html تعریف کنیم :


      کد HTML:
      <div class="vbseb"> <span class="mou"></span> <span class="stache"></span></div>
      حالا رسیدم به اینجا ، یک div با نام vbseb (وی بی ایران سبیل ) ایجاد کردیم و چندتا span به این div اختصاص دادیم (mou , stache) حالا میریم سراغ تعریف متغییر و پس زمینه :

      [CODE @Light: #ebeaaa @Dark: #2f3245 ;body{
      background: @Light;
      }[/CODE]

      خوب اینجا دوتا متغییر به نام های light , @Dark@ تعریف کردیم که برای استفاده باید از @ قبل از متغییر استفاده کنیم (همون طور که میبنید من از متغییر light@ به جای رنگ بک گراند استفاده کردم ،چون قبلن یک بار رنگ لیمویی رو برای متغییر تعریف کردم پس

      میتونم هر چقدر دلم خواست از این متغییر استفاده کنم) ، تا اینجا ما رنگ پس زمینه رو لیمویی انتخواب کردیم و حالا میرم سراغ استایل دهی به div مورد نظر :


      کد:
      body {  background: #ebeaaa;
      }
      .vbseb {
        position: relative;
        width: 150px;
        margin: 100px auto;
      }
      .mou,
      .stache,
      .mou:before,
      .stache:before {
        background: #2f3245;
        display: block;
        height: 50px;
        width: 75px;
      }
      .mou:before,
      .mou:after,
      .stache:before,
      .stache:after {
        content: "\0020";
        position: absolute;
        height: 40px;
        width: 50px;
      }
      .mou {
        position: absolute;
        left: 80px;
        border-top-left-radius: 170px;
        border-bottom-right-radius: 200px;
        border-bottom-left-radius: 12px;
        transform: rotate(40deg);
        z-index: 5;
        box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2);
      }
      .mou:before {
        left: 25px;
        top: -40px;
        z-index: 0;
      }
      .mou:after {
        background: #ebeaaa;
        border-bottom-right-radius: 50px;
        left: 24px;
        top: -50px;
        z-index: 10;
        height: 51px;
        width: 51px;
      }
      .stache {
        position: absolute;
        border-top-right-radius: 170px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 200px;
        transform: rotate(-40deg);
        z-index: 15;
        box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.2);
      }
      .stache:before {
        left: 0;
        top: -40px;
        z-index: 10;
      }
      .stache:after {
        background: #ebeaaa;
        border-bottom-left-radius: 50px;
        left: 0;
        top: -50px;
        z-index: 20;
        height: 51px;
        width: 51px;
      }
      خوب کار ما تموم شد ، تا اینجا فکر نمیکنم ابهامی وجود داشته باشه اگر سوالی دارید میتونید برام پیغام بفرستید یا همین جا مطرح کنید | با تشکر

      توجه : دوستان اگه شاهد غلط املایی بودید به بزرگی خودتون ببخشید ! | بدلیل اینکه ویبولتین زبان LESS رو توی پست بهم ریخته نشون میده ، فایل رو پیوست میکنم !

      برای یادگیری درباره ی زبان LESS به منبع ان مراجع کنید

      فایل های پیوست شده
      ویرایش توسط Foutch : 2013/03/01 در ساعت 09:27 PM
  1. Top | #2
    کاربر مفید و فعال

    ورژن ویبولتین
    4.2
    نوشته ها
    716
    میزان امتیاز
    85

    پیش فرض

    ممنون از آموزشتون.
    تا بحال چیزی در مورد این زبان نشنیده بودم.منبعی برای آموزش هست؟

  2. Top | #3
    کاندیدای مدیریت

    ورژن ویبولتین
    4.2
    نوشته ها
    116
    میزان امتیاز
    17

    پیش فرض


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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. نمونه لوگو وی بی ایران با CSS3 بدون استفاده از عکس
    توسط VBIran در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 13
    آخرين نوشته: 2012/10/29, 01:49 AM
  2. [CSS3] آموزش keyframe و نحوه استفاده از آن !
    توسط jcs.w در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 8
    آخرين نوشته: 2012/08/24, 12:31 PM
  3. آموزش استفاده از تصویر در حاشیه ها در CSS3
    توسط software در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 1
    آخرين نوشته: 2012/08/18, 11:07 PM
  4. آموزش ایجاد کردن سایه در باکس ها در CSS3
    توسط software در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 1
    آخرين نوشته: 2012/08/14, 07:07 PM
  5. درجات کاربری با استفاده از css3 و html
    توسط uni در انجمن پک درجه های کاربری
    پاسخ: 7
    آخرين نوشته: 2012/06/28, 05:32 PM

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

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

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

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

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