چاپ کردن این صفحه

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

By مرداد 31, 1394 5949 0

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

تا به حال به وب سایتهایی که جهت معرفی یک بخش یک کادر ایجاد کرده و درون آن متنی نوشته اند دقت کرده اید . اجازه بدهید با یک مثال ساده تر این شکل را برای شما معرفی کنم . در کتاب های درسی بالای سر کودکان یا افرادی که در حال فکر کردن هستند یک ابر میکشیدند و متن مورد نظر را درون آن تایپ میکردند . به این نوع اشکال 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

آخرین‌ها از سعید صبح خیز

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