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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 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 . اینجا کادر مربعی شکل عکس بهش میگیم مثل زیر بین این دو خط چون سفیده مشخس نیست

      |
      listbg.gif
      |
      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 : رنگ متنش تغییر میده

      اینم برای نمایش درست عکسیه که ما درنظر کرفتیم یعنی این success.pngکه با کد .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 | #2
    کاربر سایت

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

    پیش فرض

    دوستان برای این کد یکی از تابع های زیر استفاده کنین باید این اضافه کنید
    کد:
    <div class="p30central p30central-about"></div>
    <p class="p30central p30central-about"></p>
    <ima class="p30central p30central-about">
    <li class="p30central p30central-about"></span>
    <div class="p30central p30central-about"></li>
    پس کد css میشه اینجوری


    کد:
    .p30central span {background: url('/vb_forum/vb_image/vb_folder/op0scng0agurfs2z140.png') no-repeat  100% 0%;width: 40px;height: 40px;}
    .p30central-top span {background-position: 100% 0;}
    
    .p30central-about span{background-position: 100% -400px;}
    این کد الا با span با اسپن مچ شود و تا تابع اون اینشکلی نباشه نشون نمیده


    کد:
    <div class="p30central p30central-about"><span></span></div>
    ویرایش توسط SpyMan : 2013/02/25 در ساعت 04:53 AM

    4 تشکر توسط:


  2. Top | #3
    کاربر سایت

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

    پیش فرض

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

    کد PHP:
    <div class="vbiranfooter2 p30central p30central-Link Pc_left" style="width: 110px; height: 35px;">لينک هاي مهم</div
    و برای عکس با لینک خاص اینجوری بزارین

    کد PHP:
    <a href="{vb:raw relpath}#top" onclick="document.location.hash='top'; return false;" ><div class="p30central p30central-top" style="height: 38px; width: 38px"></div>  </a
    البته اینا مثال هستن و با کار های خود بای اون مچ کنید

    2 تشکر توسط:


  3. Top | #4
    کاربر سایت

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

    پیش فرض

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


    اگر میخوای آموزش بزارم در ادامه نظرات شمارو در باره خوب بدن یا نبودن این آموزش بدونم. تشکر شمام برای نظر مثبت تلقی میشه

    3 تشکر توسط:


  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    5,334
    میزان امتیاز
    645

    پیش فرض

    نقل قول نوشته اصلی توسط SpyMan نمایش پست ها
    سلام
    من میخواستم آموزش افقی و با روش پیکسلی بزارم ولی انگار کسی لازم نداره . ولی عکسش میزارم


    اگر میخوای آموزش بزارم در ادامه نظرات شمارو در باره خوب بدن یا نبودن این آموزش بدونم. تشکر شمام برای نظر مثبت تلقی میشه
    الان تاپیک شما رو دیدم.
    واقعا برام جالبه لطفا ادامه بدید

    کاربر مقابل از Dastyar بابت این پست مفید تشکر کرده است:


  5. Top | #6
    کاربر سایت

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

    پیش فرض

    بنام خدا

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

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

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

    من یه عکس width=1000 در height=84 میسازم ( در اینجا باید اضافه کنم که height به نیاز شما بالا و پاین میشه و دست شماست)

    این جا باید بگم 0و0 عکس تا 1000و1000 باید دوباره درنظر بگیرم برای این که عکسای رو که درش میزارم باید محاسبه کنم در این ابعاد در کدا قرار بدی ولی نه مثل بالا چون بالا درصد یک طرف 100 بودو ما بالا و پایین میرفتیم اما در اینجا باید بالا و پایین ، چپ و راست بریم پس کارمون به نظر سخت میاد ولی اینجوری نیست .

    در بی بی کد که ما در Css پیش فرض وی بی ( additional.css ) قرار میدیم تک و بری هر آیتم باید جدا مسیر بدیم « باز تاب : در بالا دقت کرده باشید مسیر در یک تگ قرار داشت »

    حالا بریم سر css اول یه تابه تعریف میکنم . من p30central انتخاب میکنم کدای اولی من اینجوری میشه
    کد PHP:
    .p30central-1{backgroundurl('images/sprite-48-main_rtl.png'no-repeat -807px 1px;margin-top:-5px;margin-bottom:-14px}
    .
    p30central-2{backgroundurl('images/sprite-48-main_rtl.png'no-repeat -893px 1px;margin-top:-5px;margin-bottom:-14px
    عکس من که کمی تغیرش دادم اینجوری میشه

    فایل پیوست 26294
    این به نیاز من درست شده و شما باید به نیاز خودتون Css Ima خودتون درست کنین

    در کد بالا دو رقم وجود داره که
    1) -807px 1px
    2) -893px 1px

    اینجا باید بگم که رقمهای سمت چپ ( 807px ) به چپ( +) و راست (-) میرن و برای بالا (-) و پایین (+) قرار میگیره

    یعنی هرچی در افق منفی بگیره به سمت راست به عمود بگیره به طرف بالا میره « باز تاب : اگه متوجه نشدی بگید نوضیح میدم »

    خوب کد داخل کد نویسی باید اینجوری کدار بزاری

    کد PHP:
    <div class="p30central-1 vbiranfooter1 " style="width: 88px; height: 33px;"></div
    اگه به کد توجه کنید این تگ مقدار در style داره که باید بجای عداد اندازه شکلکهای که بالا تعریف میکنید در اینجا قرار بدید

    پایان این آموزش ولی ادامه دارد ...

    در آخرم یا علی

    منبع : انجمن کامپيوتر مرکزي

    2 تشکر توسط:


  6. Top | #7
    کاربر مفید و فعال

    ورژن ویبولتین
    3.8 و 4.2
    نوشته ها
    586
    میزان امتیاز
    72

    پیش فرض

    عالی بودن
    خسته نباشید .

    کاربر مقابل از Anbient بابت این پست مفید تشکر کرده است:


  7. Top | #8
    کاربر سایت

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

    پیش فرض

    خود یه سوال دارم هر کار کردم درست نشد

    من بخوام متن و عکس با css کنار هم بزارم چیجوری میشه ؟

    بالای 20 مودل گزاشتم باز نشد مثل کد زیر چهجوری با class نشون بدیم که متن و عکس در جای مناسب قرار بگیرن ؟
    کد PHP:
    <div class="vbiranfooter1"><img src="http://up.vbiran.ir/images/r4llwmht1ugdey1sf8bk.png" alt="شبکه هاي اجتماعي" class="footericon" /> وي بي ايران در شبکه هاي اجتماعي</div
    که کلاس داره ،متن داره ، عکسم داره هر کار کردم نشد

    شایدم بیخوابی این 3 شب روم اسر کرده

    کاربر مقابل از SpyMan بابت این پست مفید تشکر کرده است:


  8. Top | #9
    کاربر مفید و فعال

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

    پیش فرض

    نقل قول نوشته اصلی توسط SpyMan نمایش پست ها
    خود یه سوال دارم هر کار کردم درست نشد

    من بخوام متن و عکس با css کنار هم بزارم چیجوری میشه ؟

    بالای 20 مودل گزاشتم باز نشد مثل کد زیر چهجوری با class نشون بدیم که متن و عکس در جای مناسب قرار بگیرن ؟
    کد PHP:
    <div class="vbiranfooter1"><img src="http://up.vbiran.ir/images/r4llwmht1ugdey1sf8bk.png" alt="شبکه هاي اجتماعي" class="footericon" /> وي بي ايران در شبکه هاي اجتماعي</div
    که کلاس داره ،متن داره ، عکسم داره هر کار کردم نشد

    شایدم بیخوابی این 3 شب روم اسر کرده
    خوب چرا به خود img کلاس نمیدین؟البته ای دی بهتر هست تو موارد خاص

    2 تشکر توسط:


  9. Top | #10
    کاربر سایت

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

    پیش فرض

    دادم نشود . عکس به نمایش در نمیاد نمیدونم چرا

صفحه 1 از 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)

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

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