Logo
چاپ این صفحه

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

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

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

با یکی دیگر از مطالب سایت با عنوان آموزش ساخت آیکون فیس بوک از طریق کدهای 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 آیکون فیس بوک

آخرین بروز رسانیچهارشنبه, 28 مرداد 1394 09:52

هر آموزشی بگید تو این کانال هست 

برای به اشتراک گذاشتن مطالب اجازه لازم نیست اما برای کپی کردن از اطلاعات درج منبع لازم است .(کپی برداری از مطالب بدون درج منبع حرام است)