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

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

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

    پیش فرض

    واقعا عالی هست آفرین
    دمو : Online HTML, CSS and JS Code Editor (Sandbox) | CSSDeck

    2 تشکر توسط:


  2. Top | #3
    کاربر مفید و فعال

    ورژن ویبولتین
    4.2.0
    نوشته ها
    160
    میزان امتیاز
    29

    پیش فرض

    من که هنوز دهنم باز مونده تبریک میگم

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


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

    ورژن ویبولتین
    ندارم
    نوشته ها
    92
    میزان امتیاز
    12

    پیش فرض

    عالیی ...

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

    دمو با کمی تغیرات : انجمن تخصصی فلاور هورن و ماهی های زینتی

    دمت گرم داداش

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


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

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

    پیش فرض

    مرسی دوستان . ایشالا بنر های شگفت انگیز و زیبا در راه هستن

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


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

    ورژن ویبولتین
    4.2.0
    نوشته ها
    160
    میزان امتیاز
    29

    پیش فرض

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

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


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

    ورژن ویبولتین
    4
    نوشته ها
    1,822
    میزان امتیاز
    211

    پیش فرض

    زبان از بیان این همه زیبایی قاصر است

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


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

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

    پیش فرض

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

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

    ورژن ویبولتین
    4.1.1
    نوشته ها
    464
    میزان امتیاز
    58

    پیش فرض

    خب این کد ها کجا باید قرار بگیرن؟
    چرا دقیق تر توضیح نمیدین؟

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

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

    پیش فرض

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

    سرچ کنید:
    additional.css

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

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

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

    2 تشکر توسط:


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

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

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