آذر 24, 1398

    آموزش ساخت باکس حبابی با استفاده از HTML و Css ویژه

    By مرداد 31, 1394 5848 اضافه کردن دیدگاه جدید

    در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

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

    1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

    <!DOCTYPE html>
    <html>
       <head>
       </head>
                  <body>
                  </body>
    </html>

    2. یک تگ دیویژن در بین تگ Body ایجاد کرده و شناسه آن را برابر با triangle-isosceles قرار بدهید . 

    <body>
    <div id="triangle-isosceles"></div>
    </body>

    3. حالا باید یک تگ استایل ایجاد کرده و شناسه triangle-isosceles را فراخوانی کنیم تا با استفاده از تگهای Css آیکون Comment Bubble را بسازیم .

    <!DOCTYPE html>
    <html>
    <head>
            <style>
             </style>
    </head>
              <body>
                      <div id="triangle-isosceles"></div>
               </body>
    </html>

    حالا تگهای زیر را درون style کپی کرده و فایلتان را با عنوان index.html ذخیره و نتیجه را در مرورگر مشاهده کنید .

    #triangle-isosceles {
      position: relative;
      padding: 15px;
      margin: 1em 0 3em;
      color: #000;
      background: #f3961c;
      border-radius: 10px;
      background: linear-gradient(top, #f9d835, #f3961c);
       width: 110px;
    }
    #triangle-isosceles:after {
      content: "";
      display: block; /* reduce the damage in FF3.0 */
      position: absolute;
      bottom: -15px;
      left: 50px;
      width: 0;
      border-width: 15px 15px 0;
      border-style: solid;
      border-color: #f3961c transparent;
    }

    کد کلی به شکل زیر می شود . 

    <!DOCTYPE html>
    <html>
    <head>
            <style>
    #triangle-isosceles {
      position: relative;
      padding: 15px;
      margin: 1em 0 3em;
      color: #000;
      background: #f3961c;
      border-radius: 10px;
      background: linear-gradient(top, #f9d835, #f3961c);
       width: 110px;
    }
    #triangle-isosceles:after {
      content: "";
      display: block; /* reduce the damage in FF3.0 */
      position: absolute;
      bottom: -15px;
      left: 50px;
      width: 0;
      border-width: 15px 15px 0;
      border-style: solid;
      border-color: #f3961c transparent;
    }
             </style>
    </head>
              <body>
                      <div id="triangle-isosceles">متنتان را در این قسمت تایپ کنید </div>
               </body>
    </html>

    2Comment Bubble

    رای دادن به این مورد
    (1 رای)
    آخرین بروز رسانی جمعه, 30 مرداد 1394 23:06

    نوشتن دیدگاه

    تصویر امنیتی
    تصویر امنیتی جدید

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »

    گالری پست

    چطور می توانید متوجه شوید که در اندروید چه برنامه ای را بیش از همه استفاده می کنید ؟

    چطور می توانید وضعیت فعالیت خود را در اینستاگرام پنهان کنید

    موس Trackball چیست و چرا شما نیاز به موس Trackball دارید ؟

    ارسال فکس از طریق تلفن همراه

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

    چطور فایل های خراب در ویندوز را درست کنیم

    تماس از طریق WiFi calling و روش فعال کردن آن در گوشیهای اندروید

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

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

    © 2018 Your Company. All Rights Reserved. Designed By Tripples

    Please publish modules in offcanvas position.

    تک وب دیزاین-قالب فارسی جوملا