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

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

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

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

آموزش ساخت آیکون فیس بوک از طریق کدهای HTML و CSS3 مطلب ویژه

توسط 28 مرداد, 1394 5166 0

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

با یکی دیگر از مطالب سایت با عنوان آموزش ساخت آیکون فیس بوک از طریق کدهای Html و Css3 در خدمت شما هستم . ساخت اشکال در Css3 نسبت به ورژن قبلی راحتر شده و با کمی یادگیری تگها به سادگی می توانید یک شکل را به صورت دلخواه طراحی کنید و از اشکال ایجاد شده در قسمت های مختلف وب سایت استفاده کنید .در ادامه میخواهم آیکون فیس بوک را با استفاده از تگهای Html و Css طراحی کنم . 

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

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>
2. یک تگ دیویژن در بین تگ Body ایجاد کرده و شناسه آن را برابر با facebook-icon قرار بدهید . 

<body>
<div id="facebook-icon"></div>
</body>

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

<!DOCTYPE html>
<html>
<head>
        <style>
         </style>
</head>
          <body>
                  <div id="facebook-icon"></div>
           </body>
</html>

 

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

#facebook-icon {
 background: red; text-indent: -999em;
 width: 100px;
 height: 110px;
 border-radius: 5px;
 position: relative;
 overflow: hidden;
 border: 15px solid red;
 border-bottom: 0;
 }
#facebook-icon::before {
 content: "/20";
 position: absolute;
 background: red;
 width: 40px;
 height: 90px;
 bottom: -30px;
 right: -37px;
 border: 20px solid #eee;
 border-radius: 25px;
 }
#facebook-icon::after {
 content: "/20";
 position: absolute;
 width: 55px;
 top: 50px;
 height: 20px;
background: #eee;
 right: 5px;
 }
کد کلی به شکل زیر می باشد .  شما برای درک بهتر اگر آشنایی با تگها ندارید خط به خط تگها را اضافه و نتیجه را در مرورگر مشاهده کنید

<!DOCTYPE html>
<html>
<head>
        <style>
#facebook-icon {
 background: red; text-indent: -999em;
 width: 100px;
 height: 110px;
 border-radius: 5px;
 position: relative;
 overflow: hidden;
 border: 15px solid red;
 border-bottom: 0;
 }
#facebook-icon::before {
 content: "/20";
 position: absolute;
 background: red;
 width: 40px;
 height: 90px;
 bottom: -30px;
 right: -37px;
 border: 20px solid #eee;
 border-radius: 25px;
 }
#facebook-icon::after {
 content: "/20";
 position: absolute;
 width: 55px;
 top: 50px;
 height: 20px; 
background: #eee;
 right: 5px;
 }
         </style>
</head>
          <body>
                  <div id="facebook-icon"></div>
           </body>
</html>

1 آیکون فیس بوک

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در چهارشنبه, 28 مرداد 1394 ساعت 09:52
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا