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

مقاله: آموزش ساخت تصویر اسپرایت و استفاده از آن ( اختصاصی ویکی وی بی )

    1. آموزش ساخت تصویر اسپرایت و استفاده از آن ( اختصاصی ویکی وی بی )

      آموزش ساخت تصویر اسپرایت و استفاده از آن ( اختصاصی ویکی وی بی )

      درود.
      خب این آموزش اسپرایت کردن رو تقدیم می کنم به تمامی کد نویسان مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی خب اول از هر چیزی بگم که این کار رو من خودم اگر ببینم استایل عکس هاش زیاد باشه و سنگین می کنه استایل رو اول کار این کارو می کنم ! بعضی ها هم آخر کار اما خب به نظر من چه کاریه بیایم این همه آدرس عکس بدیم که آخرش بخوایم مجددا از اول این کارو بکنیم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      خب اول از همه با فتوشاپ تمامی جا هایی که به صورت عکس هستن مثلا دکمه سرچ ! یا ... که بستگی به استایل داره !
      من با فتوشاپ یک متنی رو وسط گذاشتم و دورش رو با لوگو ویکی وی بی پر کردم تا با کد نویسی کاری کنیم که فقط اون متن وسط رو نشون بده که خیلی خیلی ساده هست !
      شات :

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      دقت کنید که بدون بگراند باشه (ترنسپرنت البته اگر درست نوشته باشم !) که با فرمت png باید ذخیره بشه
      خب
      حالا ما یک کلس ایجاد می کنیم :
      کد:
      </div><div class="logo">
      خب پس با این تگی که من نشوتم باید در سی اس اس به این صورت بزاریم :
      کد:
      .logo { }
      خب تا اینجاش که عالی بوده ! حالا یک خاصیت بگراند ایجاد می کنیم (به جای آدرس لینکی که من دادم شما آدرس مسیر عکس خودتون رو قرار بدید)

      کد:
      background: url(http://upload.wikivb.ir/images/2oxtp65tj4b8p7kzunvw.png);
      ا ! من که چیزی نمی بینم ! خب معلومه ! یک طول و عرض باید بدید ! (پیشنهاد می کنم در فتوشاپ یک کات بزنید متن رو تا طول و عرض بدست میارید البته من دستی پیکسل وارد می کنم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی که البته من با این روش خودم آموزش نمی دم چونکه سر درگم می شید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی)
      خب طول و عرضمون شد :
      کد:
      width: 409px;
      height: 108px;
      ا ! اینکه اون لوگو های ویکی وی بی رو داره نشون می ده ، راستی از بالا سمت چپ هم شروع کرده ! ، خب معلومه ! هنوز که کارمون تمام نشده ! حالا کلس سی اس اسمون رو تا اینجا ببینیم ادامشم بگم :

      کد:
      .logo {
      background: url(http://upload.wikivb.ir/images/2oxtp65tj4b8p7kzunvw.png);
      width: 409px;
      height: 108px;
      }
      خیلی هم خوب ! خب بریم به بگراند بگیم آقای بگراند لطفا متن رو نشون بده ، خب یک قاعده داریم ! اول اینکه ما به این صورت خاصیت بگراند را وارد بکنیم همه چیز درست میشه :

      کد:
      background: url(http://upload.wikivb.ir/images/2oxtp65tj4b8p7kzunvw.png) -67px;
      اما خب ما دیدیم که این پیکسلی که می دن 2 تا هست ! مثال : -50px 56px خب شما چرا یدونه گذاشتی ؟ ، چونکه خودش تنظیم هست ! پس نیازی در این تصویر اسپرایت نیست که پیکسل دوم رو بدنیم
      حالا یک قاعده !
      پیکسل اول که ما -67px دادیم پهنا هست ! شاید پهنا کلمه خوبی نباشه ! چپ و راست بهتره ! یعنی کم و زیاد بکنیم چپ و راست می ره ! و پیکسل دوم هم به همین صورته ! اما با این تفاوت که بالا و پایین هست ! یعنی اگر کم و زیادش بکنیم بالا و پایین میشه !
      تمام ! واقعا سخت بود ؟ ! خسته شدید ؟
      2 تا خط کامل هم نشد مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      پس یک سورس می زاریم
      html :
      کد:
      <div class="logo"></div>
      css :
      کد:
      .logo {
      background: url(http://upload.wikivb.ir/images/2oxtp65tj4b8p7kzunvw.png) -67px;
      width: 409px;
      height: 108px;
      }

      دوستان امیدوارم که به خوبی توضیح داده باشم ، چونکه خیلی ها از کلمه کد نویسی وحشت دارن ( که نمی دونم چرا ! مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ) سعی کردم آموزش رو راحت توضیح بدم تا متوجه بشید چقدر ساده است !
      امیدوارم لذت برده باشید
      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      ویرایش توسط CodeSaz : 06-15-2013 در ساعت 04:59 AM
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

  1. #11
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    خیلی ممنون از محمد عزیز !

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

    توضیح کلی در مورد اسپرایت رو محمد جان دادند و کامل هم بود !

    کسانی که میخوان بیشتر بدونند مطالعه کنند:http://www.w3schools.com/css/css_image_sprites.asp

    البته اگر مطالعه هم کنید میفهمید همه چیز رو محمد جان توضیح دادند و چیزی دیگه نمونده !مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست AminX را پسندیده اند


    .....

  2. #12
    shadowboy آنلاین نیست.
    shadowboy
    کاربر فعال و مفيد
    250نوشته606مورد پسند

    تاریخ عضویت
    Jan 2013
    شماره عضویت
    365
    پسندیده است
    382 پست
    بلاگ
    9 پست
    میزان امتیاز
    616
    pcgraphics.ir
    می دونم محمد جان ولی گفتم که بدونن همچین چیزی هم هست.

    2 نفر از اعضا پست shadowboy را پسندیده اند


    " shadowboy "

    IS DEAD
    Leaugeoflegends.com

  3. #13
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    سلام دوستان وقتی بنده این اموزش رو دیدم گفتم چه قدر اسونه و واقعا هم بود ولی وقتب رفتم خودش این کار رو بکنم کلا گیر کردم یه عکس رو به زوری اوردم ولی هر کاری کردم عکس های بعدی یا نمیومد یا همون عکس اولی میومد ما مثالا باید از کجا بفهمیم که چند تا باید بریم سمت چب یا راست و.....

    لطفا دوستی که میخاد کمک کنه بگه بنده اون عکس sprite که درست کردم رو بهش بدم تا حداقل کد دو عکس رو برام به دست بیاره تا بنده متوجه بشم خیلی ممنون.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #14
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    عزیزم شما با مروگروم راست کلیک بکنید روی اون عکس یا هرچیز دیگه ، بعد گزینه آخر رو بزنید بعد سمت راست آدرس اون عکس هست و پیکسل هاش رو با فلش هایی که روی کیبورد هست بالا و پایین بکنید درست بشه !
    فکر می کنم باید برای شما فیلم بگیرم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    تلاش بکنید خودتون ! بنده آموزش رو به صورت خیلی خیلی واضح (خودمونی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی) توضیح دادم که همه متوجه بشن
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست CodeSaz را پسندیده است:


    Coming Soon New Project ■

  5. #15
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    نقل قول نوشته اصلی توسط Dξ3ІGПEЯ نمایش پست ها
    درود.
    عزیزم شما با مروگروم راست کلیک بکنید روی اون عکس یا هرچیز دیگه ، بعد گزینه آخر رو بزنید بعد سمت راست آدرس اون عکس هست و پیکسل هاش رو با فلش هایی که روی کیبورد هست بالا و پایین بکنید درست بشه !
    فکر می کنم باید برای شما فیلم بگیرم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    تلاش بکنید خودتون ! بنده آموزش رو به صورت خیلی خیلی واضح (خودمونی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی) توضیح دادم که همه متوجه بشن
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    الان دقیقا به بنده توهین کردین بنده فقط درخواست کمک داشتم.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #16
    WikiVB هم اکنون آنلاین است.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    خیلی هم عالی محمد جان ، خسته نباشید .
    به نظرم دوستانی که CSS رو در سطح خوب بلد نیستن بهتره ابتدا قواعد پایه رو یاد بگیرن بعدش برن دنبال اسپرات تا مثل خیلی از دوستان سردرگم نشن .

    و طاها جان جز این روشی برای اسپرات نیست اما به نظرم شما این مدلی دیدید :

    کد:
    background: url(wikivb.png);
    background-position: -30px -100px;
    که میشه مثل کاری که محمد جان کردن موقعیت ها رو بزاریم بعد از url تصویر تا هم خلاصه نویسی بشه و هم نیاز نباشه بیشتر بنویسیم .

    این رو هم بگم در قرار دادن تصویر در css اگر میخوای تصویر تکرار نشه یا در جهت خاصی تکرار بشه حتما سعی کنید حالت های no-repeat , repeat-x و repeat-y رو قرار بدید .

    6 نفر از اعضا پست WikiVB را پسندیده اند


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

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

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

    - - - Updated - - -

    نیازی نیست دوستان پیداش کردم http://spritepad.wearekiss.com/ این بود

    کاربر زیر پست The Ph@ntom را پسندیده است:


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

    Coming Soon ... ! New Style

  8. #18
    Mehrab JT آنلاین نیست.
    Mehrab JT
    کاربر فعال و مفيد
    1,240نوشته1,400مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1963
    پسندیده است
    2,945 پست
    بلاگ
    4 پست
    میزان امتیاز
    1408
    telegram.me/mehrab_jt
    ببخشید من الان ی فایل اسپرایت دارم بعد فاصله یک تصویر از سمت راست423 پیکسل و از بالا هم 250 پیکسل هست کد فراخوانیش ب چ شکلی میشه؟
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  9. #19
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    کد:
    background: url(Link-Aks) 123px 123px
    من 123 رو به عنوان تست گذاشتم ، از - هم باید استفاده کنید ، فرضا -434px ، خودتون حالا دست به کار شید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست CodeSaz را پسندیده اند


    Coming Soon New Project ■

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

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

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

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

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

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

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