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

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

مقاله: آموزش ساخت بنر زیبای css

    1. »

      نگارش: , by (کاربر فعال سایت)
      2015/05/29 02:23 AM
      امتیاز: 

      آموزش ساخت بنر زیبای css

      مدت ها بود میخواستم این کار رو شروع کنم . بنر سی اس اس ... این اولین کار بود تصمیم گرفتم از انمیشن ( سی اس اس ) توش استفاده نکنم .

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

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

      خوب نمونه :



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

      کد های اچ تی ام ال :

      کد:
      <div class="baner1">
      
      <div class="baner2">
      </div>
      
      
      
      <div class="baner3">سوال داری ؟</div>
      
      
      <div class="baner4">بدو بیا عضو شو تا به جواب برسی</div>
      
      
       
      
      
      
      <div class="baner5">عـضو شوید</div>
      
      
      
      <div class="baner6">سوال فارسی ، مرجع سوالات فارسی و مشاوره رایگان</div>
      
      <a href="aaaa">
      <div class="baner7">کاملا رایگان</div></a>
      
      </div>

      کد های سی اس اس :

      کد:
      .baner1 {
          width: 468px;
          height: 60px;
          background: transparent url("http://up.vbiran.ir/uploads/12559143282261114999_bg.png") repeat scroll 0% 0%;
          box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.19);
          border-radius: 0px;
          margin: 30px auto auto;
      }
      
      .baner2 {
      background: transparent url("http://png-1.findicons.com/files/icons/1589/free_twitter/80/geek_girl.png") repeat scroll 0% 0% / auto 60px;
      float: left;
      width: 60px;
      height: 60px;
      margin-left: 14px;
      transition: all 0.5s ease-in 0s !important;
      }
      
      
      .baner3 {
      transition: all 0.5s ease-in 0s !important;
      float: right;
      background: #AFD34B none repeat scroll 0% 0%;
      padding: 0px 10px;
      margin: 6px;
      color: #567500;
      text-shadow: 1px 1px #D3F27B;
      font-size: 13px;
      box-shadow: 0px 0px 0px 1px #97C024;
      border: 1px solid #D0F27A;
      }
      
      .baner4 {
      transition: all 0.5s ease-in 0s !important;
      float: right;
      background: #D34B4B none repeat scroll 0% 0%;
      box-shadow: 0px 0px 0px 1px #C02424;
      border: 1px solid #F27A7A;
      padding: 0px 10px;
      margin: 6px;
      color: #750000;
      text-shadow: 1px 1px #F27B7B;
      font-size: 13px;
      }
      
      .baner5 {
      
      float: right;
      background: #4BD3D3 none repeat scroll 0% 0%;
      box-shadow: 0px 0px 0px 1px #24C0B5;
      border: 1px solid #7AF2F2;
      margin: 6px;
      color: #007175;
      text-shadow: 1px 1px #7BF2F2;
      padding: 0px 11px;
      font-size: 13px;
      transition: all 0.5s ease-in 0s !important;
      
      }
      
      .baner6 {
      float: right;
      background: #D34BAB none repeat scroll 0% 0%;
      box-shadow: 0px 0px 0px 1px #C024AE;
      border: 1px solid #F27AE4;
      transition: all 0.5s ease-in 0s !important;
      margin: 0px 6px 6px;
      color: #75006B;
      text-shadow: 1px 1px #F97EEF;
      font-size: 13px;
      padding: 0px 11.5px;
      }
      
      .baner7 {
      float: right;
      background: #4BD3D3 none repeat scroll 0% 0%;
      box-shadow: 0px 0px 0px 1px #24C0B5;
      border: 1px solid #7AF2F2;
      margin: 0px 6px 6px;
      color: #007175;
      text-shadow: 1px 1px #7BF2F2;
      font-size: 13px;
      padding: 0px 10.5px;
      transition: all 0.5s ease-in 0s !important;
      }
      
      .baner7:hover {
          float: right;
          background: #D34B4B none repeat scroll 0% 0%;
          box-shadow: 0px 0px 0px 1px #C02424;
          border: 1px solid #F27A7A;
          margin: 0px 6px 6px;
          color: #750000;
          text-shadow: 1px 1px #F27B7B;
          font-size: 13px;
          padding: 0px 10.5px;
          transition: all 0.5s ease-in 0s !important;
          transform: rotate(360deg);
      }
      
      
      .baner5:hover {
          background: #AFD34B none repeat scroll 0% 0%;
          color: #567500;
          text-shadow: 1px 1px #D3F27B;
          box-shadow: 0px 0px 0px 1px #97C024;
          border: 1px solid #D0F27A;
      transition: all 0.5s ease-in 0s !important;
          transform: rotate(360deg);
      }
      
      .baner2:hover {
      transition: all 0.5s ease-in 0s !important;
      transform: rotate(360deg);
      }
      
      .baner3:hover {
         transition: all 0.5s ease-in 0s !important;
          transform: rotate(360deg);
      }
      .baner4:hover {
         transition: all 0.5s ease-in 0s !important;
          transform: rotate(4deg);
      }
      
      .baner6:hover {
         transition: all 0.5s ease-in 0s !important;
          transform: rotate(-4deg);
      }
      ایشالا در اینده بنر های واقعا پیشرفته ای میزاریم به این سبک
      ویرایش توسط Soalfarsi : 2015/05/29 در ساعت 03:12 AM دلیل: ادغام دو پست
  1. Top | #11
    کاربر مفید و فعال

    ورژن ویبولتین
    4
    نوشته ها
    482
    میزان امتیاز
    63

    پیش فرض

    نقل قول نوشته اصلی توسط MyBirds نمایش پست ها
    خب دقیق نمیگن چون شاید یکی بزاره توی فوتر یکی بزاره توی ناو بار

    سرچ کنید:
    additional.css

    کدهای سی اس اس رو قرار بدید

    اگه میخواید بزارید توی ناوبار
    سرچ کنید: navbar
    کد های اچ تی ام ال رو قرار بدید

    اگه میخواید بزارید توی فوتر
    سرچ کنید: footer
    کد های اچ تی ام ال رو قرار بدید
    باید توضیح چی میدادم ؟ خوب دوست عزیز هرکس یه سیستمی داره . ورد پرس ، وی بی ، جوملا ف مای بی بی و ... خوب کد سی اس اس هرکدوم فرق داره . العان من باید همشو توضیح بدم ؟ نه عزیز من فقط باید بگم این کد سی اس اس که شما باید خودتون بلد باشید کد سی اس اس رو قرار بدید .




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

  3. Top | #12
    پاسخگو و راهنمای سایت

    ورژن ویبولتین
    :|:
    نوشته ها
    3,340
    میزان امتیاز
    380

    پیش فرض

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

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


  4. Top | #13
    کاربر مفید و فعال

    ورژن ویبولتین
    4
    نوشته ها
    482
    میزان امتیاز
    63

    پیش فرض

    اشتباه نقل کردم داداش باس پست بالاییو میکردم این شده بود

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


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

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

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

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

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

  1. پاسخ: 1
    آخرين نوشته: 2014/05/12, 07:37 PM
  2. پاسخ: 35
    آخرين نوشته: 2014/03/30, 11:21 AM
  3. آموزش ایجاد منوی زیبا در navbar (زیر آخرین ارسال ها)
    توسط FoX FuN در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 0
    آخرين نوشته: 2013/10/05, 07:34 PM
  4. آموزش زیبا سازی پست بیت { ساده و زیبا } (ورژن3)
    توسط sorathost در انجمن آموزش های وی بولتین
    پاسخ: 4
    آخرين نوشته: 2012/11/15, 08:39 PM
  5. آموزش زیبا سازی پست بیت { ساده و زیبا }
    توسط Mohsen Neo در انجمن آموزش های وی بولتین
    پاسخ: 46
    آخرين نوشته: 2012/08/05, 03:40 PM

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

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

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

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