آذر 24, 1398

    ایجاد آیکون ذره بین با HTML و CSS ویژه

    By شهریور 01, 1394 6333 دیدگاه (2)

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

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

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

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

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

    <body>
    <div id="space-invader"></div>
    </body>

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

    <!DOCTYPE html>
    <html>
    <head>
            <style>
             </style>
    </head>
              <body>
                      <div id="magnifying-glass"></div>
               </body>
    </html>

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

    #magnifying-glass { 
    font-size: 10em; /* This controls the size. */
    display: inline-block;
     width: 0.4em;
     height: 0.4em;
     border: 0.1em solid red;
     position: relative;
     border-radius: 0.35em;
     }
    #magnifying-glass::before {
     content: "";
     display: inline-block;
     position: absolute;
     right: -0.25em;
     bottom: -0.1em;
     border-width: 0;
     background: red;
     width: 0.35em;
     height: 0.08em;
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     }

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

    <!DOCTYPE html>
    <html>
    <head>
            <style>
     #magnifying-glass {
    font-size: 10em; /* This controls the size. */
    display: inline-block;
     width: 0.4em;
     height: 0.4em;
     border: 0.1em solid red;
     position: relative;
     border-radius: 0.35em;
     }
    #magnifying-glass::before {
     content: "";
     display: inline-block;
     position: absolute;
     right: -0.25em;
     bottom: -0.1em;
     border-width: 0;
     background: red;
     width: 0.35em;
     height: 0.08em;
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     }
             </style>
    </head>
              <body>
                      <div id="magnifying-glass"></div>
               </body>
    </html>

     

    آیکون ذره بین

    رای دادن به این مورد
    (2 رای)
    آخرین بروز رسانی شنبه, 31 مرداد 1394 23:17

    نوشتن دیدگاه

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

    دیدگاه‌ها   

    0 #2 comprar cialis 1398-05-11 01:11
    Hablar con la pareja sobre el problema, o buscar consejo y apoyo externo puede ayudar. Sin embargo, la ansiedad de rendimiento es una de las causas psicológicas más comunes de impotencia, psicológicament e hablando se considera como un componente principal y persistente debido a su naturaleza autoperpetuante . comprarcialis.online/
    نقل قول کردن
    0 #1 comprar cialis 1398-05-10 21:27
    Si le ha ocurrido recientemente, el problema es definitivamente psicológico ya que es capaz de obtener erecciones. La enfermedad del corazón hace casi imposible que este órgano bombee lo suficientemente rápido o fuerte para distribuir la sangre a cada porción del cuerpo, incluyendo el pene. Comprar cialis genérico
    نقل قول کردن

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

    «
    • 1
    • 2
    • 3
    »

    گالری پست

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

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

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

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

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

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

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

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

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

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

    Please publish modules in offcanvas position.

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