ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 31 مرداد, 1394 5962 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
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا