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

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

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

کاربران مقدماتی برای آشنا شدن با تگهای کاربردی و جدید 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>

 

آیکون ذره بین

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