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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 11 از 11

مقاله: آموزش Combine کردن تصاویر با CSS Sprites (کد نویسی) و BB کدهای

    1. آموزش Combine کردن تصاویر با CSS Sprites (کد نویسی) و BB کدهای »

      آموزش Combine کردن تصاویر با CSS Sprites (کد نویسی) و BB کدهای

      نگارش: , by (کاربر سایت)
      2013/02/21 11:22 PM
      امتیاز:  (1 رای ، میانگین : 5.00 )

      سلام
      آموزش که الان میزارم برای خیلی شاید بدرد بخوره . با این آموزش هم میتونین عکساتون CSS Sprites کنین هم با این میتونین BB کدهای اضافی حرفی درست کنین. من تا این حد بهتون میگم. شکل این دانلود 4 بی بی کد بسیار زیبا ( اخطار ، اطلاعات ، خطا و موفقیت ) + پیش نمایش با اجازه علی آقا

      خوب بدون مقدمه میرم سر اصل مطلب

      اول میخوام در باره عکس حرف بزنم

      من یه عکس width=100 در height=2165 میسازم

      این جا باید بگم 0و0 عکس تا 2165و2165 باید درنظر بگیرم برای این که عکسای رو که درش میزارم باید محاسبه کنم در این ابعاد در کدا قرار بدی

      حالا بریم سر css اول یه تابه تعریف میکنم . من testcss انتخاب میکنم کدای اولی من اینجوری میشه
      .testcss{
      background: url(Picture Address) repeat-x 0 0;
      color: #FFF;
      width: 83%;
      font-weight: normal;
      padding: 13px 15px 0;
      margin-bottom: 2.5em;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      position: relative;
      left: 20px;
      margin:10px auto;
      }
      .testcss p {
      margin-bottom: 17px !important;
      font-family: tahoma;
      font-size: 11px;
      text-align: right;
      direction: rtl;
      margin-top: 7px;
      }
      .testcss p:last-child { margin-bottom: 0; }
      .testcss ul { margin-left: 8px; margin-bottom: 1.5em; }
      .testcss ul:last-child { margin-bottom: 0; }
      .testcss li { background: url(Picture Address) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
      .testcss-success li { background-position: 0 -95px; }
      .testcss h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }
      .testcss span { background: url(Picture Address) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }
      .testcss-success { background-color: #EEF4D4 ; color: #596C26 ; border: 1px solid #8FAD3D ; }
      .testcss-success span { background-position: 100% 0; }
      }
      این کدای Css که گزاشتم پایست و من این برای کد اصلی سازگار و درست میکنم حالا بیاین یکی یکی برسیشن کنیم بیبینیم چی به جیه

      این کد بدرد برای حدو حدود کارمون میخوره با این تعیین میکنیم چی کجا باشه

      1).testcss{
      2)background: url(Picture Address) repeat-x 0 0;
      3)color: #FFF;
      4)width: 83%;
      5)font-weight: normal;
      6)padding: 13px 15px 0;
      7)margin-bottom: 2.5em;
      8)-moz-border-radius: 6px;
      9)-webkit-border-radius: 6px;
      10)border-radius: 6px;
      11)-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      12)-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      13)box-shadow: 1px 1px 2px rgba(0,0,0,.4);
      14)position: relative;
      15)left: 20px;
      16)margin:10px auto;
      }

      مشخصات: " ترجمه ( ماشینی )" کارای :
      1 ) اسم تابع که انتخاب کردیم
      2) آدرس پس زمینه مون 1 . اینجا کادر مربعی شکل عکس بهش میگیم مثل زیر بین این دو خط چون سفیده مشخس نیست

      |
      فایل پیوست 26175
      |
      3) رنگ متنمون
      4)عرض
      5)وزن فونت
      6)بالشتک
      7)حاشیه پایین
      8)حاشیه moz
      9)WebKit است مرز، شعاع
      10)مرز شعاع
      11)moz-جعبه سایه
      12)WebKit است جعبه سایه:
      13)جعبه سایه
      14)موقعیت
      15)چپ
      16)حاشیه

      .testcss p {
      margin-bottom: 17px !important;
      font-family: tahoma;
      font-size: 11px;
      text-align: right;
      direction: rtl;
      margin-top: 7px;
      }
      مشخصات: کارای : برای تنظیمات قلم داخل کادر به کار میره
      1)حاشیه پایین
      2)خانواده قلمها ( میتونید چند تا قلم بهش بدید )
      3)اندازه قلم (سایز قلم کوچک و بزرگ کنید)
      4)تراز متن ( راست چین یا چپ چینش کنید )
      5)جهت ( نوشته به سبک انگلیسی چپ به راست یا به فارسی راست بهچپش کنید )
      6)حاشیه بالا

      حالا بریم سر اصل مطلب


      .testcss p:last-child { margin-bottom: 0; }
      .testcss ul { margin-left: 8px; margin-bottom: 1.5em; }
      .testcss ul:last-child { margin-bottom: 0; }
      .testcss li { background: url(Picture Address) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
      .testcss-success li { background-position: 0 -95px; }
      .testcss h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }
      .testcss span { background: url(Picture Address) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }
      .testcss-success { background-color: #EEF4D4 ; color: #596C26 ; border: 1px solid #8FAD3D ; }
      .testcss-success span { background-position: 100% 0; }}
      مشخصات: کارای : برای تنظیمات قلم داخل کادر به کار میره

      خوب عگسهای رو که درست کردیم در دو بگرند 1 و 2 میزاریم این عکس میگم
      حالا بریم درستش کنیم این .testcss-success li { background-position: 0 -95px; } برای اینکه ما جایگاه اصلی عکس بدیم بهش الان داریم با این میگیم که جایگاه اون کلید سبز 0 -95px وجود داره البته به اینجا ختم نمیشه این اولیشه
      برای تابع ئرم هم این مقدارو باید محاسبه کنیم و بزاریم که میشه این 0 -895px; وبرای بعدی 0 -495px; و بعدیهم 0 -1295px; بعدی

      حلا کدامون باید به این شکل باشن

      .testcss-success li { background-position: 0 -95px; }
      .testcss-warn li { background-position: 0 -895px; }
      .testcss-error li { background-position: 0 -495px; }
      .testcss-info li { background-position: 0 -1295px; }
      .
      حالا بخایم یکی دی گه تعریف کنیم چیمیشه ؟ باید بزاریم 0 -2095px دیدید خیلی آسونه

      خوب حالا چی باید کدای زیرم درست کنیم اینجوری
      .testcss-success { background-color: #EEF4D4 ; color: #596C26 ; border: 1px solid #8FAD3D ; }
      .testcss-success span { background-position: 100% 0; }
      .testcss-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
      .testcss-warn span { background-position: 100% -800px; }
      .testcss-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
      .testcss-error span { background-position: 100% -400px; }
      .testcss-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
      .testcss-info span { background-position: 100% -1200px; }

      اگه میخواین به کارتون کادر بدین از .noticeui-success { background-color: #EEF4D4 ; color: #596C26 ; border: 1px solid #8FAD3D ; } استفاده کنین background-color رنک پس زمینه ، solid : رنگ کادر دورش ، color : رنگ متنش تغییر میده

      اینم برای نمایش درست عکسیه که ما درنظر کرفتیم یعنی این فایل پیوست 26174که با کد .noticeui-success span { background-position: 100% 0; } مشخص میشه کجاست که جای گاه اولی میگه 100% 0 دومی 100% -800px سومی 100% -400px و چهارمی 100% -1200px یکی دیگه بخایم تعریف کنیم میشه 100% -1600px

      حالا برای بیبی کد میشه همونی که علی آقا گزشت و آدرسش دادم ولی برای CSS Sprites میشه اینجوری کرد این کد

      .testcss{
      position: relative;}
      .testcss span { background: url(http://forum.p30central.com/images/e...gurfs2z140.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }
      .testcss-success span { background-position: 100% 0; }
      .testcss-warn span { background-position: 100% -800px; }
      .testcss-error span { background-position: 100% -400px; }
      .testcss-info span { background-position: 100% -1200px; }
      .testcss-lock span { background-position: 100% -1600px; }
      .testcss-Moved span { background-position: 100% -2000px; }
      }
      کمی باید با این کد کار کنید و برای حرکت دادن و در جای دقیق که شما میخواین قرار بگیره باید با left: -34px; top: 9px دست کاریش کنید تا مچ بشه و برای اندازه اون عکس هم با width: 33px; height: 40px; باید دست کاریش کنید تا مچ بشه .

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

      کد PHP:
      <div class="testcss testcss-success"><span></span></div>
      <
      div class="testcss testcss-warn"><span></span></div>
      <
      div class="testcss testcss-error"><span></span></div>
      <
      div class="testcss testcss-info"><span></span></div>
      <
      div class="testcss testcss-Moved"><span></span></div

      بیاین حلا تبدیلش کنیم

      خوب برای این کار من باز یه تابع تعریف مینم مثلا p30central و p30central-top

      خوب در css خودمون که برای وی بی additional.css هست میزاریم
      کد:
      .p30central {background: url('/vb_forum/vb_image/vb_folder/op0scng0agurfs2z140.png') no-repeat  100% 0%;width: 40px;height: 40px;}
      .p30central-top {background-position: 100% 0;}

      خوب برای اینکه یکی دیگه معرفی کنیم میشه این .p30central-about {background-position: 100% -800px;} خوب بریم عکس بیبینیم چه جوریه
      خوب کدارو اینجوری وارد میکنیم در قالبمون
      کد:
      <div class="p30central p30central-top"></div>

      سوال :برای اون یکی چی اونو چیجوری بزاریم ؟

      خوب کاری نداره ، چیجوری ، اینجوری
      این ادامه Css بالا ر جای خودش میاریم p30central-about {background-position: 100% -800px;} اینجوری
      کد:
      .p30central {background: url('op0scng0agurfs2z140.png') no-repeat  100% 0%;width: 40px;height: 40px;}
      .p30central-success {background-position: 100% 0;} 
      .p30central-about {background-position: 100% -400px;}
      برا این که در کدامون استفاده کنیم این در کلاسش مینویسیم

      کد:
      <div class="p30central p30central-about"></div>
      اینم شات برای دیدن که این کد نان شد


      تو عکس اگه نگاه کنین میبینید که درست داره انجام میشه


      این آخرش بگم من css بلد نیستم ولی این تونستم بنویسم چرا ؟ ( چراش خودتون بگین )

      از علی آقا میخوام چیزای که کم رو بگن و از این که سرتون درد آوردم .....

      در آخرم یا علی

      منبع : vbiran.ir و forum.p30central.com


      در این بخش گزاشتم ولی تایپیکم ارسال نشد آموزش CSS بصورت ساده و حرفه ای
      ویرایش توسط SpyMan : 2013/02/22 در ساعت 10:05 PM
  1. Top | #11
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    179
    میزان امتیاز
    24

    پیش فرض

    سلام
    بعداز مدتی که نبودم میخوام این آموزش آپدیت کنم

    خیلی طرفدار نداره شاید آموزش کسی نمیخواد ولی میخوام یه پروژه تعریف کنم و با css اونو بسازم

    اینم عکس پروژه


    صفحه بدون CSS Sprites حجم بار گزاری 138 kb
    صفحه با CSS Sprites حجم بار گزاری 64/3 kb
    به زودی این آموزش قرار میگیره در حال ساخت pdf این آموزش هستم




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

صفحه 2 از 2 نخستنخست 12

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

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

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

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

  1. آموزش چگونگی Combine کردن تصاویر با CSS Sprites
    توسط VBIran در انجمن آموزش های وی بولتین
    پاسخ: 67
    آخرين نوشته: 2016/11/04, 07:26 PM
  2. آموزش پلاگین نویسی برای ویبولتین
    توسط Mojtaba_6485 در انجمن آموزش های وی بولتین
    پاسخ: 3
    آخرين نوشته: 2014/09/25, 08:21 AM
  3. آموزش Combine کردن تصاویر با CSS Sprites (کد نویسی)
    توسط SpyMan در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2013/02/21, 03:43 PM
  4. پاسخ: 0
    آخرين نوشته: 2011/01/19, 12:08 AM

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

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

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

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

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