آذر 24, 1398

    آموزش ساخت آیکون بی نهایت Infinity با HTML و CSS ویژه

    By مرداد 29, 1394 3874 دیدگاه (1)

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

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

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

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

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

    <body>
    <div id="infinity"></div>
    </body>

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

    <!DOCTYPE html>
    <html>
    <head>
            <style>
             </style>
    </head>
              <body>
                      <div id="infinity"></div>
               </body>
    </html>

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

    #infinity {
    position: relative;
    width: 212px;
     height: 100px;
     }
     #infinity:before, #infinity:after {
    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 60px;
     height: 60px;
     border: 20px solid red;
     -moz-border-radius: 50px 50px 0 50px;
     border-radius: 50px 50px 0 50px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     }
    #infinity:after {
     left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
     }

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

    <!DOCTYPE html>
    <html>
    <head>
            <style>
    #infinity {
    position: relative;
    width: 212px;
     height: 100px;
     }
     #infinity:before, #infinity:after {
    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 60px;
     height: 60px;
     border: 20px solid red;
     -moz-border-radius: 50px 50px 0 50px;
     border-radius: 50px 50px 0 50px;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     }
    #infinity:after {
     left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
     }
             </style>
    </head>
              <body>
                      <div id="infinity"></div>
               </body>
    </html>

     

    آموزش ساخت آیکون بی نهایت Infinity با HTML و CSS

    رای دادن به این مورد
    (1 رای)
    آخرین بروز رسانی چهارشنبه, 28 مرداد 1394 13:59

    نوشتن دیدگاه

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

    دیدگاه‌ها   

    0 #1 مصطفی 1394-05-29 18:24
    ممنون بابت مطالبی که در سایت قرار میدید
    همین که مطالب جدید هست و کپی برداری نیست خودش کلی برای ما خوبه
    تو اینترنت یه چی جستجو میکنی صدتا سایت میاره همش عین هم
    نقل قول کردن

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

    «
    • 1
    • 2
    • 3
    »

    گالری پست

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

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

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

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

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

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

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

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

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

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

    Please publish modules in offcanvas position.

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